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

To create a workplace page and add page components

We recommend that you review the best practices when configuring your studio pages at Creating-studio-pages-best-practices.

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.
Select My pages > New Page.
Enter a name for your page, and then click Create.
(Optional) Click Edit Page Detailsand add a description in the Notes field.
You can use this field to describe the purpose of the page or to differentiate between pages with the same name; for example, HR homepage for USA and HR homepage for India.
Click Components.
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, filters for articles from BMC Helix Knowledge Management by ComAround, 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 Catalog section and tile framework
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. You can embed videos in the content blocks from sources such as YouTube, hosted videos from the intranet, and Cloudflare videos. End users can see a video streaming when they arrive on that page.	Configuring-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

Log in to the BMC Helix Digital Workplace Admin console and select Configuration > Studio.
Select My pages > New Page.
Click Create.
(Optional) Click Edit Page Details and add a description in the Notes field.
Use this field to describe the purpose of the page or to differentiate between pages with the same name. For example, HR homepage for USA and HR homepage for India.
Click Components .
Select the Asset Group component. Double-click or drag and drop the component onto the page canvas to add it to the page.
Click the component added to the page canvas.
The Asset Group properties are displayed in the component properties panel.
Select the desired asset group from the list of available asset groups.
The Group option consists of the out-of-the-box and custom asset groups that you created. The selected asset group is displayed on the page canvas.
Save the page.

Important

You need catalog administrator permissions to create and manage asset groups.

Make sure that the selected asset group is not empty because empty asset groups are not shown to the end users.

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

To configure an events block

Click the Events block on the page canvas.
Content options are displayed in the Component Properties panel.

In the Component properties, configure the following properties:

Property name	Action
Type	Select whether the events block displays active or past events.
Label customization	Enable this option if you want to customize the label for active and filtered events.
Default view	View the active events on the page canvas as a Card or list.
Event types	Select a type of your event from four options: Appoints, Approvals, Requests, and To-Dos.

Save the page.

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

To personalize the user experience by inserting variables

You 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.

In the text input field, type an open curly brace.
A list of available variables is displayed.
Type a statement and insert one of the following variables in the statement:

- First name
- Last name
- Full name
- User ID.

The following image shows the result of inserting a variable in a search bar:

Screenshot 2024-05-08 152141.png

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

To configure a search bar

Search bars are of two types: search bar (standalone) and search block (search bar in a content block). Configure both in the same way.

Search bar types

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. You can restrict the search to selected sources to narrow search results and make them more relevant. The search bar sources include knowledge sources, 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.

Click the search bar component on the page canvas.

In the component properties panel, configure the following properties:

Property name	Action	Example
View	Create a new view or select an existing search view.
Size	Select the size of the search bar from three options: Small, Medium, and Large.	The following video shows how you can configure the size of the search bar, label, search icon, and show or hide categories:
Placeholder message	Add text to be displayed in the search bar. You can also add variables.
Search icon	Show or hide the search icon in the search bar.
Categories menu	Show or hide the categories list.
Menu label	Add text for the category heading in the Menu label box if you show categories.

Save the search bar configuration.

Catalog section and tile framework

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.

To configure a catalog section

Log in to BMC Helix Innovation Studio and navigate to the Workspace tab.
Find and select Digital Workplace.
On the Record Definitions tab, select the checkbox for FeatureSettings, and then click Edit data.
Search for the EnhancedSections parameter in the search bar.
Select the tenant related to your environment, and then click Edit.
Use the toggle button to change the state to Disabled or Enabled.
Save the changes.

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.

Click the component block on the page canvas. Different screen options are displayed on the component block.
By default, all the screen options are selected. Configure the component for any screen from these options or any combination of the screen sizes.
You can view the result from Preview option in the title bar.

The following image shows the mobile screen size setting for a content block and its preview:

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

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.