This documentation supports the 20.08 version of Remedy Action Request System, which is available only to BMC Helix subscribers (SaaS).
To view an earlier version, select the version from the Product version menu.


Developing a Progressive Web Application

You can develop a progressive web application (PWA) in Remedy Developer Studio. PWA is an architecture or technology that is built by using modern web capabilities.

Important

Before enabling Progressive Views, make sure that you have Remedy AR System server, Remedy Mid Tier, and Remedy Developer Studio version 20.08 installed.

UI layout of PWA

To design the views in Developer studio, add Panels within Panel Holder, and then add fields to the Panels. You can also use nested panels and appropriately place fields within. Panels and Panel Holders create a layout for the mid tier. The following options are available for the Layout Style property:

  • Container panel – Occupies the entire view port (100% screen width).
  • Sub-panel – Holds sections. On mobile devices, occupies the entire width and is displayed as tabs.
  • Section panel – Holds fields or nested sections.
  • Fixed panel – Holds a section. Aligns to the bottom of a screen.

The following diagram illustrates a sample UI layout of Progressive Views:

The responsive design automatically adjusts the panels.

Positioning the elements on the screen

Use the twelve-column layout to position elements horizontally on the screen. The following image illustrates the twelve-column layout:

A Remedy developer can implement the preceding twelve-column layout by using developer-friendly properties that are added in Developer Studio. Refer to the following example:

If you want to create a three-column layout, define the custom CSS style as follows:

  • Panel 1 - 4
  • Panel 2 - 4
  • Panel 3 - 4

This CSS style creates the following layout:




On a mobile UI, this layout looks as follows:




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

ActionReference
To understand the flow layout when designing a progressive web applicationFlow panel holder for designing progressive view
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 the field-level properties available in Remedy Developer Studio for PWAAdvancements in Remedy Developer Studio to support PWA
To know how to use autocomplete for character fields in search menusUsing Typeahead menus
To achieve better performance by setting the active links to run in parallelSet active links to run in parallel
To know the properties supported when developing a progressive viewField properties
To know the icons available in Remedy Developer Studio for PWAIcons available in Remedy Developer Studio to support PWA

Related topics

Progressive web application development

Remedy Mid Tier architecture for PWA

Enhancements in Mid Tier to render Progressive Views


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

Comments