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.
Last updated
Canvas view page allows users to view data visually by useful charts, to generate dashboards and reports which meets your exact requirements.
Last updated
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.
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.
Click on +button on the left sidebar, click the + button, then choose "Canvas"
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.
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.
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
Rename the title and description to explain the purpose of the cart
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.
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 ChartsThe 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
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.
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.
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.
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.
