Creating a New Web UI

A Web UI is defined in an XML file placed in STEP. This XML file is called a Web UI configuration. Web UI configurations are listed in the STEP Workbench in System Setup below a specified setup group. New STEP installations are pre-configured with this setup group, which can be renamed by the user.

If using a system that does not have this setup group configured, one can be easily created by following the instructions found in the Setup Groups section of the System Setup documentation here.

Users can also choose to duplicate an existing Web UI instead of starting from scratch, and the steps are outlined later in this topic. Once a new Web UI is created or duplicated from another Web UI, it can be modified and customized to meet business needs.

Important: Before moving ahead, a crucial starting point in developing a new Web UI is the initial analysis of the requirements and purpose of the Web UI (e.g., how will it be used, what kind of data should be displayed, should data be editable, etc.). Once the use case and any data analysis is done, it is time to move ahead with creating and configuring a Web UI.

Creating a New Web UI

To create a new Web UI:

  1. In STEP Workbench, go to the System Setup tab and right-click the setup group that is designated as the parent folder for Web UI configurations. Select New Setup Group and name the group.

While you can skip the New Setup Group step and go directly to step 2 to create a new Web UI directly under the parent folder, it is recommended practice to put each Web UI in a Web UI group so that you can limit user access if / as necessary. For systems in which multiple specialized Web UIs are going to be created / exist, this ensures that privileges can be set up so that users can only access Web UIs relevant to them.

  1. From the setup group, right-click and choose New Web UI. (If the New Web UI option is not showing, make sure you are using the correct setup group folder.)

  1. In the Create New Web UI dialog, enter an ID and a Name for the configuration, and then click Create.

Important: Do not use spaces or special characters in the ID since the ID is used as part of the URL for accessing the Web UI. The name is used as a display name within the STEP Workbench and on the Start Page. The ID becomes the Web UI configuration ID referenced in various sections of the Web User Interfaces documentation.

A Web UI configuration is now created in STEP and will appear by name under the setup group folder.

The Web UI is available for configuration editing (e.g., Web UI name and default status) in System Setup and available to access using a browser.

If Default is enabled / checked on the Configuration tab, the Web UI can be accessed via a simpler URL (no Web UI configuration ID required) than what is used for non-default Web UIs. For more information, refer to the Accessing a Web UI section of the Web User Interfaces documentation here.

Note: Setting a default is not required. If using this feature, only one Web UI at a time can be set as the default. The Default checkbox for a specific Web UI cannot be unchecked once it has been enabled, but users can change the default selection by enabling the value for another Web UI.

Duplicating an Existing Web UI

Instead of creating a new Web UI, it may be ideal to duplicate an existing one. In many cases, this will make the creation of a similar Web UI easier since much of the configuration has probably already been done.

  1. In the workbench, go to System Setup and expand the setup group(s) that contains Web UI configurations.
  2. Right-click the Web UI configuration to duplicate.

  1. Select Duplicate from the menu.
  2. When the 'Duplicate' dialog appears, enter an ID. The Name is pre-populated, which can be edited or a new name can be entered. Click OK when finished.

A Web UI configuration, duplicated from an existing Web UI configuration, is now created in STEP and will appear by name under the setup group folder. The Web UI is available for configuration editing as described at the end of the Creating a New Web UI section found earlier in this topic.

For details about working with Web UI revisions and deleting a Web UI configuration, refer to the Managing Web UI Configurations section in the Web User Interfaces documentation here.

For information on how to use the Web UI Designer, refer to the following topics in the Web User Interfaces documentation:

  • Managing Web UI Configurations (here)
  • Designer Access (here)
  • Design Mode Basics (here)
  • Selecting Components (here)
  • Configuring Components (here)
  • 'Web UI component configuration reference' available at [system]/webui/docs