Accordian expand only when i click icon.

Back to Forums

Venkatesaiya

Solved

Question

JavaScript

Reactive

OutSystems UI

OutSystems UI Patterns

Application Type

Reactive

Platform Version

11.19.0 (Build 38072)

I have input field in the Accordian title , Accordian will expand only when I click icon and input box

10 Feb 2023

Venkatesaiya

Solution

Thank you for all your replies, I solved it.
I share my oml file your reference

See solution in context

Accordian.oml

22 Feb 2023

1 reply

22 Feb 2023

Show thread

Hide thread

Benjith Sam

MVP

Hi Venkat,

Good try! I'm not sure whether you observed the below exception in the console.

One of the other approaches using JS for your use case could be as follows.

Add a custom style class to the input e.g., inset (it was already defined in your solution)
Register a click handler for the accordion title placeholder - stop the click event propagation other than input

JS Snippet:

const accordionEle = document.getElementById($parameters.AccordianId);

accordionEle.querySelector('.osui-accordion-item__title__placeholder').addEventListener('click', (e) => { 
    if (!e.target.classList.contains('inset')) {
        e.stopPropagation();
    }
});

Demo Screen: AccordionJSTask

Refer to the attached oml.

I hope this helps you!

Kind regards,

Benjith Sam

Accordian.oml

22 Feb 2023

Ajit Kurane

Hi,

What do you expect can you please explain more about your issue ?

Thanks.

10 Feb 2023

Venkatesaiya

In Accordian Widget, I have input box in the (Accordian item title). The will expand only when click customIcon and InputBox focus .

10 Feb 2023

Shivam Mishra

venkatesaiya k

Can you use this forge components (Expandable Table Row ) For Better Understanding.

Screenshot (444).png

11 Feb 2023

Ibruse

Hello there, @venkatesaiya k.

Within the Accordion widget, choose your particular Accordion Item widget, go to properties, and set the StartsExpanded property to True.

Best Regards

accordion.png

11 Feb 2023

Venkatesaiya

Thank you @shivam mishra @Ibruse For your replies.

but I not get expecting solution .

13 Feb 2023

Shubham Sharma

Champion

Hi venkatesaiya,

In the screen where you have added the Accordion widget, add a variable called "IsAccordionExpanded". This variable will be used to store the state of the Accordion item, whether it is expanded or collapsed.

Create an action called "ExpandAccordion" that takes a boolean input parameter called "Expand". This action will be used to set the value of the "IsAccordionExpanded" variable. The action should have the following code

IsAccordionExpanded = Expand;

Create a microflow called "ToggleAccordion". This microflow will be triggered when the custom icon is clicked. The microflow should have the following code:

ExpandAccordion(True);

SetFocus("InputBox", False);

In the Accordion item, add an input box widget and give it an id of "InputBox".

Add an OnBlur event to the input box widget. This event will be triggered when the input box loses focus. The event should have the following code:

ExpandAccordion(False);

In the custom icon that you have added to the Accordion item title, add an OnClick event. This event will be triggered when the custom icon is clicked. The event should have the following code:

ToggleAccordion();

Bind the expansion state of the Accordion item to the "IsAccordionExpanded" variable.

If you got any issues following these steps do let me know.

13 Feb 2023

Shlok Agrawal

Hey @venkatesaiya k

Please refer the file attached, this will surely solve your problem.

Thanks

Shlok Agrawal.

dEMO.oap

13 Feb 2023

Venkatesaiya

Thank you @Shubham Sharma can you send sample oml file.

13 Feb 2023

Venkatesaiya

Solution

Thank you for all your replies, I solved it.
I share my oml file your reference

Accordian.oml

22 Feb 2023

1 reply

22 Feb 2023

Show thread

Hide thread

Benjith Sam

MVP

Hi Venkat,

Good try! I'm not sure whether you observed the below exception in the console.

One of the other approaches using JS for your use case could be as follows.

Add a custom style class to the input e.g., inset (it was already defined in your solution)
Register a click handler for the accordion title placeholder - stop the click event propagation other than input

JS Snippet:

const accordionEle = document.getElementById($parameters.AccordianId);

accordionEle.querySelector('.osui-accordion-item__title__placeholder').addEventListener('click', (e) => { 
    if (!e.target.classList.contains('inset')) {
        e.stopPropagation();
    }
});

Demo Screen: AccordionJSTask

Refer to the attached oml.

I hope this helps you!

Kind regards,

Benjith Sam

Accordian.oml

22 Feb 2023

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.

See the full guidelines