Creating pages in the studio

Create the desired workplace pages in the BMC Helix Digital Workplace studio. Add page components and configure them to create effective pages for your workplaces.

Sample pages are available to help you design and build your workplace studio pages. These pages serve as a reference or a good starting point to build your pages. Open a page, look at the various settings, tweak them, or experiment with the options to build your custom page with your desired appearance and branding. For more information about the sample pages, see Sample-pages.

The following image is a visual guide to creating a page and making it available to your end users, and shows the current step you are on:

Step 2 in page creation process - Creating a page, adding components, and configuring them

Required license

DWP Advanced icon.png BMC Helix Digital Workplace Advanced

Best practices while creating pages

Use the following list of best practices to create pages that fulfill your content objectives:

With the purpose of the page in mind, order the page components to create a visual hierarchy. Keep in mind the order in which you want your users to view the elements and place them accordingly on the page.
Place the search bar in an expected location, usually at the top of the page, to make the search functionality available and easily visible. Include the search icon.
Add a catalog banner to draw your users' attention to any specific content and place it near the top of your page.
For consistency, style one content block and then duplicate it.
Do not use restricted file types for images.
Configure a component for different screen sizes and devices — Design your components to render correctly in different screen sizes and devices. Your end users might log in to the application from a desktop, mobile, or any other device. A component that renders correctly on a desktop might render incorrectly on a mobile because the screen display area is different. You might need to adjust the alignment of text and images to suit different screen sizes and orientation. After you configure a component, preview it to test how the component is rendered in different device sizes. The title bar of your design canvas lists three sizes for a preview, desktop, tablet, and mobile. Consider duplicating the component and configuring it for a particular a screen size. Specify the screen size for each of your duplicated component instances.

Tip

Create a few pages with settings that align the colors and appearance with the branding of your company or lines of business. After you create these pages, you can use them as a template by duplicating them to create other pages. This shortcut saves you the time required to create a page from scratch and will maintain consistency in the look and feel across all pages.

To create a workplace page and add page components

All components are added in rows that are placed one below the other in the correct order, giving length to your page. All content is inside the components. A row can contain a single component or multiple components.

Complete the following steps or watch this video(6.15) to see the process.

Log in to the BMC Helix Digital Workplace Admin console, and select Configuration > Studio.
Click New Page, enter a name for your page, and then click Create.
Either double-click or drag and drop the components on to the page canvas.
After a component is on the page canvas, you can drag it to another position.

Tip
To specify another language for the content, click to enable Translation mode, and select an available supported language. Note that not all fields are translatable.

Configure a component by clicking the component to open its properties panel:

Component	What to configure	Reference
Asset Group	Desired asset group from the list of available asset groups. The Group options list both, out-of-the-box asset groups and asset groups that you have created. Note that you need catalog administrator permissions to create and manage asset groups. Important: Ensure that the selected asset group is not empty because empty asset groups are not shown to end users.	Managing-asset-groups To configure an asset group
Search Bar	Show or hide categories to enable users to filter catalog items by categories, custom label for the Show categories field, sources for search and the size of the search bar. Also, show or hide the search icon and personalize the text within the label by inserting variables.	To configure a search bar
Events	Type of events (active or past), custom labels for selected event type, default view for active events, and one of the following event types: Appointments—Displays the upcoming appointments. Approvals—Displays the pending approvals. Requests—Displays the active service requests. To-dos—Displays the To-dos assigned to the end user.	To configure an events block
Catalog Section	Desired catalog section from the list of available sections. The catalog sections created in BMC Helix Digital Workplace Catalog are shown in the list of Section options. You can design catalog sections to be displayed as columns, and add up to three columns to be displayed as carousel sections. You can add large, medium, and small catalog sections in a row. Important: Catalog sections added into columns are not displayed as columns on mobile devices.	Setting-up-sections-in-the-Catalog To configure a catalog section
Catalog Banner	Desired banner from the list of available banners. The catalog banners created in BMC Helix Digital Workplace Catalog are shown in the list of Section options. You can also specify the amount of padding above and below the banner.	Creating-promotional-banners To configure a catalog banner
Content Block	Template to base the content block on (optional), base properties, background, border, click action, media, text blocks, and buttons. You can duplicate or add content blocks to create a multi-column layout. You can adjust the width to create varying width columns.	To configure a content block

