This documentation supports the 21.3 version of Action Request System.

To view an earlier version, select the version from the Product version menu.

Developing a Progressive Web Application

Progressive web applications (PWA) are applications that use common web technologies including HTML, CSS, and JavaScript. These applications are platform-independent and can be used across different devices such as desktops, tablets, and mobiles.

You can develop a PWA in Developer Studio . PWA technology provides you with the ability to create applications and additions to the BMC Helix ITSM applications that work across multiple platforms. For example, the same application runs on an iOS device or an Android device without you having to develop a separate client for each device.
Progressive web applications automatically fit the screen of the device they run on.

Related topics

Progressive web application development

Mid Tier architecture

Enabling Progressive Web Application

Adding custom fields to your views using Smart IT Open link

BMC Community: Video series for PWA Open link

Community blog: Whitepaper on BMC Helix ITSM PWA Implementation Methodology Open link

The following diagram shows the high-level process of developing applications with PWA technologies by using Developer Studio .

Topics related to developing PWA in Developer Studio

Read through the following topics to learn more about developing a progressive web application in Developer Studio .


To know the basics of accessing and using Developer Studio

Accessing and navigating Developer Studio
Enable progressive views for formsEnabling Progressive Web Application
Mid Tier  architecture for Progressive Web ApplicationsMid Tier architecture
To understand the flow layout when designing a progressive web applicationFlow panel holder
Know about different kinds of panel holdersPanel holder display types
To know best practices when developing a PWACustomization best practices for developing PWA
To learn about the localization support for a progressive web applicationLocalizing a Progressive Web Application
To know how to use autocomplete for character fields in search menusCreating search menus
To achieve better performance by setting the active links to run in parallelCreating active links
To know the properties supported when developing a progressive viewField properties
Creating filters and advanced filters in progressive views

Creating filters

Creating an advanced filter in Progressive Web Applications

Creating a faceted filter

To know the icons available in Developer Studio for PWA

Icons available in Developer Studio to support PWA

Adding icons in Developer Studio

To create various types of selection listsCreating drp-dowselection lists in PWA that allrow gresslctionive of muWeb tple opApplications
Creating dynamic multiple selection lists for pProgressive wWeb aApplications by using JSON data
Add RTF fieldsAdding RTF fields in Progressive Web Applications
Add a pause to a character field in a workflowAdding a pause interval in a character field for a workflow in PWA
Create a surveyCreating a survey questionnaire
Manage attachments Managing attachments in Progressive Web Applications by using a remote form
Add typeahead to mention users in the organizationConfiguring the @mention component
Create a progress barConfiguring the Progress bar widget in Progressive Web Applications
Add autocomplete to a fieldAutomatically completing menu entries
Adding imagesAdding background images to fields and form views

Automatically aligning fields in Developer Studio

Aligning fields

Videos related to developing PWA in Developer Studio

You can watch the following videos to know more about developing progressive web applications:

Video titleDescription
Webinar: BMC Helix Progressive Web Apps Introduction & Best Practices
Webinar: BMC Progressive Web Application (PWA) Development In Helix ITSM
Overview of Progressive Web Applications

Advancements in Developer Studio to support PWA

Use cases for Progressive Web Applications.
This video (2:08) provides use cases for Progressive Web Application.

Localizing a Progressive Web Application
This video (7:31) provides an overview of how to localize a Progressive Web Application.

Panel holder display types, creating fixed panels and complex layouts with flow panels
This video (4:52) demonstrates creating Fixed panels in  Developer Studio when you enable progressive views for a form.
This video (13:03) demonstrates creating complex layouts with flow panels.

Configuring a progress bar widget
This video (3:37) describes how to configure and use the progress bar widget.

Managing attachments in PWA by using a remote form 
This video (5:15) shows how to create attachment pools that allow variable number of attachments in progressive web applications.

Troubleshooting PWA

This video (3:40) shows you how to use additional log settings and generated HTML to diagnose and troubleshoot PWA

Adding images to buttons and background images to fields and form views.

This video (3:54) provides a summary of adding static or SVG images in Developer Studio for progressive views.

Creating dynamic selection lists for Progressive Web Applications by using JSON data
This video (4:06) explains the concept and also demonstrates how the JSON properties and the JSONMAP function works.

Creating a survey questionnaire

This video (5:33) provides a summary of creating a survey questionnaire in Developer Studio for progressive views:

Adding images in PWA

This video (3:54) provides a summary of adding static or SVG images in Developer Studio for progressive views:

Aligning fields

This video (3:50) provides a summary of how automatic alignment of fields happens in progressive views in Developer Studio.

Creating typeahead fields for PWA

Was this page helpful? Yes No Submitting... Thank you


  1. Daniel Yrell

    "Know about different kids of panel holders" should be "Know about different kinds of panel holders"

    Sep 07, 2023 07:34
    1. Chaitanya Vikas Ghanta

      Thanks for pointing this out, Daniel. Correcting this.

      Sep 08, 2023 04:35