Open topic with navigation

You are here: Web User Interfaces > Web UI Getting Started > Designer Access

Designer Access

The STEP Web UI Designer enables users to modify any STEP Web UI to better suit business needs. Web UI components can be added, configured / reconfigured, and unused components can be deleted from showing on screen, allowing users to focus on the tasks at hand. Furthermore, the Web UI Designer allows for basic look-and-feel changes, such as company logo, colors, and screen font size.

The user or users accessing Designer must have user privileges to make Web UI configuration changes.

Applying an Update Web UI Configuration Action Set

First, an 'Update Web UI configuration' action will need to be created if it does not already exist as a stand-alone item or as part of an existing Action Set. This privilege enables users to run a Web UI in design mode.

  1. Go to System Setup in the STEP Workbench.
  2. Under Action Sets, right-click Setup Actions and add a New Action Set.
  3. Type in an ID and Name then click Create. In this example, the name is 'Web UI Designer.'
  4. Click on the new action set that was just created (Web UI Designer) and go to the Action Set tab.
  5. Click on the Add Action link and select 'Update Web UI configuration' then click Select.
  1. Go to the User & Groups section of System Setup and click on the user group that needs Web UI Designer access.
  2. On the Privilege Rules tab, click the Add Privilege link under the Setup Privileges flipper.
  3. In the 'Add Privilege Rule' dialog box, click the ellipsis next to the Action Set field and choose the Action Set you just created (Action Sets > Setup Actions > Web UI Designer). Then, click Select.
  4. Click Save.

Note: Adding the 'Update Web UI configuration' action allows a user to see the design mode icon once they log into a Web UI. At a minimum, the actions 'View context' and 'View setup group' must also be added to the user group privileges before a user is able to log in to a STEP Web UI. Read more in the Accessing a Web UI section of the Web User Interfaces / Web UI Getting Started documentation here.

For more information about privileges and user setup, see the Users and Groups section (here)and Adding User Privileges for a Group (here) section of the System Setup / STEP Super User documentation.

Web UI configurations will, by default, not be user / user group specific. That is, apart from the fact that the standard privilege setup can influence what a user sees / is able to do, the Web UI will be the same for all users logging in.

By editing the XML, It is possible to apply restrictions to specific components or parameters so that they can only be seen by specific user groups. In the example below, the Status Selector Homepage Widget will only be visible to users in the 'Data Stewards' user group due to the presence of the 'restrict="Data Stewards"' attribute.

In a similar way, a single state could be restricted:

Entering Design Mode

Entering design mode can only be done by privileged users. These users can enter design mode by clicking on a launch button within Web UI or by entering a specific design mode URL into a web browser. Both methods are explained below.

Launch Button on Homepage

  1. Log in to the Web UI.
  2. Click the design mode launch button icon found on the homepage (shown in the user widget).

Launch Button on Other Pages

A design mode launch button can also be configured to show in the Corner Bar component. Once configured, a user can click the icon and enter design mode from any page within Web UI.

  1. Log in to the Web UI.
  2. Click the design mode launch button icon found on the homepage (shown in the user widget).
  3. Once in the Web UI Designer, select the ---[MAIN]--- screen using the dropdown selector.
  4. Go to the bottom of the Main Properties screen and find the Corner Bar Child Component.
  5. Click the 'go to component' link.

  1. On the Corner Bar Properties screen, click Add under the Items field and choose Corner Bar Design Mode Action.
  2. Click Add again.
  1. Click the Save button in the Web UI Designer.

When you navigate to the various screens within Web UI, you will now see the design mode icon in the right corner of the screen.

Append URL in Browser

If a launch button is not already configured, or just as an alternative method, a user may access design mode by appending the Web UI URL to include #designmode=true at the end. If the Web UI URL already includes the '#' character, it needs to be appended with the string &designmode=true instead. Users will be automatically entered into design mode after entering their username and password on the standard Web UI login screen.

As a basic example, here is what the URL will look like in both cases for a Web UI configuration where the system name is 'your-system' and the Web UI configuration ID is 'ANewWebUI': 

http://your-system/webui/ANewWebUI#designmode=true
http://your-system/webui/ANewWebUI#contextID=Context1&workspaceID=Main&screen=Import&designMode=true

2017, Stibo Systems