Home

Design Canvas View Page

Canvas view page allows users to view data visually by useful charts, to generate dashboards and reports which meets your exact requirements.

What is the canvas view?

Canvas view allows users to view their data visually.

Canvas view is a blank canvas with click-to-add charts, enabling the app creator to build the required dashboards and reports.

Benefits of using Canvas page

The Canvas page brings several advantages, including:

  • View data intuitively: AppAlloy charts are informative, clean, and colorful, to ensure everyone would understand reports thoroughly!

  • Actionable Insights at a Glance: Build dashboards to quickly track everything that matters about your app's performance.

  • Share clear reports and charts with the team, to make sure that everyone is making decisions based on facts.

Add new canvas

Click on +button on the left sidebar, click the + button, then choose "Canvas"

Set page title

The page title will show at the top of the screen. We recommend that it should be the name of the report. To set the page title:

  • Click on the canvas page on the left sidebar

  • Go to the right sidebar, in the Page section > Title, and enter the page title.

Configure page tab

In the Tab section on the right sidebar, there are settings for the page appearance on the page menu of the app, including:

  • Title: Name of page when it appears in the page menu

  • Badge: The badge number of the tab that is usually used to represent the number of updates.

  • Hidden: Settings to show the page tab on the page menu or not.

Configure chart by AI

Choose a chart you need, with multiple pre-built components including bar charts, line graphs, pie charts, summarized numbers, and tables.

On the Canvas page, click the +button, then choose a chart from the list

Add chart title and description

Rename the title and description to explain the purpose of the cart

Draw charts with AI supports

AppAlloy AI assistant is to help you present your chart with simple prompts. You can now use natural language to describe how you want your charts to be shown, and with what data to be used.

  • on the right sidebar, in Data, click the box Describe by Natural language

  • write a prompt describing which data to represent and how you want it to represent

AppAlloy's intelligent AI assistant analyzes your data sheets and translates your prompts into stunning visual representations.

The components on your canvas will automatically populate with your chosen data, creating a dynamic and informative dashboard.

View from AppAlloy pie chart. You should keep writing until you get the chart that's needed.

Design your chart

For each chart, there are settings for style and label values in order to ensure the readability of data and insight. You can explore by per type of chart in this section:

Canvas Charts

Manage charts

Arrange charts

The order of charts on a canvas page is crucial for an effective and intuitive report view. It should guide the user’s focus from high-level insights to detailed data, making the report easier to understand and more impactful.

To arrange the charts:

  • On the left sidebar, hold your cursor on a chart

  • Drag it up or down to change its position

Hide a chart

To hide a chart:

  • On the left sidebar, hover your cursor on the chart and click the eye icon

Or

  • On the left sidebar, click on the chart

  • Go to the right sidebar, in Visibility > Hide, click the field, and choose Yes.

Add buttons

Add new button

A button is added to have an interactive element within the canvas page.

To add a new button:

  • On the left sidebar, click the + button.

  • Choose the button component in the list of charts.

Configure action

To configure the action and how it works for the button, on the left sidebar, click on the button component and go to the right sidebar.

  • In Title, enter a name and choose an icon for the action button

  • In On click, click on Configure… to start modifying how the action is executed

When you click on the Configure... field, the New Action section is opened. Here you can set up on how the action will execute:

  • Click +Then ... and choose an action type from the list.

  • Configure target, based on the action type.

Enable confirmation on action

The confirmation message is a secure way to ensure that no action is executed accidentally. To enable the confirmation message on the action:

  • Switch the toggle button of Require Confirmation.

  • Edit the message for the confirmation if you want or use the default one.

Last updated