13
Views
4
Comments
Solved
Accordion - How to avoid expand/collapse on header when user click check box


I'm a beginner,

I have a group of check box like image below. How can I keep the Accordion DO NOT expand/collapse when I click on exactly the "SelectAll" Checkbox put on the header.

I need a simple way, I'll really happy if you tell me what I should do step by step!

Thanks all!



mvp_badge
MVP
Rank: #72
Solution

Hi Hoai,

For the mentioned use-case, I have created a sample app 

Traditional web app -> Sample App | AccordionTask

Reactive web app ->  https://www.outsystems.com/forums/discussion/66177/reactive-accordion-item-onclick-triggered/#Post262575


Please follow the below-mentioned implementation steps.

Steps to follow

  1. Create a web block to encapsulate custom JavaScript code to restrict the accordion header onclick expand/collapse functionality
  2. Introduce the respective web block in the screen footer placeholder section
  3. Add the custom class which is referred in the JS code to all the HTML elements Style Classes property (as shown in the below image) which are placed/defined in the accordion header placeholder. i.e. in our case, it is  select all checkbox element


JavaScript defined within the Web block

  •  Below mentioned JavaScript code is used as the Expression widget (set Escape Content property to No) value within the refered web block.


JavaScript Snippet

"<script>

  (() => {
        let customCheckBoxes = document.querySelectorAll('.jsClass');

        customCheckBoxes.forEach(customCheckBox => {
            customCheckBox.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });    
    
    })();

</script>"


Hope this helps you!


Kind regards,

Benjith Sam

TWALabAccordionTask.oml

Rank: #42995

Hi Benjith,

Thanks you very much!

I was changed style class to The Web block name for each container I need and my problem is solved! xD

Best regards,

Hoai Linh

Rank: #287
Solution
Rank: #42995

It's work, but in my case, I have 4 Accordions and it just effect on the first accordion!

What should I do to resolve my problem? :(

mvp_badge
MVP
Rank: #72
Solution

Hi Hoai,

For the mentioned use-case, I have created a sample app 

Traditional web app -> Sample App | AccordionTask

Reactive web app ->  https://www.outsystems.com/forums/discussion/66177/reactive-accordion-item-onclick-triggered/#Post262575


Please follow the below-mentioned implementation steps.

Steps to follow

  1. Create a web block to encapsulate custom JavaScript code to restrict the accordion header onclick expand/collapse functionality
  2. Introduce the respective web block in the screen footer placeholder section
  3. Add the custom class which is referred in the JS code to all the HTML elements Style Classes property (as shown in the below image) which are placed/defined in the accordion header placeholder. i.e. in our case, it is  select all checkbox element


JavaScript defined within the Web block

  •  Below mentioned JavaScript code is used as the Expression widget (set Escape Content property to No) value within the refered web block.


JavaScript Snippet

"<script>

  (() => {
        let customCheckBoxes = document.querySelectorAll('.jsClass');

        customCheckBoxes.forEach(customCheckBox => {
            customCheckBox.addEventListener('click', function(e) {
                e.stopPropagation();
            });
        });    
    
    })();

</script>"


Hope this helps you!


Kind regards,

Benjith Sam

TWALabAccordionTask.oml

Rank: #42995

Hi Benjith,

Thanks you very much!

I was changed style class to The Web block name for each container I need and my problem is solved! xD

Best regards,

Hoai Linh