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.
Action | Reference |
---|---|
To understand the flow layout when designing a progressive web application | Flow panel holder for designing progressive view |
To know best practices when developing a PWA | Customization best practices for developing PWA |
To learn about the localization support for a progressive web application | Localizing a Progressive Web Application |
To know the field-level properties available in Remedy Developer Studio for PWA | Advancements in Remedy Developer Studio to support PWA |
To know how to use autocomplete for character fields in search menus | Using Typeahead menus |
To achieve better performance by setting the active links to run in parallel | Set active links to run in parallel |
To know the properties supported when developing a progressive view | Field properties |
To know the icons available in Remedy Developer Studio for PWA | Icons 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
Comments