Skip to main content

Edit the canvas view

Manage sections and configure their properties​

After you create or open a canvas view, the Item Canvas Builder will appear. Use it to specify which sections are displayed on the canvas, adjust their size and layout, and configure their properties.

Each section displays a set of data or a list of related items. Most are interactive and let you edit the data they display.

Two canvas sections showing General information and Comments

Canvas views have a grid layout that can adapt to different screen sizes. Add any number of sections to the layout and drag them into the desired order. Main sections go in the left column, side sections go in the right column.

You can create multiple canvas views for the same design/interface, tailoring the number, size and position of sections for different audiences, device types and more.

info

If you've opened a shared canvas view, you must be in its Editors list to save any changes to it!

Using the Item Canvas Builder​

An overview of the Item Canvas Builder with key areas numbered

1 Main section column​

Main sections are wider. They span two-thirds of the canvas width and display first on mobile devices.

To add a main section, select Add in the left column and choose a section type from the list. Drag sections to reorder them or move them between columns.

2 Side section column​

Side sections are narrower. They span one-third of the canvas width and are usually displayed alongside the main sections. However, on mobile devices where there isn't enough space, they appear beneath the last main section.

To add a side section, select Add in the right column and choose a section type from the list. Drag sections to reorder them or move them between columns.

3 Configure section​

Select a section to display its properties on the right. All sections have the following properties:

  • Title - customise the primary label of the section header.

  • Description - customise the secondary label of the section header.

  • Icon - customise the icon of the section header.

Use these to provide a clear explanation of the data or items displayed by the section. This is particularly important for AQS list sections with custom queries!

For other properties, see Canvas sections.

An example section header

4 Preview​

To try out the canvas view, select Preview in the app bar. After selecting an existing item to test with, you can see how the canvas looks at different screen sizes and interact with its sections.

To learn more, see Preview the canvas view

5 Create​

To create a canvas view, select Create in the app bar. Choose whether to create a blank canvas view or copy an existing template. You'll be prompted to save any changes to the current canvas view before continuing.

To learn more, see Create or open a canvas view.

The Create View menu

6 Edit properties​

To edit the properties of the canvas view, open the Canvas Menu in the app bar and choose Edit . For other actions like sharing or deleting, see Canvas actions.

Details

Edit any of the following properties and select Save to finish:

  • Name * - enter a distinct name for the canvas view.

  • Design or interface * - choose the design/interface that the canvas view will apply to.

  • Icon - use the icon picker to change the canvas view's icon. By default, the icon of the chosen design/interface is used.

  • Colour - use the colour picker to change the canvas view's colour. By default, the colour of the chosen design/interface is used.

  • Screen tags - select at least one screen tag. These represent scenarios that the canvas view can be used in. You can create different canvas views for different use cases.

    For example, you could have one canvas view that targets the Boards app (WEB/BOARDS/*), one that targets Alloy Mobile (MOBILE/ALLOYMOB/*) and one that targets Asset Classic (Application on web platform).

    Custom tags

    Select Add custom tag to define your own. Use the format platform/application/screen as follows:

    • platform - target WEB or MOBILE (Android/iOS).

    • application - target an individual app, e.g. BOARDS, DATA-EXPLORER, ALLOYWEB (Asset Classic).

    • screen - target a specific view or process within an app, e.g. CreateJobDetails (the Create Job process in Asset Classic).


    Use the * wildcard to include everything, e.g. */*/* (all platforms, all apps, all screens).

    Alternatively, just select All platforms, applications and screens!

The Edit View window

7 Save button​

When you're finished, select Save in the bottom-left corner to save your changes. To leave without saving, select Designer in the top-left corner to return to the start screen.