Interface composition
Slides
A Slide is similar to a slide in presentation software like PowerPoint or Keynote.
Users will be able to navigate between slides with Previous and Next buttons.
You specify all the slides you want to show to the user in the Slides array
in the Plist
. One Slide only can be displayed at a time to the user on the window. It holds Containers stacked horizontally.
Those Containers are specified in the Containers
array in the Slide
key dictionary.
You can put as many of them as you want, but for display purpose, it is better to have between 1 and 3 Containers in one Slide.
A Slide will take the overall space available in the window.

The following keys let you customise the behavior of the slide
Summary
Name | Type | Required |
---|---|---|
ContainersBorderColor | Color | |
HidePreviousButton | Boolean | |
HideNextButton | Boolean | |
Containers | Array(Container) | Required |
Detail
ContainersBorderColor
- Type: Color
- Explanation: Default color used for the border of all the containers in the slide.
HidePreviousButton
- Type: Boolean
-
Explanation: If
true
, the navigation previous button will be hidden when this slide is shown.
HideNextButton
- Type: Boolean
-
Explanation: If
true
, the navigation next button will be hidden when this slide is shown.
Containers Required
- Type: Array(Container)
- Explanation: Specify here the containers of the slide. The order of the containers in the array will determine their horizontal order when displayed.
Examples
We specify here a slide with a custom defaultContainersBorderColor
.
<dict>
<key>ContainersBorderColor</key>
<dict>
<key>DarkMode</key>
<string>#819ABE</string>
<key>LightMode</key>
<string>#ED682580</string>
</dict>
<key>Containers</key>
<array>
<!-- The containers go here -->
</array>
</dict>
Valid state
A slide can be valid or invalid depending on its containers' components.
For example when filling a form and using an InputComponent
or waiting for all applications to be installed with AppMonitoringComponent
.
If a slide is invalid, the user will not be able to navigate to the next slide, or to quit the app.
When they will press the next or quit button,
informative text will be displayed. You can customize this behavior in the components which offer the validation feature, like the InputComponent
s
Containers
A Container is stacked in a Slide horizontally.
The following keys let you customise the appearance and behavior of the container
Summary
Name | Type | Possible values | Required |
---|---|---|---|
IsLarge | Boolean | - | |
InputComponentsDistribution | String | Fit , Center |
|
InputComponentPercentWidth | Number | 0...1 | |
BorderColor | Color | - | |
Components | Array(Component) | Required |
Detail
IsLarge
- Type: Number
-
Explanation: When set to
true
, this container will take two third of the available width in the window, while the other container will be restricted to the remaining third. Only applies if two containers are specified in the slide, and if one only has aIsLarge
key set totrue
InputComponentsDistribution
- Type: Boolean
- Possible values:
Fit
,Center
-
Explanation: When displaying several input components,
you can specify here the distribution those components should adopt. If one component already has a
Distribution
key set, the general distribution specified in the container has no effect.
InputComponentPercentWidth
- Type: Number
- Possible values: 0...1
- Explanation: This value allows you to give more width to an input component, by specifying the percentage width it should take in its container. If specified here, all inputs component should take by default if they do not specify one locally. Default is 0.4.
BorderColor
- Type: Color
-
Explanation: The color of the border drawn around the containers. Override the value set in the
ContainersBorderColor
of the slide.
Components Required
- Type: Array(Component)
- Explanation: Specify here the components held by the container. The order of the components in the array will determine their vertical order when displayed.
Components in a container are stacked vertically. As for the Containers in a slide, you can put as many Components as you want in a Container, there is no specific limit.
Examples
Container with a IsLarge
key set to true
<dict>
<key>IsLarge</key>
<true/>
<key>Components</key>
<array>
<!-- The components go here -->
</array>
</dict>
Container with centered InputComponent
s
<dict>
<key>InputComponentsDistribution</key>
<string>Center</string>
<key>Components</key>
<array>
<!-- The components go here -->
</array>
</dict>
Here are two figures of components vertically stacked in a container

