Skip to Content
This question has been flagged
webjsowlOWLodoo16features
1 Respondre
4396 Vistes
Avatar
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);
Avatar
Descartar
Rithik Sandron
Autor

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>

Avatar
Cybrosys Techno Solutions Pvt.Ltd
Best Answer

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.

Avatar
Descartar
Related Posts Respostes Vistes Activitat
Disable editing in the Form View Odoo 16 JS
javascript js owl OWL odoo16features
Avatar
0
de des. 23
2518
How do I override functions outside the class in the Odoo 16 Owl framework?
js OWL odoo16features
Avatar
Avatar
1
de juny 24
5728
How can i show a notification once i got an api response in through a controller
js owl v15 odoo16features
Avatar
Avatar
1
d’ag. 24
3611
Child Component not get props from parent - Owl - Odoo16
js components owl odoo16features
Avatar
1
de des. 23
3694
OwlError: An error occured in the owl lifecycle (see this Error's "cause" property) Solved
community js owl odoo16features @niyas
Avatar
Avatar
2
de maig 25
27537