Summary

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:

Title (mandatory)
Enter the title of the page that you wish to create.

Subtitle (optional)
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, the page you are creating will be linked to a display template. The display template will determine the structure of the page, and can be saved and re-used when creating additional pages.

When creating your first page, the display template will be created automatically and associated with the page. You can edit or create a new display template by following the instructions in section Editing the page display template below.

Icon (optional)
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

Overview

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.

1. In the left pane, click on Advanced, now drag and drop the Page header component to the central pane.
2. 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.
   
   
3. 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

1. In the left pane, drag and drop an Image component into the central pane.
2. Now, in the right pane, in the Image field, click on Upload, and select the image you wish to upload. Recommended size is 1000 x 150px (20:3 ratio) - PNG or JPG for events on all platforms.
3. 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.
4. Click on OK. The image has now been added.
   
5. 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.

1. In the left pane, drag and drop a Section header component into the central pane.
2. Now, in the right pane, enter the title, and if necessary enter a subtitle.
3. Click on Save at the bottom of the screen. The section header has now been added to the page:

Adding text

Add text components to your page, where you can enter or paste any text you wish to add to the page.

1. In the left pane, drag and drop a Text component into the central pane.
2. Now, in the right pane, enter a title for the text component, and then enter the text you wish to display:
   
3. 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.

Adding links

You can add direct links to in app content by using the Link list component.

1. In the left pane, drag and drop a Link list component into the central pane.
2. 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.
3. Click on Save.

Note: In the Source field you can choose between three options that determine how the listed links will look.

You can also add links using text components, here you'll notice that we have also added a link to a Welcome letter, using a text component.

Adding separators

You can add separators to your page between components, to structure the layout and content and improve readability:

1. In the left pane, drag and drop a Separator component into the central pane.
2. Position the separator to where you'd like it to be.
3. Configure the separator width, and whether you want it to appear as a solid line or be invisible.

Adding embedded content

The Embed component can be used to add embedded content to any type of page template in your event (content pages, session pages, sponsor pages, speaker pages, etc.).

Some examples of embedded content could be YouTube videos, Google Map locations, Snapbar Photo Mosaic galleries, donation forms, etc.

1. Go to the page display template you want to add the embedded content to.
2. In the left pane, drag and drop an Embed component into the central pane.
3. Click on the added component, and fill-in the fields on the right side of the pane by adding a title and the embed code from the source item:
   
4. Above we have added a YouTube video and a Google Maps location.
   Below is how this will look in the page for the attendees:
   

Note: When attendees open a content page that has an embed component via the mobile app, they will see a button on the page instead of the actual embedded content. Tapping the button will then open the embedded content in the web browser of their device.

3. How do pages look in the app?

Below is an example of a page that compiles a list of the resources available to participants in the app (recordings, other pages, documents, etc.):

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. In the above example, you can see that the Resources page is available in the app menu.

To do so, the page will need to be associated to a app menu item.

To find out more about this, please refer to the Building the app menu article.

 

NEXT STEP
For the next steps in this Getting started series, please continue to the Adding a form to the workspace article.