In Backstage, pages can be created and added to workspaces to present various types of information to app users. This is done through the Pages module.
A page will have its own layout, using a display template, that can be configured based on the page's purpose, with headers, sections, text, images, as well as links to any content that is internal to the app (map locations, agenda sessions, forms, feeds, etc.) or external (websites, externally hosted documents, etc.).
In this section we will take you through the basic steps of creating a page in your workspace, adding the necessary information by editing the page display template, and making the page accessible to users in the app by linking it to the app menu.
You can access the Pages module through the Content category in the Backstage main menu.
1. Creating a new page
To create a page, go to the Content category in the main menu, and click on Pages.
Here you can enter the below initial information for the page you are creating:
Enter the title of the page that you wish to create.
Enter the subtitle of the page.
Manage metadata fields (advanced)
Here you can access the Metadata manager. This is an advanced tool that allows you to add additional fields to the page tab in Backstage. For more information please refer to the Metadata manager article.
Display template (mandatory)
Here you will link the page to a display template. The display template will determine the structure and content of the page that you are creating, and can be saved and re-used when creating future pages.
If you are creating your first page, here you will only choose a name for the display template that you will link to the page. We will edit/create the actual template in section Editing the page display template below.
Here you can add an icon to the page you are creating. You can select an existing icon in Backstage or upload a new one.
Click on Save to save the page.
Now click on the Pages tab, and the created page will now appear:
2. Editing the page display template
In the Pages tab you can see the page that you created. Click on Edit to begin adding content to the page, via the display template:
The Edit content tab is divided into three parts:
- The left pane lists out all the components that can be used in your page, and what they are used for.
- The central pane is the body of your page, where added content will be displayed.
- The right pane is the configuration panel, where you will configure the content and settings of the components added to the page.
Previewing the page
At the bottom of the display template screen, you can click on Preview in web app to see how the elements you add to your page will look in the app. Simply select a workspace user from the list to see how this page would look for this user.
Adding a page header
The first thing you may wish to add to a page is the page header, or title.
- In the left pane, click on Advanced, now drag and drop the Page header component to the central pane.
- Here you can fill in the right pane, with the page title, subtitle, and description.
Note: Do not add anything to the photo field as this is currently not supported.
- Click on Save at the bottom of the screen.
Adding an image
You may wish to add an image to either accompany the page title, or to placed wherever you like on the page
- In the left pane, drag and drop an Image component into the central pane.
- Now, in the right pane, in the Image field, click on Upload, and select the image you wish to upload.
- You also select the Fitting style that you wish to apply to the image, to determine how the image will be displayed. Using the Element to open on tap, you can also configure the image to serve as a link to other app content when tapped by the app user, and specify the target of the link.
- Click on OK. The image has now been added.
- Click on Save at the bottom of the screen.
Note: Any element can be dragged up or down on the page using the ☰ icon.
Here we will move the image to the top of the page (see screenshot below).
Adding a section header
You can easily structure your page using section headers.
- In the left pane, drag and drop a Section header component into the central pane.
- Now, in the right pane, enter the title, and if necessary enter a subtitle.
- Click on Save at the bottom of the screen. The section header has now been added to the page:
Add text components to your page, where you can enter or paste any text you wish to add to the page.
- In the left pane, drag and drop a Text component into the central pane.
- Now, in the right pane, enter a title for the text component, and then enter the text you wish to display:
- Click on Save
Note: Use the text formatting tools to adjust how you want the text to look. You can also add internal and external links to your text, images, or quotations.
You can add direct links to in app content by using the Link list component.
- In the left pane, drag and drop a Link list component into the central pane.
- In the right pane, you can select the in-app items you would like to link this page to. This could be a user profile, a feed, a map, a form, or another page.
Here we have added a user profile and the workspace home feed.
- Click on Save.
Note: In the Source field you can choose between three options that determine how the listed links will look.
You can add separators to your page between components, to structure the layout and content and improve readability:
- In the left pane, drag and drop a Separator component into the central pane.
- Position the separator to where you'd like it to be.
- Configure the separator width, and whether you want it to appear as a solid line or be invisible.
3. How does this page look in the app?
Below you can see how the above created page looks in the device app.
On the left is the first page displayed, and on the right is the content visible when scrolling down:
4. How can app users access my page?
The most common way of providing app users easy access to a page, is to add a button to the app menu that will take the app users directly to the page.
To do so, the page will need to be associated to a newly created app menu item.
To find out more about this, please refer to the Building the app menu article.
For the next steps in this Getting started series, please continue to the Adding a form to the workspace article.