Canvas page

to hide components from the user's view temporarilyCanvas pages are ones in the app that you can customize according to your vision for your app. They empower you to design and create unique pages tailored to your app's needs. Whether you want to showcase additional information or add specialized functionality, canvas pages offer endless possibilities.

This guide will walk you through the steps to effectively work with canvas pages in Starion.

Adding a canvas page

To add a new canvas page to your app, follow these steps:

  • Click the "+" button in the App Editor.

  • Choose "Canvas page."

  • Configure the page's settings: the page's name and icon on the menu bar, hiding it or not on the main menu bar, and the page's badge number configuration.

  • Click the "Save" button and start designing it.

Designing the canvas page

Adding page cover

"Page Cover" is placed on the top of your page and allows you to create a visually captivating introduction to your custom page with images, videos, and map views on Google.

You can add the media files in 2 ways:

  • add their URLs separated by commas

  • upload them directly from your local device.

"Page cover" helps you make a good first impression and set the tone for the following content and experience.

Adding components

A canvas page is composed of components that represent information. To add a component to your detail page, drag and drop it from the Library into the component box at the top.

The components fall into two categories: general components and control components. General components are read-only and display information such as charts, labels, and barcodes. Meanwhile, control components enable user interaction, allowing actions like button clicks or slider adjustments.

Explore all the components by scrolling through the library, or you can get even the preview and detailed guide to their settings here:

pageComponent

Organizing components

Drag the components up & down within the list of added ones to arrange them according to your preferences.

Removing components

To remove a component, right-click on it within the component box and select "Delete."

However, you can also temporarily hide components from the user's view. Just click the eye icon next to the component.

Last updated