Create and design the user interface of an application with the UI Designer. The interface of the UI Designer is divided into four sections:
Screens & Widgets
On the left side you find the overview of all created screens and can switch to the widgets to fill the screen content. The widgets are e.g. buttons, checkboxes and so on, but also whole login masks can be displayed via a widget. If the standard widgets are not sufficient, you can create your own widgets at any time.
Screen Content Tree
In this area, the Screen Content of the current selected screen is displayed as a tree structure. You can add the widgets here and arrange them using drag & drop, but also with the arrow buttons or WASD on your keyboard.
Application Preview
In this section you get a real-time preview of the current screen. You can also drag-in widgets here and arrange them directly via drag & drop.
Properties Area
On the right, the properties of the selected widget are adjusted.
You have several options in the upper menu bar to navigate to specific features:
| Designer | Create and design the user interface of the application. |
| Process | Define the process logic of the application. |
| Data Workbench | Manage custom events, global variables and auto fields that you want to use cross-functional in the user stories. |
| Tests | |
| OPA5 | With the OPA5 test framework, you can write test cases, which will be executed after the deployment. |
| TBaaS | TBaaS is a automated test service from j&s soft to test your application in different environments. |
| Other | |
| CSS Editor | Use the CSS Editor to adjust e.g. spaces, sizes etc. |
| Assets | Uploads assets like documents, images, CAD models or any other file types. |
| Security | Assign roles to applications. |
| Language | Translate an application into different languages and set a fallback language. |
| Theming | Upload a particular theme to give an application a specific look according to your corporate design guidelines. |
| Libraries | Add libraries to an application and get an overview of their dependencies. |
| Code |
The Code Designer is a web-based development environment that can be used to write source code like in a normal IDE. Note: Changes are not applied to the Process Designer of the application. |
On the right you have the following options:
| Deploy | Deploys the current app configuration – It’s necessary to deploy an application before open (preview) it |
| Open | Open an application in the browser – Be aware that there are no mobile features like camera available. Use the Simplifier Mobile Client to preview mobile applications |
| Exit |
Exit the current app configuration – It’s not necessary to save explicitly because of the AutoSave. Attention: This does not apply to other areas. |
