Embed a form as a button in a page

• Embed a form as a button 
• Configure properties for the embedded form as button

To embed a form as button in a page

1. Edit your app.
2. Select the required page from the accordion menu on the top-left corner, or from the application preview in the middle. You'll be taken to its Design page.
3. Click on the device icon to navigate to the Design view of the device of your choice.

   

4. Hover in the middle and click Open Page Builder.
5. In the page builder, click the Form option from the page elements menu on the left. A menu will slide in.
6. Select an Application from the dropdown provided. This dropdown will list all the applications available in your ManageEngine Creator account.
7. Select a form from the Form dropdown. All the forms in the selected application will be listed here.

   ​

8. Click and drag the button under Embed as Button option to embed the form as a button into the page builder. You can also double-click the required button type.
9. Once the button is added to the page, you can configure various properties for it.

To configure a form embedded as button

1. Double click the form (button) you want to configure. You can also single click to select the form and then click the Configure option in the toolbar at the top-center of the page builder.

   

2. The Panel Configuration pane will slide in from the right. It has two tabs — Design and Code.
3.  In the Design tab, you can configure the Display, Action, and Style aspects.
4. The Display tab allows you to edit the display data, action and style aspects of the panel element depending on the button type you have chosen.

   

5. The Display tab enables you to edit the label name of the button.

   

6. The Action tab allows you to customize the following aspects:
   • Action Type: Allows you to specify to open a URL, form, report, page or execute a function when users click the embedded button. Here, the action type is to open a form.
   • Form: Enables you to choose a form from any of your Creator applications.
   • Query parameters: Specify a query parameter to an Open Form action to load the associated form with pre-filled values, for the fields specified in the parameter string.
   • Open in: Select the required target window in which the redirected entity (form) must be opened.

     

7. The Style tab enables you to enhance the visual aspects of the embedded form for the end users. From here, you can customize the following,
   • Button type: Select the button type as Rectangular or Rounded.
   • Font family: Choose the font of the button text.
   • Style: Enables you to Bold, Italicize, Underline, and change the case for the button text.
   • Color: Allows you to customize the font and background color.
   • Font size: Specify font-size for the button text or choose one from the dropdown beside it.
   • Margin: Specify the margin attributes around the button.

     

8. The Code tab opens the ZML editor. From here, you can edit the ZML code that is used to create pages in your Creator application.

   

9. Click on the panel (area around button) to open and customize the Action and Style aspects of the button panel.

   

10. Close the Panel Configuration pane after making changes. The changes will be saved automatically. 
11. Select the form (button) and click the Title option in the page builder to set a title for your embedded form. A popup window will appear.

    

12. Specify the title and click Done. The title will be displayed above the embedded form. You can click again on the Title icon if you do not want to display the title.

    

13. Click on the specified title to edit its font, size, and style.

    

14. Click the Duplicate panel icon to duplicate the panel containing the embedded form as a button.

    

15. Click the Delete icon to delete the button.
16. Click Done at the top-right corner of the page builder once you have finished making changes. The changes are automatically saved.