Working with components

The drag-and-drop elements of App Studio are arranged in two panels:

1. Layout panel: This panel groups all the elements that help you design the layout of your app. It is recommended to use these elements to contain all the functional components. Drag a Layout component to the Canvas viewport, then drag components inside it. This practice will allow you to align all your app elements effectively. The available Layout components are:

   • Container: The basic layout building block used to align content in a grid.
   • Panel, Panel with tabs and Panel with stepper: Advanced layout components for more complex configurations and functionality.

2. Components panel: This panel groups all the elements with functionality. The Magnifying-glass icon button allows you to search components by name. Read each component's documentation for configuration details and tips.

Note: The Layers panel allows you to see and rearrange the component's hierarchy.

Component toolbar

When you select a component in the Canvas viewport, a component toolbar is available with the following options:

• Drag: Select and move an element while holding it.
• Select parent component: Select the component that contains this component.
• Delete: Delete the selected component.
• Clone: Copy the selected component and its configuration.

Note: The Component toolbar displays an Eye icon when an Interaction property is set to Disabled or Read only and an Eye slash icon for Hidden.

Templating in components

The templating term refers to using Liquid JS template language to render dynamic content in the end-user app.

The Component ID allows you to use the data from that component using Liquid JS. You can enter Liquid JS formulas in the fields or use the Plus (+) button to display the Templating drop-down. See Templating drop-down for more details.

The Component ID is automatically generated every time you add a component following the pattern:

[componentName][counter]

The counter is incremented for each new component added, for example, [textInput4], [dropdown2].

Note: Component ID is not case sensitive.

A component's input is accessible using .value, for example using the Liquid JS formula {{textInput12.value}} or selecting it from the Templating drop-down.

If the Component ID is changed in the Component ID field in the Main properties section, all references are automatically updated in all places where templating is allowed.

The following fields used in the components below do not get automatically updated since they depend on the resource selected in the Options field and not on the Component ID:

• Dropdown component: Display field, Value field.
• Combobox component: Display field, Value field.
• Radio component: Display field, Value field.

It is recommended to enter a meaningful name in the Component ID and you cannot use an already existing name.

Note: The Container, Panel, Panel with tabs, Panel with stepper, Image, Icon, Link, Text and Divider components do not have a Component ID.

Ripple components

New apps use the Ripple design system. The following components are available:

Layout components

Component	Description
Container	The basic layout building block. Arrange content using columns inside it.
Panel	An advanced layout component for grouping content in a collapsible section.
Panel with tabs	An advanced layout component for organising content in tabs.
Panel with stepper	An advanced layout component for organising content in sequential steps.
Stacked list	A layout component to render multiple instances of child components based on a data array. Only available for System apps.
App container	A layout component to embed another app. Only available for System apps.

Components

Component	Description
Button	Triggers an action when selected.
Charts	Displays data as a chart.
Checkbox	Allows users to select one or more options.
Combobox	Allows users to select an option from a searchable list.
Data grid	Displays and allows editing of tabular data.
Divider	A horizontal or vertical line to separate content.
Drawing area	Allows users to draw and attach sketches.
Dropdown	Allows users to select an option from a list.
File uploader	Allows users to upload files.
File viewer	Displays a file inline in the app.
Icon	Displays an icon.
Image	Displays an image.
Link	Displays a selectable hyperlink.
Radio	Allows users to select a single option from a group.
Range	Allows users to select a value within a range.
Root	The root layout element of the app window.
Switch	Allows users to toggle a boolean value.
Text	Displays static or dynamic text.
Text area	Allows users to enter multi-line text.
Text input	Allows users to enter single-line text.

Note: See how to edit an app for more details on working with Ripple components.