To preview the page that you have created, select one of the options available in the title bar:
- Full width desktop layout
- Tablet portal layout
- Mobile device layout
Tip
Consider duplicating components on your page and updating the alignment of text and arrangement of images along with text while creating content for tablets and mobile devices.
To save a draft of changes, click Save or if you are ready to publish the changes to your end users, click Save & Publish.

After you create the pages in the studio, you must create navigation menus from the pages, to give your users access to information and services through the pages.

The following video (6:00) shows how to create a page in the BMC Helix Digital Workplace studio:

Watch the YouTube video about creating pages in the studio

To configure an asset group

Through mapping, use an Asset Group component to display asset groups in studio pages.

The following video shows how you can map an asset group to an asset group component on a studio page:

To configure a search bar

You can show or hide the categories list, customize the label for the categories list, select the sources for search, configure the size, and show or hide the search icon.

The following video shows how you can configure the labels for the categories list and show or hide the search icon.

Sources for search

You can restrict the search to selected sources to narrow search results and make them more relevant. The search bar sources include catalog items, articles, requests, approvals, appointments, locations, assets, and users. By default, all sources are selected, but you can restrict the sources by clearing or selecting the associated source check boxes.

The following video shows how you can select only a few sources.

To configure an events block

You can select whether the events block displays active or past events, specify the labels, the default view, and select the type of events to display in the block.

The following video shows an example of how you can configure the labels for active or past events and event types.

To configure a catalog section

You can select the size of the tiles in the catalog section from the following options:

Compact: Designed for list or compact views. A small tile that displays only the icon and section name, as well as any items in a bundle.
Default: Recommended for most use cases. Additionally displays the SLA, rating, and cost details for the catalog section item.
Large: Suggested for featured catalog sections. Additionally displays the catalog item's short description.

You can also configure the number of catalog sections on each row. For each catalog section item, you can specify the color theme (light or dark), whether the item has a drop shadow, and whether the item is displayed in a list or in a carousel.

The following image shows the layout options for a catalog section.

By default, these configuration options are not available. To enable these options, complete the following steps:

Log in to the Admin console.
Under Configuration, select Application Features.
Select the Use enhanced catalog section and tile framework check box.

To configure a content block

You can base your content blocks on templates. The search template type of content block allows browsing of categories. After you configure your content block, you can duplicate it, and then make changes to the duplicated content.

Optionally, perform the following configurations in any order:

To add multiple blocks, duplicate them, copy and paste them, or if there is enough space in the row, drag a content block beside another.
To create a multi-column layout, duplicate content blocks in a row or add blocks from the palette.
To create varying width columns, resize the content blocks in a row.
To link to URLs, application pages, catalog services, catalog bundles, or define an on-click action on the entire content block or on the media images or on buttons.
To create a watermark of a background image, select the custom size option of the display options and size the image. Then, position the image as desired.

The following image shows some properties for a content block:

Some content block properties, such as block height and shadow, text alignment, heading, and weight, and media size and position

To configure a component for different screen sizes

You can configure components for different screen sizes. For example, you can add a content block and set the display to desktop, tablet, mobile, or any combination of the three screen sizes.

The following image shows the device size settings for a component:

Configure a component for different screen sizes

The following video shows a component configured for different screen sizes and the preview:

To personalize the user experience by inserting variables

You can personalize the user experience by adding variables to any component that accepts a text input. For example, you can add variables in text blocks, buttons, URLs, and search bars. Currently, only some variables are available for use.

In a text input field, enter an opening curly brace.
A list of available variables appears.
Select the variable you want to insert.

The following video shows how you can add a variable in the search text field.

Where to go from here

After you create your page, add components, and configure them, you can change the layout, duplicate content, add backgrounds, and customize colors.

There is no set sequence for performing these steps, nor do you have to perform them all. You can choose to not perform these steps and move to Making-studio-pages-available-to-end-users.