[Silk UI Web] Accordion Load Content on Click

Forge Component
(103)
Published on 9 Mar by OutSystems R&D
103 votes
Published on 9 Mar by OutSystems R&D

Hi everyone,

Is there any sample on how to use an accordion with a load on click functionality?

I would like to load the content of an accordion item just when user clicks to expand it. Similar to load on click from tabs.

Thanks,

Ana

Solution

Hi Ana,

In attach goes a simple implementation of that functionality. You will probably have to tweak it to your needs.

What I've done is:

  • Assumed that you had the accordion items in a ListRecords
  • Add a boolean value to the elements of the list (it will serve as indication that the content is to be loaded)
  • Add If widgets in each Accordion Item to show or not the loaded content (the condition is the boolean variable)
  • Add another event to the clicking of the header of the accordion item
  • In that event it will:
    • get the index of the element that you clicked on
    • Put that index into an input field
    • Click the button (you should hide the input field and the button, they are there only for debugging)
  • In the action of the button it will:
    • set the boolean variable of the element of the list given by the index to true
    • refresh that item of the list
    • add again the event to all the headers of the accordion items
  • That's it.

In short, when you click on a header of an accordion item it will set a condition of an item to true and when you refresh that item it will load the content.

See if it works for you.

Cheers,

José

Solution

Thank you José. It works great.

Hi José,


I downloaded your example and if Idon't change anything, everything works fine. In the meantime I created a new table with phone numbers (Phones), which has a key for the Person table. I put in a Web Block a list with the result of a query to the Phones table, filtered by the selected PensonId. Then I placed the Web Block in the true branch of the AccordionItem. Now Click on Accordion_header only works the first time. However, if Iuse the input box and the "OK" button everything works. Do you have any idea what could be causing this problem?


Best regards,


Carlos Messias