how to add this button in the Tree view ??
This code in library/static/src/js/script.js
openerp.library = function(instance) {
instance.web.ListView.include({
load_list: function(data) {
this._super(data);
if (this.$buttons) {
this.$buttons.find('.oe_my_button').off().click(this.proxy('do_the_job'));
}
},
do_the_job: function() {
this.do_action({
name: _t("View name"),
type: "ir.actions.act_window",
res_model: "object",
domain: [],
views: [
[false, "list"],
[false, "tree"]
],
target: 'new',
context: {},
view_type: 'list',
view_mode: 'list'
});
}
});
}
This code in library/static/src/xml/library_view.xml
<template xml:space="preserve">
<t t-extend="ListView.buttons">
<t t-jquery="button.oe_list_add" t-operation="after">
<button t-if="widget.dataset.model == 'inventory'" class="oe_button oe_my_button oe_highlight" type="button">My Button</button>
</t>
</t>
</template>
in my openerp.py
'qweb': ['static/src/xml/library_view.xml'],
What about your library/static/src/js/script.js file?
Add js file in odoo backend asset template like below:-
<template id="assets_backend" name="work_group assets" inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script
type="text/javascript"
src="/library/static/src/js/script.js">
</script>
</xpath>
</template>
Related
...
<b-table
class="table table-bordered"
id="my-table"
striped hover
:items="items"
:per-page="perPage"
...
></b-table>
items: [
{ id : 1, name : "Taylor", status: "passive" },
{ id : 2, name : "Tom", status: "passive" },
{ id : 3, name : "Arthur", status: "passive" },
...
İ want name or more details when i click it will transfer to new page. How can i do that ?
You can use slots to customize your b-table. I prepared a code snippet to show you how you can add a detail button in your table and redirect the user to a new page after clicking on it.
new Vue({
el: '#app',
data() {
return {
fields: ['id', 'name', 'status', 'details'],
items: [{
id: 1,
name: "Taylor",
status: "passive"
},
{
id: 2,
name: "Tom",
status: "passive"
},
{
id: 3,
name: "Arthur",
status: "passive"
},
]
}
},
methods: {
},
mounted() {},
})
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap#4.5.3/dist/css/bootstrap.min.css" />
<link type="text/css" rel="stylesheet" href="https://unpkg.com/bootstrap-vue#2.21.2/dist/bootstrap-vue.css" />
<script src="https://unpkg.com/vue#2.6.12/dist/vue.min.js"></script>
<script src="https://unpkg.com/bootstrap-vue#2.22.0/dist/bootstrap-vue.min.js"></script>
<div id="app">
<b-table bordered id="my-table" striped hover :items="items" :fields="fields">
<template #cell(details)="row">
<b-link :to="`/items/${row.item.id}`">Details</b-link>
</template>
</b-table>
</div>
I know how to bind a Vue application to a select with multiple attribute.
But in this particular case, I have a list of checkboxes that can be turned on or off. They are attributes of a residency to reserve.
For example, user sees a list of features of an accommodation like :
How can I bind these?
You can achieve this by using vue-multiselect library.
Demo :
new Vue({
components: {
Multiselect: window.VueMultiselect.default
},
data: {
value: [],
accommodation: [{
feature: 'Party'
},
{
feature: 'Food'
},
{
feature: 'Oven'
},
{
feature: 'AC'
}
]
},
methods: {
customLabel(option) {
return `${option.feature}`
},
isSelected(option) {
return this.value.some((op) => op.feature === option.feature)
}
}
}).$mount('#app')
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/vue-multiselect#2.0.2/dist/vue-multiselect.min.css" rel="stylesheet" />
<script src="https://unpkg.com/vue-multiselect#2.0.3/dist/vue-multiselect.min.js"></script>
<div id="app">
<multiselect v-model="value" :options="accommodation" :multiple="true" track-by="feature" :custom-label="customLabel" :close-on-select="false">
<span class="checkbox-label" slot="option" slot-scope="scope">
{{ scope.option.feature }}
<input class="test" type="checkbox" :checked="isSelected(scope.option)" #focus.prevent :key="scope.option.feature" />
</span>
</multiselect>
</div>
This is my code for my html in App.vue file.
<b-form #submit="onSubmit">
<b-form-group>
**nested v-model binding**
<div v-for="(question, index) in questionsList" :key="question.question">
<h4>{{question.question}}</h4>
<div v-for="options in question.responses" :key="options.options">
<input
type="radio"
:name="'question'+index"
:value="options.options"
v-model="responses['question'+index]"
/>
{{options.options}}
<br />
</div>
</div>
<b-button variant="outline-primary" type="submit">Submit</b-button>
</b-form-group>
</b-form>
*** script ***
export default {
data() {
return {
responses: {},
questionsList: [
{
id: "1",
question: "What is the full form of HTTP?",
responses: [
{ options: "Hyper text transfer package" },
{ options: "Hyper text transfer protocol" }
],
},
{
id: "2",
question: "HTML document start and end with which tag pairs?",
responses: [
{ options: "HTML" },
{ options: "WEB" }
],
},
answersheet: {
q1: "Hyper text transfer protocol",
q2: "HTML"
},
methods: {
onSubmit(event) {
event.preventDefault();
var score = 0;
for (var key of Object.keys(this.responses)) {
console.log(key + " -> " + this.responses[key]);
//displays the answers of the users
**trying to compare the answers from my answersheet but keeps saying undefined**
if (this.responses[key] == this.answersheet[key]) {
score = score + 1;
}
}
displays score to console
console.log(score);
}
}
What I'm trying to do here is to calculate the number of correct answers and then send the result to an api, but my code won't work.
I'm still a noob with vuejs and this is my first project for my class.
I've made some points and made some changes on your code
You needed to make sure opening and closing brackets written
Check indexes and make sure you are comparing right values
Read documentation carefully and try to follow getting started instructions. It gives you quite good orientation.
Have fun
new Vue({
el: '#app',
data() {
return {
isSubmitted: false,
score: 0,
responses: {},
questionsList: [
{
id: "1",
question: "What is the full form of HTTP?",
responses: [
{ options: "Hyper text transfer package" },
{ options: "Hyper text transfer protocol" }
],
},
{
id: "2",
question: "HTML document start and end with which tag pairs?",
responses: [
{ options: "HTML" },
{ options: "WEB" }
],
},
],
answersheet: {
question0: "Hyper text transfer protocol",
question1: "HTML"
},
};
},
methods: {
tryAgain() {
this.responses = {};
this.score = 0;
this.isSubmitted = !this.isSubmitted;
},
onSubmit() {
for (var key of Object.keys(this.responses)) {
console.log(key + " -> " + this.responses[key]);
if (this.responses[key] == this.answersheet[key]) {
this.score++;
}
}
this.isSubmitted = !this.isSubmitted
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<link href="https://unpkg.com/bootstrap#4.5.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<link href="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.css" rel="stylesheet" />
<script src="https://unpkg.com/bootstrap-vue#2.16.0/dist/bootstrap-vue.js"></script>
<div id="app">
<b-form #submit.prevent="onSubmit">
<b-form-group v-if="!isSubmitted">
<!-- nested v-model binding** -->
<div v-for="(question, index) in questionsList" :key="question.question">
<h4>{{question.question}}</h4>
<div v-for="options in question.responses" :key="options.options">
<input
type="radio"
:name="'question'+index"
:value="options.options"
v-model="responses['question'+index]"
/>
{{options.options}}
<br />
</div>
</div>
<b-button variant="outline-primary" type="submit">Submit</b-button>
</b-form-group>
<div v-else>
Your score: {{ score}}
<br>
<b-button variant="outline-primary" #click="tryAgain">Try Again</b-button>
</div>
</b-form>
</div>
I'm using the code below to load a table, which works well. However the fields of the dataset can vary, so I would like the template for the table to be dynamic.
So instead of defining each column in code, I would like it to load as many columns as are in the data, using the provided template. To do this, I need to replace {{props.row.uid}} by something similar where the "uid" part is dynamically loaded with the value from "column.field".
I haven't been able to figure out how to do this...
<template>
<b-table :data="data">
<template v-for="column in columns">
<b-table-column :key="column" :field="column.field" :label="column.label" centered v-slot="props">
<template v-if="column.type === 'string'">
<span>{{props.row.uid}}</span>
</template>
<template v-if="column.type === 'list'">
<span v-for="item in props.row.list" :key="item" class="tag mr-2">{{item}}</span>
</template>
</b-table-column>
</template>
</b-table>
</template>
<script>
export default {
data() {
return {
data: [
{ 'uid': 1, 'list': ["Value1","Value2","Value3"] },
{ 'uid': 2, 'list': ["Value1","Value2","Value3"] },
{ 'uid': 3, 'list': ["Value1","Value2","Value3"] }
],
columns: [
{
field: 'uid',
label: 'UID',
type: 'string'
},
{
field: 'list',
label: 'List',
type: 'list'
}
]
}
}
}
</script>
Can't believe I didn't try this sooner, but following did the job:
props.row[column.field]
I am trying to add a button to the POS screen. A lot of the information I have for this is related to Odoo 11 CE and this is probably why it is not working. I installed the custom addon without any errors but I don't see the button. I don't get any errors when running the POS either. In version 11 there is a widgets.js file which includes
module.PosWidget.include({
build_widgets: function(){
var self = this;
this._super()
There is no widgets.js in version 11 and I am guessing this is where my problem is. Its just a guess I really dont know how to add a button to the POS.
Here is my pos_custom.js
odoo.pos_custom = function(instance){
var module = instance.point_of_sale;
var round_pr = instance.web.round_precision
var QWeb = instance.web.qweb;
console.log("POS JS Loaded")
module.PosWidget.include({
build_widgets: function(){
var self = this;
this._super()
custom_btn = $(QWeb.render(`custom_btn`))
custom_btn.click(function(){
alert("hello")
})
console.log("button <<<>>> ",custom_btn,this.$(`.control-button`))
custom_btn.appendTo(this.$(`.control-button`))
this.$control_buttons`).removeClass(`oe_hidden`)
}
})
};
My /src/xml/pos_custom.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates xml="template" xml:space="preserve">
<t t-name="custom_btn">
<button>Cust Button</button>
</t>
</templates>
my /views/templates.xml
<?xml version="1.0"?>
<openerp>
<data>
<template id="assets_backend" name="pos_custom assets"
inherit_id="web.assets_backend">
<xpath expr="." position="inside">
<script type="text/javascript"
src="/pos_custom/static/src/js/pos_custom.js"></script>
</xpath>
</template>
</data>
</openerp>
manifest.py
{
'name': 'Point Custom Module',
'version': '1.2',
'category': 'Point of Sale',
'summary': 'Custom Point of Sale ',
'description': "",
'data': [
"views/templates.xml"
],
'depends': ['point_of_sale'],
'qweb': ['static/src/xml/*.xml'],
'application': True,
}
/custom-button/manifest.py
{
'name': 'CustomButton',
'summary': '',
'version': '1.0',
'description': """
""",
# 'author': '',
# 'maintainer': '',
# 'contributors': [''],
# 'website': '',
'license': 'AGPL-3',
'category': 'Uncategorized',
'depends': [
'base', 'point_of_sale',
],
'external_dependencies': {
'python': [
],
},
'data': [
'views/templates.xml',
],
'demo': [
],
'js': [
],
'css': [
],
'qweb': [
'static/src/xml/custom_button.xml',
],
'images': [
],
'test': [
],
'installable': True
}
/custom-button/views/templates.xml
<?xml version="1.0" encoding="utf-8"?>
<odoo>
<template id="assets" inherit_id="point_of_sale.assets">
<xpath expr="." position="inside">
<script type="text/javascript" src="/custom-button/static/src/js/custom.js"></script>
</xpath>
</template>
</odoo>
/custom-button/static/src/xml/custom_button.xml
<?xml version="1.0" encoding="UTF-8"?>
<templates id="template" xml:space="preserve">
<t t-name="CustomButton">
<span class="control-button">
<i class="fa fa-print"></i>
Custom Button
</span>
</t>
</templates>
/custom-button/static/src/js/custom.js
odoo.define('custom-button.custom_button', function (require) {
"use strict";
var core = require('web.core');
var screens = require('point_of_sale.screens');
var gui = require('point_of_sale.gui');
//Custom Code
var CustomButton = screens.ActionButtonWidget.extend({
template: 'CustomButton',
button_click: function(){
var self = this;
self.custom_function();
},
custom_function: function(){
console.log('Hi I am button click of CustomButton');
}
});
screens.define_action_button({
'name': 'custom_button',
'widget': CustomButton,
});
});
screenshot of the custom button in POS screen
https://github.com/minaeid90/Custom-Button