13 - Adding a page to the workspace

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

Display templates are used on all types of pages in the workspace.

A content page such as those created in the Pages module, but also a user profile page, a sponsor page, a speaker page etc. will always use a display template to determine how the page will be displayed in the app, and to add content to the page. These display templates all work in the same way. For example, the user display template can also be edited.

Let's consider below that that we are adding content to the page previously created in the Pages module (in the above previous section).

In the list of pages, click on Edit to begin adding content to this page, via its display template:

The page display template appears as follows, in the Edit content tab:

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 video

You may wish to add a video to your page, that you can place wherever you like:

1. In the left pane, drag and drop a Video component into the central pane.
   
   
2. Now, in the right pane, in the Video field, click on Find an item. Any video uploaded to the Video library will appear in this list. You can either select a video on the list, or upload a new one from your computer (MP4 format, and up to 4 GB) by clicking on CREATE, and using the Upload window in the center of the screen.
   
   
3. Finish adding your video, and click on Save. The video has now been added.

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. In the right pane, enter a title for the text component, and then enter the text you wish to display in the Body section:
   Here you can use the text formatting tools to adjust how you want the text to look: font, bold, italic, underlined, text alignment, bullet lists, numbered lists, indentations, etc. You can also insert images, links, or quotations.
   
   
3. Remember to hit Save after adding your text.

Another option is to use dynamic content to insert data that is pulled from the viewer's attendee profile ("participant" data) or the event itself ("item" data) into the text component, read the section below to find out more.

Using metadata in a text component / Dynamic content

When adding a text component to a page display template, you can use metadata to display dynamic content with personalized information on the page.

You can for example insert data that is pulled from the viewer's attendee profile ("participant" data) or the event itself ("item" data) into the page, or even use conditional rules.

To insert participant data into the text body, use the following syntax:

{{activatedPerson.field_name}}

Where you would replace " field_name" with the name of the metadata. Some of default "user" metadata that you can use are:

fname: First name
lname: Last name
company: Company
country: Country

To insert item data that is pulled from the workspace (event) itself, simply type the name of the appropriate metadata field surrounded by {{ and }}. For example:

Welcome to {{name}}!
Please proceed to {{location}}.

You can also display some data conditionally. For example:
If a participant has their arrival flight number attached to their profile you might want to pull that information into the page.

To do this, use the following {{#if}}...{{/if}} format along with the appropriate user metadata. For example, below the arrival flight number will be pulled into the page it it has been added to the user's profile:

{{#if activatedPerson.arrival_flight_no}}
Your arrival flight: {{activatedPerson.arrival_flight_no}}
{{/if}}

Alternatively, if the flight number has not been added, you can display an alternative message in the page to indicate that the value is missing, by using the following rule {{#if}}...{{else}}...{{/if}}. For example:

{{#if activatedPerson.arrival_flight_no}}
Your flight number is: {{activatedPerson.arrival_flight_no}}
{{else}}
Your flight details will be available at a later date. Check back soon!
{{/if}}

Finally, if you want to display text only when a metadata field is empty, use the rule {{#unless}}...{{/unless}} For example:

{{#unless activatedPerson.phone}}
You do not have a phone number listed.
{{/unless}}

Note: Comparison checks only work if a field has a value or not. You cannot use them check if a field contains a certain value.

Language field metadata example for targeting
Let's imagine you want to add a "Language" field to the user's profile, to help target content to your audience based on their language:

1. First you'll need to create the metadata in the workspace, via the metadata manager, in the User category:
   
   More information is available on using the Metadata manager.
   
   
2. Then, you will need to add the field to the user profile display template:
   
   More information is available on editing the user profile display template.
   
   
3. Next you will need to add what is the preferred language for the users via their user profiles in the workspace (or export the XLS -> update XLS -> upload XLS).
   More information is available on adding app users or information to user profiles.
   
   
4. Finally, you can apply targeting based on the language indicated in each user profile, using the Language field/metadata.
   More information is available on targeting.

You can also add a field to the user page that can contain multiple options. For example, you may want to add multiple interests for a participant to their profile, and then use those interests to target your audience.

To do so, in step one above you would use the metadata (or field kind) called "list" in the metadata manager.

Once this field type has been added to the user page, you can add the interests for each participant profile via Backstage and apply targeting:

This information in the user profile will look like this:

Note: You can replace the {{{interests}}} metadata by {{#each interests}}{{{this}}}{{#unless @last}}, {{/unless}}{{/each}} in order to ensure that spaces are correctly added after the commas for all the "Interests" values.

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 (or an iframe) 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.