I had a problem with the explan/collapse of according items when click on the input box of the header, then I found the solution from this post for Mobile & Reactive: https://www.outsystems.com/forums/discussion/66177/reactive-accordion-item-onclick-triggered/#Post262575 (1), and that work fine.
But the behavior of my screen did not look like that, I had an Input box under According Items that enclose by List item again. My pain point is I can't get an or any widget id of my input box. Nevertheless, I had created a list of items and add their onclick() event from the advice of this post: https://www.outsystems.com/forums/discussion/62387/how-to-get-inputbox-id-under-listgroup/ (2), and I'm still unable to get a widget id :(
For my screen layout,
For my JavaScript creat on OnReady() event based on (1),
Based on (2), Input_TextVar.Id still not found,
Does anyone can tell me why, or have any solution for this, please help me =/\=
Thankyou.
Hi Pongsakorn,
Note that during the code development/design time, you can't reference any of the widget Id runtime property defined within the List or Table widget because it's an iterative pattern. Instead, the widget id is created and assigned on the run time.
I do have a solution for the mentioned case. See this solution screen: RWA | AccordionTitleWithInputTask
Implementation Steps:
1) Define a custom class (js__class) to the List widget Style Classess property section as shown below.
2) Define a custom class (inpt_js) to the input widget (List widget > Accordion > Title place holder > input) Style Classess property section as shown below.
3) In the OnReady action flow define a JS node with the below code.
JavaScript Snippet:
document.querySelector('.list.js__class').addEventListener('click', function(e) { if(e.target.classList.contains('inpt_js')) { e.stopPropagation(); } });
Refer to the attached .oml solution file.
I hope this helps you!
Kind regards,
Benjith Sam
Dear @Benjith Sam,
Thank you! that is the best solution. But, not work for me, T.T
In my case, I had tried many ways to adapt your solution and I found the reason why not work (for me)
1. I had close implement your solution step by step and not thing happen then I try to move JS into OnAfterFetch() event of entity (source of using list) to find out why still did not work and I got an error like this
Then, I had search and read about this problem, from this post: https://www.outsystems.com/forums/discussion/70714/cannot-read-property-addeventlistener-of-null/, it's happening because my widget doesn't load, visible, or appearing at first, it has an If statement (widget) that decide to show this list of according items which based on my business logic (most of my workflow will look like this).
2. From above 1., I have been testing by moving the list of according items out of the If statement, and Yes! that work find by your advice!
In my case, how do I solve this problem?
In addition, this https://drive.google.com/file/d/1niFfhU51IU7yjAH_77Avlk4sLwe25CPT/view?usp=sharing will provide the use case of my program that I descript my problem in above and,
this image is described attach video, and for below image this show detail of my if-clause statement that decides to show/render the content of according items of the list again.
Regards,
Pongsakorn
Based on the shared exception screen capture, it is pretty much clear that the dom element was not available when the JS node tried to register a click event handler. Probably it was because of the reason the wrapped IF widgets condition was not satisfied.
I would suggest you try following the other approach.
1) Remove the style class, i.e. js__class from the List widget
2) Encapsulate the section (Table_Planning2) inside a container and define the same style class as shown in the below image.
3) Define the same js node in the OnReady action flow with a slighy change in the query selector
JS snippet:
document.querySelector('div.js__class').addEventListener('click', function(e) { if(e.target.classList.contains('inpt_js')) { e.stopPropagation(); } });
See this solution screen: RWA | AccordionTitleWithInputTask
Refer to the attached .oml solution file (Screen: AccordionTitleWithInputTask2)
If the above solution doesn't work, It will be better if you can share a sample .oml file with the exact implementation. We can give it a try to help you :)
I have done with this your reply, thank you very much!
👍🏼👍🏼👍🏼
Best regards
You're welcome, Pongsakorn
Glad to help you 😊