Create a button that opens a modal
-
- UpdatedFeb 1, 2024
- 3 minutes to read
- Washington DC
- Building applications
After you've created your demo experience and added a blank page, you can edit the page variant as needed. For the sake of this demo, you can create a button and a modal, and configure the button to open the modal.
Before you begin
Role required: ui_builder_admin
Procedure
-
Open the UI Builder page for your demo experience.
Figure 1. UI Builder visual editor 
-
Click the + icon in the stage to open the toolbox.
-
Select the Button component to add it to the stage.
Figure 2. Add a button 
Note: When you have selected the component, the Page configuration pane includes some presets you can use to automatically configure components on compatible pages. For the sake of this exercise, however, you will be configuring the component manually. For more information on presets, see Customize UI Builder pages using components. -
In the Page content pane, click the plus icon next to Modals and select an Alert modal.
Figure 3. Add an Alert modal 
-
Select + Add event handler and, under Inherited event handlers, select Open or close modal dialog.
Figure 4. Show/hide modal configuration 
-
When the preview opens, select Open modal.
The modal you defined opens.
Figure 5. Open modal with button 
What to do next
Select the Next topic link to learn how to create a page using a template.
Related Content
- Create a demo experience to explore UI Builder
An experience in UI Builder is a collection of web pages for users to interact with an application. The experience includes routes, page variants, and the audience and conditions required for each variant, as well as experience settings.
- Create a blank page
After creating a demo experience, you can create a blank page that you can then build on to define what the experience provides to your users.
- Create a record page using a template
After you've created your demo experience, you can create a record page from a template. A record page shows data from a table.
- Define an audience for your variant
An audience represents a group of users in your organization. You can define who can access this page variant by adding one or more predefined audiences.
- Define conditions for your variant
You can define conditions to determine when a page variant is shown. The conditions are based on setting an order, and adding a query string that sets the criteria that must be met for the page variant to display.
- Customize forms within a form component
Customize your form components by accessing Form Builder in UI Builder.