Embed a report as a button

Embed a report as a button in page

Refer to this page to learn how to embed a report in a page.

To embed a report as a button in 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 Report 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 Zoho Creator account.
  7. Select a report from the Report dropdown. All the reports in the selected application will be listed here.

  8. Click and drag the button under Embed as Button option to embed the report 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 report embedded as a button

  1. Double click the report (button) you want to configure. You can also single click to select the report 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 report.
    • Report: Enables you to choose a report from any of your Creator applications.
    • Query parameters: Specify a query parameter to an Open Report action to load the associated report with pre-filled values, for the fields specified in the parameter string.
    • Open in: Select the required target window in which the redirected entity (report) must be opened.

  7. The Style tab enables you to enhance the visual aspects of the embedded report 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 a font-size for the button text or choose one from the dropdown.
    • 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 report (button) and click the Title option in the page builder to set a title for your embedded report. A popup window will appear.

  12. Specify the title and click Done. The title will be displayed above the embedded report. 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 icon to duplicate the panel containing the embedded report 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.

Share this post : FacebookTwitter

Still can't find what you're looking for?

Write to us: support@zohocreator.com