This documentation supports the 23.3 version of BMC Helix Digital Workplace Basic and BMC Helix Digital Workplace Advanced. Icons distinguish capabilities available only for the Advanced and External license levels. For more information, see License types and features.To view an earlier version, select the version from the Product version menu.

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.pngBMC Helix Digital Workplace Advanced

Related topics

Creating-workplaces-for-your-lines-of-business

Explore-the-BMC-Helix-Digital-Workplace-Studio

Using-colors-to-create-visually-appealing-pages

Duplicating-content

Defining-navigation-through-links-in-pages


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.

  1. Log in to the BMC Helix Digital Workplace Admin console, and select Configuration > Studio. 
  2. Click New Page, enter a name for your page, and then click Create.
  3. (Optional) Click Edit Page DetailsPageDetails_icon.pngand 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.
  4. Click ComponentsComponents.png.

  5. 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.
    page_canvas_annotated_23.3.png 

    Tip

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

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

    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.

    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.

    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.

    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.

    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.

    (Version 23.3.02 and later) 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.

  7. To preview the page that you have created, select one of the options available in the title bar:

    Preview options for the three screen sizes, desktop, tablet, and mobile

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

  8. 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:



icon_play.png Watch the YouTube video about creating pages in the studio


To configure an asset group

  1. Log in to the BMC Helix Digital Workplace Admin console and select Configuration > Studio. 
  2. Click New Page, enter the name for your page, and then click Create.
  3. (Optional) Click Edit Page Details PageDetails_icon.png 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.
  4. Click Components image-2024-5-2_15-20-35.png.
  5. Select the Asset Group component. Double-click or drag and drop the component onto the page canvas to add it to the page.
  6. Click the component added to the page canvas.
    The Asset Group properties are displayed in the component properties panel.
  7. 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.
  8. 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

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

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

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

  1. In the text input field, type an open curly brace.
    A list of available variables is displayed.
  2. 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.

  1. Click the search bar component on the page canvas.

  2. In the component properties panel, configure the following properties:

    Property name

    Action

    Example

    Search Sources

    Select the source for your search from articles or other sources like requests, approvals, and locations.
    By default, all search sources are selected.

    If a source is not selected, that source's tab does not appear on the search results page. You can add filter for articles. Filters are defined only for articles in BMC Helix Knowledge Management by ComAround. You can add only one filter to a search bar. For the BMC Helix Knowledge Management by ComAround provider, you can select predefined filters.

    The following video shows an example of how search sources are selected:

    The following video shows how you can define fileters for BMC Helix Knowledge Management by ComAround articles:

    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:

    Label

    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.

    Show categories and Label

    Show or hide the categories menu. You can add text for the category heading in the Menu label box if you show categories. 

  3. Save the search bar configuration.


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.

catalog-section-properties.png

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

  1. Log in to the Admin console.
  2. Under Configuration, select Application Features.
  3. 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 embed a video in a content block

  1. Perform one of the following steps:
    • Create a new page in Studio.
    • Select an existing studio page and from the Actions, select Edit.
  2. Click ComponentsComponents.png.
  3. Either double-click or drag and drop the Content Block onto the page canvas. 
  4. Select the content block.
    The Component Properties panel is displayed.
  5. Expand the Media section and from the Type list, select Video link.

    Studio video topic graphic.png

  6. From the Source list, select one of the following options from the list and enter the URL in the appropriate format:

    Source

    URL format

    Description

    Thumbnail

    YouTube

    For more information, refer to YouTube Help

    From the source.

    Cloudflare

    • https://customer-<CODE>.cloudflarestream.com/<VIDEO_UID>/iframe
    • https://iframe.videodelivery.net/<VIDEO_ID>

    For more information, refer to Cloudflare documentation

    Important:

    • The video link that you want to embed must have public access.
    • If the video is deleted from the source, the content block displays an error message stating that the video was not found.

    From the source.

    Hosted file

    The following formats are supported:
    MP4, WebM and Ogg

    Important:

    • We recommend using MP4 and WebM over the Ogg format. Ogg files might not be supported on iOS. 
    • The video link that you want to embed must have public access.
    • If the video is deleted from the source, the content block displays a blank video player screen.

    To add a thumbnail to the hosted video, click Attach file next to the Video poster image.

    • Supported files: jpg, jpeg, png, gif or svg
    • Maximum file size: 5.00 MB

    This option is supported only for hosted files.

  7. After entering the URL and configuring other component properties, such as Base properties or Border, perform one of the following actions:
    • Click Save to save the draft.
    • Click Save & Publish to publish the changes to your end users.


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. 

  1. Click the component block on the page canvas. Different screen options are displayed on the component block.

    image-2024-5-8_18-14-0-1.png


  2. 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:

image-2024-5-9_10-55-20-1.png

image-2024-5-9_9-58-39-1.png

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.

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*