How to add info buttons

Introduction

Would you like to provide explanations about your controls in the control panel? Then add info buttons to your solution by following these steps.

Prerequisites

• You configured the frames and routes for your solution.
• You configured the relevant contents such as the model(s), control panel(s), viewer(s) and datastore.

1. Add an info button to the control

• To add an info button to a control, set the infoButton to “true”.

The configuration should look similar to the example below:

  my-root-frame:
    kind: Frame
    contents:
      my-control-panel:
        kind: ControlPanel
        controls:
          my-slider:
            kind: Slider
            value: 50
            min: 0
            max: 100
            precision: 1
            label: My slider
            infoButton: true

2. Configure a frame for the popup

To open a popup when the info button is clicked, configure a frame for the popup contents.

• Add a frame to hold the contents for each info button.
  

💡 You can define the layout of the popup frame. For more information, see the customise layout guide.

The configuration should look similar to the example below:

  my-info-slider-frame:
    kind: Frame
    contents:
      my-control-panel:
        kind: ControlPanel
        controls:
          my-title:
            kind: Text
            text: Help for "My slider"
            type: h3
          my-text:
            kind: Text
            text: This is some help text.

3. Add a popup outlet

• For each info button, add a PopupOutlet to display a popup dialog box when the info button is clicked. The popup outlet should be in the same frame as the controls with info buttons.

The configuration should look similar to the example below:

  my-root-frame:
    kind: Frame
    contents:
      kind: ControlPanel
        controls:
          my-slider:
            kind: Slider
            infoButton: true
            ...
      my-info-slider-popup:
        kind: PopupOutlet
        frame: my-info-slider-frame

4. Subscribe the popup outlet to the control panel

To open the popup when the info button is clicked:

• Subscribe the PopupOutlet to the ControlPanel.
• Define the source and frame.
• Define which control’s infoButton opens the popup.
• Set the action to “open”.
  

The configuration should look similar to the example below:

  my-root-frame:
    kind: Frame
    contents:
      my-control-panel: 
        ...
      my-info-slider-popup:
        kind: PopupOutlet
        frame: info-slider-frame
        subscribe:
          - kind: ControlPanel
            frame: my-root-frame
            source: my-control-panel
            infoButton: my-slider
            action: open

See the image below as an example.

Configuration

See the control panel configuration docs for more information.