Accordion Widget
This type of widget belongs to the Basic category in the widget library. It enables you to create an accordion menu containing a list of sections displayed one below the other. These sections can contain text or images, point to a HTML page, or call a page from the app or from another app. This is used to display a maximum amount of information in the least number of pages.
Notes
See General information on widgets.
Best practice
- You use the Accordion widget to group a small amount of information in sections. If you want to group information in horizontal or vertical tabs, you should use the Tab widget.
- Define the height of the widget so that all of the sections are displayed (Theme > Widget Height).
Example
List of properties
Content
Accordions: List of sections, each with a title and content. Click [ ADD ITEM ] to add a new section. See the procedure.
Theme
See the description of properties
GeneralElements
Graphical representation | Configurable element | Properties to be filled in |
---|---|---|
![]() |
(1) Widget | General properties > Element = Widget
|
(2) Section active | General properties > Element = Selection (Active)
|
|
(3)Inactives sections | General properties > Element = Selection (Secondary)
|
Procedures
How to create an accordion menu with sections
1. Click [ ADD ITEM ]. In the Accordions field, enter the title of the first section of the accordion menu and specify its content. You can enter the code directly in the field or click to open the text editor.
2. Repeat this procedure for the other sections in the order in which you want to display them.
- To change the order in the Accordions list, click and drag the section you want to its new position using
.
- To delete a section, click
.
3. Switch to execute mode to view the accordion menu as it will appear to users.
How to retrieve the launch URL of an app
1. In the App Gallery, click next to the app you want to run.
2. In the graphic editor, click in the toolbar.
3. Copy the app launch URL.
4. Return on your app and paste the URL:
- either in the URL property of a hyperlink inserted on a Label, Header/Footer or HTML Code properties of a widget (via
in the text editor);
- or in the URL to Load property of the Button widget ;
- or in the Data > Select Link Type property of the Menu widget.