A Step defines the user interface of a particular screen rendered on the Frontline Workplace application. Depending on the chosen step template, various configuration changes can be set in the Configuration Panel. Additionally, in some templates, the user may modify the button by adding, removing, renaming, or repositioning them, then save these changes to create a custom template. Any custom template will behave in the same manner as the original template it was based on.

You may visualize how a Step will appear for the Frontline Worker by looking into Step Preview on the right bottom of the workflow.

Here are the explanations of the Step (UI) Templates: 

  1. Title + Text: Displays only text information/instructions with the header and a large text. 
  2. Title + Image: Displays the header and an image in the main section. 
  3. Title + Image + 2 Texts V1: Displays the header and divides the main section with a large text, a small text at the bottom, and an image on the side. 
  4. Title + Image + 2 Texts V2: Displays the header and divides the main section with a small text, a large text at the bottom, and an image on the side. 
  5. Error: Displays the header, an error as a cross on the left side, and a large text.  
  6. Warning: Displays the header, a warning sign on the left side, and a large text. 
  7. Question: Displays the header, a question mark on the left side, and a large text to show the question. 
  8. Info: Displays the header, an information sign on the left side, and a large text. 
  9. Success: Displays the header, a checkmark on the left side, and a large text. 
  10. Title + Image + Text: Displays the header, a large text, and an image on the right. 
  11. Media/Video UI: Plays media files or videos with controllable options such as rewind, start, and forward. 
  12. Play Video No Controls: Displays media files. 
  13. Title + Media/Video: Displays the header and media files with the Start Video option. 
  14. Title Play Video No Controls: Displays the header and media files. 
  15. Image: Largely displays an image in the main section. 
  16. Record: Captures media files, such as video, images, and audio. 
  17. Scan: Scan barcodes and QR codes. 

Step Configuration

Depending upon the selected Step Template, it can be configured from the Configuration Panel. 

The following properties are available for any step:

A. Step Name: Name of the step, unique within the workflow.

B. UI Template: Each step has a distinct Step Template, which can be selected from the dropdown menu.

C. Buttons: All buttons associated with a UI template are displayed here. If the UI Template allows modification of the buttons, this can also be done here.

D. Background audio: You can select one of the uploaded audio tracks as background audio. When there is background audio in a Step, the audio will be played automatically when a user lands on that step. You may also configure whether the audio will loop or not.

E. Step Preview: The rendered view is similar to what the user will see on the device while executing the workflow.

Recommended video links for this guide: