Create a button that opens a modal

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.

始める前に

Role required: ui_builder_admin

手順

1. Open the UI Builder page for your demo experience.

   図 : 1. UI Builder visual editor

   

2. Click the + Add content button on the stage to open the toolbox.
3. Select a Single column layout.
4. Next, click the + icon in the column to open the toolbox.
5. Select the Button component to add it to the stage.

   図 : 2. Add a button

   

   注:

   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.
6. Select Add.
7. In the Page configuration pane, select Configure the component manually.
8. In the Page content pane, select Button 1 and, in the Configuration pane, change the button label to Open modal.
9. Select Save.
10. In the Page content pane, click the plus icon next to Modals and select an Alert modal.

    図 : 3. Add an Alert modal

    

11. Select Save.
12. In the Page contents pane, select Button 1 and, in the Configuration pane, select the Events tab.
13. Select + Add event handler and, under Inherited event handlers, select Open or close modal dialog.

    図 : 4. Show/hide modal configuration

    

14. Activate the Open modal dialog and, select Alert 1 in the Modal field, and select Add.
15. Select Save.
16. Select Preview.
17. When the preview opens, select Open modal.
    The modal you defined opens.

    図 : 5. Open modal with button

    

18. Select Got it in the modal, and then select the browser back button to return to the experience main screen.

次のタスク

Select the Next topic link to learn how to create a page using a template.