Odoo is the world's easiest all-in-one management software.
It includes hundreds of business apps:

إدارة علاقات العملاء
e-Commerce
المحاسبة
المخزون
PoS
المشروع
MRP

All apps

كافة المنشورات الأفراد الشارات

علامات التصنيف (عرض الكل)

odoo accounting v14 pos v15

حول هذا المنتدى

المساعدة

[Owl] How to hide/show form elements? v16

web js owl OWL odoo16features

1 الرد

4407 أدوات العرض

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

أفضل إجابة

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:

<h1>Counter</h1>

</div>

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

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

</div>

</t>

Hope this helps.

هل أعجبك النقاش؟ لا تكن مستمعاً فقط. شاركنا!

أنشئ حساباً اليوم لتستمتع بالخصائص الحصرية، وتفاعل مع مجتمعنا الرائع!

تسجيل

المنشورات ذات الصلة	الردود	أدوات العرض
Disable editing in the Form View Odoo 16 JS javascript js owl OWL odoo16features	0 ديسمبر 23	2526
How do I override functions outside the class in the Odoo 16 Owl framework? js OWL odoo16features	1 يونيو 24	5751
How can i show a notification once i got an api response in through a controller js owl v15 odoo16features	1 أغسطس 24	3622
Child Component not get props from parent - Owl - Odoo16 js components owl odoo16features	1 ديسمبر 23	3709
OwlError: An error occured in the owl lifecycle (see this Error's "cause" property) تم الحل community js owl odoo16features @niyas	2 مايو 25	27632

لقد تم الإبلاغ عن هذا السؤال

Counter

هل أعجبك النقاش؟ لا تكن مستمعاً فقط. شاركنا!