This documentation supports the 23.3 version of BMC Helix Innovation Suite (AR System and BMC Helix Innovation Studio).

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

Developing Progressive Web Applications

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.

Best practice

Use BMC Helix Innovation Studio for developing new codeless and code-based applications.  

Use Developer Studio for customizing PWA screens for existing applications such as BMC Helix ITSM

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

Comparison between Developer Studio and BMC Helix Innovation Studio capabilities

Progressive web application screens

Mid Tier architecture

Enabling Progressive Views for forms by using Centralized Configuration Settings

Adding custom fields to your views by 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 (PWA) in Developer Studio.


To understand the basic concepts of what PWAs are and their advantages 

Progressive Web Applications overview

To understand the Mid Tier architecture in general as well as Mid Tier architecture for PWAs

Mid Tier architecture

To understand how flow panel holders can in creating create PWA screens and how they help with making screens responsive to varying screens

Flow panel holders for Progressive Web Applications

To understand Progressive Web Application screens with a few examples

Progressive web application screens

To know the basics of accessing and using Developer Studio

Accessing and navigating Developer Studio

To create a Progressive Web Application you must first enable Progressive View for forms in Developer Studio

Enabling Progressive Views for forms by using Centralized Configuration Settings
To know best practices when developing and customizing a PWACustomization best practices for developing PWA

To know the differences between the Developer Studio features for Mid Tier versus the features available in Progressive View

Differences between Developer Studio features available for Mid Tier and Progressive Web Applications
To learn about the localization support for a PWALocalizing 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 that enable PWA users to search records and to fill forms 

Creating filters

Creating an advanced filter in Progressive Web Applications

Creating a faceted filter

To know the icons available in Developer Studio for PWA and how to use them in your applications

Previews of icons available in Developer Studio to support PWA

Adding BMC icons to UI elements on forms by using Developer Studio

To create various types of selection listsCreating selection lists in Progressive Web Applications
Creating dynamic multiple selection lists for Progressive Web Applications by using JSON data
Add fields that allow editing and formatting of text, adding images, and so onEnabling rich text 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 survey in the applicationCreating a survey questionnaire
Manage attachments in the applicationManaging attachments in Progressive Web Applications by using a remote form
Add typeahead to mention users in the organizationConfiguring the @mention component
Create a progress bar that shows stages of a workflow or process in your applicationConfiguring the Progress bar widget in Progressive Web Applications
Add autocomplete to a fieldAutomatically completing menu entries
Adding images in the interface of your applicationAdding background images to fields and form views

Automatically aligning fields in Developer Studio

Aligning fields

Change the look and feel of your application to suit the branding and styles of your organization

Rebranding Progressive Web Application screens

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