'Previous card' button Id
Description
Specify the Id of the button in the Panel Navigator Header or Footer that should be used for the 'Previous' button.
Using 'Previous card' button Id
This guide describes how to construct the component illustrated above.
In the UX Builder on the UX Controls page check the 'Mobile' checkbox
Open the Panels menu. Click on the [Panel Layout] option to add a Panel Layout container to the component.
In the Panels menu click on the [Panel Navigator] option and 'Insert After' to add a Panel Navigator inside the Panel Layout container.
Highlight the Panel Navigator. In the Panels menu click on [Panel Card] and 'Insert After' to add a Panel Card to the Panel Navigator.
Click on [Panel Card] again to add a second Panel Card to the Panel Navigator, underneath the first one.
Click on [Panel Card] a third time to add a third card to the Panel Navigator.
Highlight PANELCARD_1. Open the 'Other Controls' menu and add a [Static Text] control inside the first Panel Card.
Highlight the Static text control. Set the Static text property to read 'Panel 1'. This property is located in the properties list under 'Static Text Properties'.
Highlight PANELCARD_2. Open the 'Other Controls' menu and click on the [Static Text] option to add a control to the second Panel Card. Set the Static text property to read 'Panel 2'.
Highlight PANELCARD_3 and then add a [Static Text] control here as well. Set the Static text property to be 'Panel 3'.
Highlight the Panel Navigator control.
Open the Containers menu and select the [Container] option.
From the Container Type list select 'Panel Header' and click 'Insert After'.
Highlight the Panel Header control and open the 'Other Controls' menu. Click on the [Button] option to add a button control to the Panel Header.
Highlight the button control. In the properties list under 'Button Properties' set the Button text property to read 'Previous'
Set the button control's 'Id' property to "PREVIOUS" as well.
Open the 'Other Controls' menu and add a second [Button] control to the Panel Header container.
Set this second button's 'Button text' property to read 'Next'. Set the Id to be 'NEXT'.
Highlight the Panel Navigator.
In the properties list's 'Navigation Buttons' section check the "Has 'Previous card' button" property
From the dropdown of defined buttons select the 'PREVIOUS' button that you defined.
Check the "Has 'Next card' button" property.
Set the 'Next button Id' property to be the 'NEXT' button.
The component should now look like this. Remove the toggle that appears after the 'Previous' button in the Panel Header.
Run the component in Live Preview. When you click on the 'Next' button you should see Panel 2 appear. On Panel 2 you should see also the 'Previous' button appear, now that there is a previous panel to move back to.
Next
Next- Next