All View Components → sidebar

Select a view component to see details on how it works:

sidebar

A component that allows a sidebar to be displayed on the left side of the screen on tablets, to indicate to the user how far they are progressing with a process.

The sidebar is not shown if the app is used on devices with smaller screens.

The sidebar must be the first component in the View XML.

Example

The text contained inside the <sidebar> tag can be a Format String, meaning that you can make the text dynamic.

Code in View XML:

<!-- Components go here: -->
<sidebar>        
    <item state="normal" icon="icons/id_capture.png">ID Capture</item>
    <item state="active" icon="icons/basic_details.png">Basic Details</item>
    <item state="disabled" icon="icons/proof_residence.png">Proof of Residence</item>
    <item state="disabled" icon="icons/proof_income.png">Proof of Income</item>
    <item state="disabled" icon="icons/trolley.png">Income / Expenditure</item>
    <item state="disabled" icon="icons/approval.png">Approval</item>
    <item state="disabled" icon="icons/rating.png">Rating</item>
    <item state="disabled" icon="icons/ts_and_cs.png">Terms and Conditions</item>
    <item state="disabled" icon="icons/debit_order.png">Debit Order Details</item>
    <item state="disabled" icon="icons/success.png">Success</item>
</sidebar>

Appearance on mobile device:

Configuration — For Each Item:

Option	Required?	Details
`state`	optional	The way the sidebar item is visually rendered, to indicate to the user whether they have already completed the step indicated by the sidebar item in a process. It can be one of the following: `normal` — The sidebar item is shown normally — should be used for steps in a process that the user has already completed. `active` — The sidebar item is highlighted — should be used to indicate that the user is currently at the step in the process indicated by this sidebar item. `disabled` — The sidebar item text and icon is greyed out — should be used for steps in a process that the user has not yet completed. In other words, exactly one field should be `active`. All fields before it should be `normal`, and all fields afterwards should be `disabled`. Defaults to `normal`. The value provided can be a Format String if you need to dynamically toggle a sidebar item's state based on a variable's value.
`icon`	optional	Path of the icon to display on the sidebar item, left of the text. Icons can be uploaded using the Icons & HTML tab of the JourneyApps Editor.
`show-if`	optional	Controls whether the sidebar item is hidden or shown. The argument specified to `show-if` can either be a literal boolean value (`true` or `false`), or it can specify a variable, parameter or attribute that can be a string, number, object, etc. that evaluates to false or evaluates to true (see the section Show/Hide Components Dynamically for full details).
`hide-if`	optional	The opposite of `show-if` (see above).