跳至內容
此問題已被標幟
webjsowlOWLodoo16features
1 回覆
4355 瀏覽次數
頭像
Rithik Sandron

I need to show/hide certain form elements(div classes) in the view from OWL classes.

OWL:

const { Component } = owl;

class Counter extends Component {
	​static template = "custom_module.template";
	​
	​setup() {
		​super.setup();​
	​}

	​_showField(){
	​	​var counter = 1;
	​	//show/hide div class
	​	​//fill counter input field with the above value​ counter=1
	​}
}

XML Template:


	​
Counter

	​

		​​
	​

	​

	​	
	​
​


How to show/hide the class and fill the input field with value from OWL? in the older custom module system this could be achieved by using the following, Im looking to achieve similar working in OWL2.

// to show or hide classes
$(".show_counter").show();
$(".show_counter").hide();

// to fill the input field
var counter = 1;
$("#counter").val(counter);
頭像
捨棄
Rithik Sandron
作者

xml template:

<t t-name="custom_module.template" owl="1">
​<h1>Counter</h1>
​<div class="counter_button">
​<button t-on-click="_showField">Show</button>​
​</div>
​<div class="show_counter">
​ <input type="text" class="form-control" id="counter"/>
​</div>​
</t>

頭像
Cybrosys Techno Solutions Pvt.Ltd
最佳答案

Hi 

For hide/show the form elements using Owl, use the following code:

OWL:/** @odoo-module **/

import { Component, useState, useRef } from "@odoo/owl";


export class Counter extends Component {

    static template = "CounterTemplate";

    setup() {

        // Creates a reference to a DOM element within the component

        this.counterRef = useRef("counterRef"); // for getting the doc element


        this.state = useState({

            counter: 0,

            show: false, // for show and hide the div

        })

    }


    showAndHideField() {

        //it is the method using useRef

        // you can hide the element by adding class

        this.counterRef.el.classList.add('d-none');


        // you can show the element by removing class

        this.counterRef.el.classList.remove('d-none');


        // it is a method using useState

        // If you don't want to use this method, you can render

        // elements conditionally by using useState hook I provide that below


        this.state.show = !this.state.show;


        // if you can change the value in the input box

        // you can alter the value in the state.counter

        this.state.counter = 1;

    }

}


XML:

<t t-name="CounterTemplate">

    <h1>Counter</h1>

    <div class="counter_button">

        <button t-on-click="showAndHideField">Show</button>

    </div>


        <!--here I added t-if to render this particular div conditionally

        if the value of show is true it rendered   -->

    <div t-if="state.show" class="show-counter" ref="counterRef">

        <input t-model="state.counter" type="text" class="form-control" id="counter"/>

    </div>

</t>



Hope this helps.

頭像
捨棄
相關帖文 回覆 瀏覽次數 活動
Disable editing in the Form View Odoo 16 JS
javascript js owl OWL odoo16features
頭像
0
12月 23
2478
How do I override functions outside the class in the Odoo 16 Owl framework?
js OWL odoo16features
頭像
頭像
1
6月 24
5640
How can i show a notification once i got an api response in through a controller
js owl v15 odoo16features
頭像
頭像
1
8月 24
3554
Child Component not get props from parent - Owl - Odoo16
js components owl odoo16features
頭像
1
12月 23
3649
OwlError: An error occured in the owl lifecycle (see this Error's "cause" property) 已解決
community js owl odoo16features @niyas
頭像
頭像
2
5月 25
27272