1 User Interface Workbench

User Interface Workbench is a development tool to design the User Interface of an Application using APIs to fetch data, enabling communication of one screen with another and generating screens to be displayed to the end user. This tool aims at minimizing developers’ efforts and time by generating the working screens automatically with minimal user input.

The tool also enables the developers to make the changes in the existing screens created by them or provided out of box, which are designed using the UI Workbench tool.

Components:

The screens created consist of the following components:
  • Template: It decides visual representation of data on the front-end
  • Model: It is responsible for fetching data from REST APIs
  • Bindings: It consists of logic for processing the data fetched from the APIs
  • Resource Bundle: It comprises of strings which are to be displayed on the screen
  • Hooks: It comprises of user provided logic.
  • Metadata: It consists of summarized information, which can generate all the above mentioned artefacts.
  • SCSS/CSS: It comprises of CSS code which provide styling to the components.
Pre-requisites:
  • Basic knowledge of Swagger. ( To know more about swagger refer https://swagger.io/)
  • Basic knowledge of JavaScript, Knockout Js
  • Basic knowledge of Oracle JET
  • Basic knowledge of Sass

Workflow:

The process to create the screen ready to be used by the user / customer is as follows:


Description of uxextensibility1.png follows
Description of the illustration uxextensibility1.png

  1. Install UI Workbench: The tool can be easily installed simply by running the setup file.
  2. Select/Create Screen Layout: User can select one of the predefined screen layouts according to his requirement
  3. Create Folder(Screen Information): User has to provide basic screen details like the name of the screen and the type of the screen e.g. (transaction, inquiry, and widget)
  4. Select REST APIs: User can select multiple REST APIs which will be needed for fetching required information to display on the screen.
  5. Screen Designing: User can design how the screen content will be displayed by using the form elements (e.g. Input Box, Text Area) available in the tool. User can drag and drop these elements and design the screen as per requirement