This question has been flagged
1 Reply
1191 Views
webjsowlOWLodoo16features
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
Discard
Rithik Sandron
Author

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
Discard