In many scenarios, the UI content is too much to contain in one screen. There are several ways to deal with this, for example: Use a Tabstrip to split the content to different tabs, according to topics.
I would like to present another option: a vertical list of expandable views, or an accordion. The main differences from other, built in options:
- Flexibility: Any number of views could be presented at the same time (including none).
- Horizontal space limitation: In the case of a long list of topics, their names won't show nicely in a Tabstrip solution, as they take too much horizontal space, and we suffer bad usability. The vertical list solves this.
Here is an example application. In this case handling orders of windsurfing items to shops.
Modeling:
1. For each topic add a pair of Panel elements: One for the title (top row), the other to hold the content (second row).
2. Add a Data Share (share1) to control the visibility of topics.
I used several other Data Share elements here to show static data in the application. Use your own sources for the data instead.
3. In the share1 Data Share, define a Boolean field for each topic:
4. Set the Content Scale for the Window:
5. Set the scaling for the title Panel for each topic. This is a key element in this solution: It allows us to set the height of the panel to show a toolbar only.
Don't have a "Scale Mode" property?
6. Set the scaling for content Panel.
7. Set visibility to depend on the relevant field from the Data Share. We see later where the value changes.
Don't have a "Scale Mode" property?
8. Repeat steps 5-7 for each topic.
9. Go to the Layout Board.
10. For each topic select the "title Panel"
11. In the configuration panel, choose to have a Toolbar.
12. Set the panel to the minimum height to contain only the toolbar.
13. Add a Button to the toolbar. Set its text to the name of the topic:
14. Define the Action on the Button, to toggle the value of the relevant Boolean field in the Data Share. We defined earlier the Panel's visibility to depend on the field value.
15. From the configuration panel, choose to define an Image for the Button, as follows. We get the correct image according to the value in share1@details field.
16. Repeat the steps in the Layout Board for the rest of the topics. Note that each one is depending on its own Boolean field for visibility.
This is it
Some remarks:
- Each topic may contain whatever combination of UI elements we should like.
- It is good practice to hold the content of each topic in a single panel. this way we only need to handle the visibility for one element per topic.
- Control height of panels using Scale Mode: In this solution we needed to prevent Panels to "auto fit to height", so we could have a Panel as high as its toolbar.
- The "Scale Mode" property is a new one. Ignore its instructions if it does not appear in your version.
Previous VC5 documents:
VC5 - a new Button Image property
VC5 - new elements and properties
VC5 paging records example
VC5 - Showing Hierarchy in a Single List
- SAP Managed Tags:
