As you design and build the page(s) for your application, you can apply components such as buttons.
| Open the page builder's components overview and scroll down through the list of components in the components menu, or use the search field to navigate to the button section.
As with other page components, button components are dragged and dropped onto the page's canvas. You need to have a layout component in place when you place a button on the canvas (see the GIF below).
|
Button component
Once you have added a layout component to a page, you can work with the different options, styles, and interactions to build the layout for the button and the interaction you want to apply. |
|
In the following example, the button component is dragged and dropped on the canvas. Once dropped, click on the button to open the menu tabs (options, styles, interactions) for building the buttons to your requirements. |
|
Open page button component
Using the Open page button component, you can trigger that a specific page is opened.
The Configure open page button (A) pop-up window is displayed as shown below. |
|
You can choose from an internal page (B). In this case, a menu of existing pages is displayed. |
|
You can also specify an external page (C). You can copy and paste the page details in the field provided. |
If you are not yet ready to assign a page, you can select the |
Logout button component
You can use the preconfigured Logout button to log out users with a redirect to a specific page, for example, your application's homepage. When you drag and drop the button to the canvas, the configure logout button (A) dialog is displayed. |
|
Press on the |
|
If you now open the Interactions tab for the Logout button, you can view the interaction that has been configured. You can also edit and change the details of the interaction such as specifying a different page to which a user is redirected on logout. |
To view the interactions that have been configured, select the button (A) and then select the Interactions tab (B) from the button menu. As shown, when the button is clicked (C), the logout function (D) is triggered and the user once logged out, is redirected to the application's homepage (E). |
|
Action button
You can build specific action buttons for use across your application. The action button component is part of the actions module.
|
|
As this type of button is added to the canvas, it automatically creates an action that serves as a trigger. The action behind this button is editable, by pressing the pencil icon, you will be redirected to the actions segment and you can choose the kind of step you need.
For example, if you choose the Delete Record function to create a step, it will delete the record that you select in the 'Pass value to action'. |
|