This documentation supports the 22.1 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 screens

Mid Tier architecture

Enabling Progressive Views for forms from the Centralized Configuration

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 (PWA) in Developer Studio .

ActionReference

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 from the Centralized Configuration
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

Icons available in Developer Studio to support PWA

Adding icons in Developer Studio

To create various types of selection listsCreating selection lists in Progressive Web Applications
Creating dynamic multiple selection lists for pProgressive wWeb aApplications by using JSON data
Add RTF fields that allow editing and display of text with formattingAdding 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 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

 https://youtu.be/sVJXAhfVzQk

Webinar: BMC Progressive Web Application (PWA) Development In Helix ITSM

 https://youtu.be/-J-ENCJ8bc4

Overview of Progressive Web Applications

 https://youtu.be/7DnZnfo6uZ8

Advancements in Developer Studio to support PWA

https://youtu.be/YaI3s28w_XY

Use cases for Progressive Web Applications.


 https://youtu.be/s14_l_r9DwQ
This video (2:08) provides use cases for Progressive Web Application.

Localizing a Progressive Web Application

 https://youtu.be/e2tOOdpBAB0
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

 https://youtu.be/m33BWG-mEoI
This video (4:52) demonstrates creating Fixed panels in  Developer Studio when you enable progressive views for a form.



 https://youtu.be/TnwUS2RF28Q
This video (13:03) demonstrates creating complex layouts with flow panels.

Configuring a progress bar widget


 https://youtu.be/-T90EgZ_ZtI
This video (3:37) describes how to configure and use the progress bar widget.

Managing attachments in PWA by using a remote form


 https://youtu.be/sFkBJ-cjcH0 
This video (5:15) shows how to create attachment pools that allow variable number of attachments in progressive web applications.

Troubleshooting PWA



 https://youtu.be/MfSTrjhwau8

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.


 https://www.youtube.com/watch?v=349xdes86qM

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


 https://youtu.be/3eRIML5mOgI
This video (4:06) explains the concept and also demonstrates how the JSON properties and the JSONMAP function works.

Creating a survey questionnaire

 https://youtu.be/v0VVhzPHQww

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:

 https://www.youtube.com/watch?v=349xdes86qM

Aligning fields

 https://youtu.be/_JhOoLN2agY

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

https://youtu.be/hhvyBy99Ujg


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

Comments