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.

Containers
Slide with its containers

The following keys let you customise the behavior of the slide

Summary

Name Type Required
ContainersBorderColor Color
HidePreviousButton Boolean
HideNextButton Boolean
Containers Array(Container)

Detail

ContainersBorderColor


HidePreviousButton


HideNextButton


Containers


Example

We specify here a slide with a custom default ContainersBorderColor.
<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.



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 -

Detail

IsLarge


InputComponentsDistribution


InputComponentPercentWidth


BorderColor


A Container holds Components which 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 InputComponents

<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

First example components
Container with 3 components: Text, Input and Button



Second example components
Container with one web component