Simplifier Makers ClubSimplifier Makers Club
  • Docs
  • Knowledge
  • F.A.Q
  • Forum
  • Courses
  • Marketplace
  • Login
  • Try for free
  • German
  • English
  • Try for free
  • Docs
  • Knowledge
  • F.A.Q
  • Forum
  • Courses
  • Marketplace
  • Login
  • Try for free
  • German
  • English
  • Try for free

Current Release

home/Documentation/Current Release
  • Getting Started
    • Basic Concept and Capabilities
      • Interaction
      • Governance
      • Collaboration
      • User Experience
      • Integration
      • Automation
      • Operations
  • App Builder Guide
    • Design
      • OpenUI5, SAPUI5 and Fiori
      • Accessibility
      • Widget Groups
      • Widgets
    • Build
      • Build Workflows
        • Create Workflow
        • Using Conditions
        • Working with Outcomes and Variables
        • Start Workflow within App
        • Using Automated Task
        • Using User Task
        • Using Notification Task
        • Create Custom Task UI
        • Customizing User Task Notifications
        • Run Workflows in parallel
      • Add and Format Data
      • Create Apps via Wizard
        • Login
        • Table with Details
        • Layout
        • Form Assistant
        • Upgrade UI5 Version
        • Database Data Editor
      • Using Keyboard shortcuts
      • Create Apps from Scratch
        • Device Condition
        • Design Apps in Real Time across all devices
        • Create the User Interface
          • Collaboration
          • Manage Screens
          • Design Screen
          • Assets
          • CSS Editor
          • Libraries
          • Theming
        • Access Business Object via Script
      • Add Application Logic
        • Login/Logout into an App
        • Modify the UI at runtime
        • Events
        • Variables and Datatypes
        • Auto-Fields
        • Logic
          • Device Condition
          • Condition
          • Iterate over List of Data Records
          • Custom Scripting
          • Access Business Object via Script
        • Navigate between Screens
        • Data Services
        • Data Object
          • Filters for Connectors
        • Mapping Area
      • Using native mobile Features
        • Contacts API
        • Internal camera application
        • Mobile Actions
        • App Links / Deep Links
        • Offline Usage
          • Offline Storage
          • Offline Events
      • Modularize your Apps
        • Use Modules
        • Interfaces
      • Manage Access
      • Working with Text and Mails
        • Dynamic Text
        • Sending Email
      • Localization
        • Translate Workflows
        • Import/Export Workflow Translations
        • Translate Applications
      • Run Application
        • Run in Browser
    • Integrate
      • Integrate into SAP
      • Connectors
        • Login Methods
          • Username or -alias
          • Single-Sign-On with oAuth 2.0 Bearer Token
          • Certificates
          • Token
          • Username/Password
          • SAP Logon
        • Create and Manage Connectors
        • Websocket Communication
          • Token Generation
          • Websocket Generation
          • Websocket API Documentation (Incomplete)
          • Request Types (Asynchronous Connectors)
          • Token, Websocket and Request Sending Example
          • Asynchronous Connector Request Json Examples
            • OPC-UA Monitoring Requests
            • OPC-UA Monitoring Requests Examples
        • Create and manage connector calls
          • Connector Call Specific Parameters
          • Copy Connector Calls
          • Test a Connector Call
        • SOAP Connector
          • SOAP Connector Calls
        • REST Connector
          • REST Connector Calls
          • REST Connector Call Query Parameters
          • REST Connector Call Header Parameters
        • OData V2 Connector
          • OData V2 Connector Calls
        • SAP RFC Connector
          • SAP RFC Quickstart
          • SAP RFC Connector Calls
            • Create SAP RFC Calls manually
        • SQL Connector
          • SQL Connector Calls
          • Up-Download of SQLite Databases
        • MQTT Connector
        • OPC UA Connector
          • OPC UA Connector Calls
            • READ Call - OPC UA Connector
            • WRITE Call - OPC UA Connector
            • BROWSE Call - OPC UA Connector
            • SUBSCRIBE Call - OPC UA Connector
        • CSV Connector
          • CSV Connector Calls
        • Email Connector
          • Email Connector Call
        • Push Notification Connector
          • Assign Roles
          • Send message via Process Dashboard
          • Receive message via Process Dashboard
          • Push Notification Connector Calls
        • Proxy Connector
        • Simplifier SAP
          • SAP ERP6 Business Partner
          • SAP ERP6 Object Status
          • SAP ERP6 Status Profile
          • SAP ERP6 ArchiveLink
          • SAP ERP6 Generic Object Services
          • SAP ERP6 Object Classification
          • SAP ERP6 Text
          • SAP ERP6 Partner Schema
          • SAP ERP6 Document (DIS/DRAW)
          • SAP ERP6 Change Document
          • SAP ERP6 Material
          • SAP ERP6 User
          • SAP SD Sales Order
          • SAP SD Customer
          • SAP SD Customer Quotation
          • SAP SD Vendor
          • SAP SD Billing Document
          • SAP IS-U Connection Object
          • SAP IS-U Business Partner
          • SAP ISU Premise
          • SAP ISU Device Location
          • SAP ISU Meter Reading Order
          • SAP ISU Installation
          • SAP ISU Meter
          • SAP ISU Owner Allocation
          • SAP ISU Point of Delivery
          • SAP ISU Service Order
          • SAP ISU Street
          • SAP ITIZ Handler
          • SAP IS-U Account
          • SAP IS-U Contract
          • SAP ITIZ SDSH
          • SAP ITIZ Key Value
          • SAP ITIZ UI5
          • SAP ITIZ DB Table
          • SAP MM Service Master
          • SAP MM Purchase Order
          • SAP MM Entry Sheet
          • SAP MM Goods Movement
          • SAP MM Purchase Requisition
          • SAP PM Equipment
          • SAP PM Functional Location
          • SAP PM Measurement Point
          • SAP PM Maintenance Notification
          • SAP PM Service Notification
          • SAP PM Service Order
          • SAP PM Maintenance Order Confirmation
          • SAP PP Material BOM
          • SAP PP Production Order Confirmation
          • SAP PP Production Order
          • SAP WM Transfer Order
          • SAP HR Personal Time Management
          • SAP HR Time Sheet
          • SAP QM Quality Notification
      • Code Designer
      • Business Objects
        • Create server-side Business Objects
          • Server-Side Business Object API
          • Server-Side - Access Connectors
          • Server-Side - Access other Business Objects
          • Server-Side - Access Plugins
          • Changes in Business Objects with Release 8 EHP 1
          • Convert XML to/from JSON
          • Encode/Decode Base64
          • Extended Functionality
        • Create client-side Business Object
          • Client-Side Business Object API
          • Client-Side - Access Connectors
          • Client-Side - Access Plugins
          • Client-Side - Access other Business Objects
        • Create and Manage Functions
          • Test Business Object Functions
          • Versioning of Business Objects
      • Data Types
        • Domain Type
        • Struct Type
        • Collection Type
        • Copy Data Types
      • Database Designer
        • Schema Overview
        • Data Editor
        • Create/Modify Schema
        • Import existing Database
        • Deploy Schema
      • SAP Systems
      • Jobs
    • Debugging
      • Debugging on Browser
      • Debugging on Mobile Client iOS
      • Debug Server-Side Business Objects
      • Debugging on Mobile Client Android
    • Test & Secure
      • Automated Testing
      • Automated Testing on mobile
    • Deploy
      • Application Properties and Releases
      • Deploy on Simplifier Runtime
        • Transports
          • Packages
          • Create a Transport
          • Import Manual Transport
          • Release and Transport an Application
      • Simplifier Mobile Client
        • Features
        • Intune
      • Deploy as Standalone Mobile
      • Deploy to SAP onPremise
      • Deploy to SAP BTP
    • Manage
      • Projects
    • Maintain & Optimize
      • Monitoring
        • Monitoring
        • Monitor Workflows
        • Monitoring Sub Workflows
        • Statistics
        • Logs
          • Filter
          • User-Log
          • Execution Log
    • Extend
      • Create custom App Wizards
      • Create Widget Groups
      • Create custom Widgets
        • Single Widget
          • Enumeration in Widget Properties
        • Widget Categories
      • System Libraries
      • Simplifier Client API
      • Integrate external Libraries
        • Add a new Library
          • Integration of Libraries - addScript
          • Integration of Libraries - addStyle
          • Integration of Libraries - addBeforeInitHandler
          • Integration of Libraries - addAfterInitHandler
      • Workflow API
      • Simplifier App Wizard API
      • Plugins
        • Overview
        • List of Plugins
          • PDF Plugin
            • Installation PDF Plugin
            • Build a PDF Template
            • Technical call of a PDF Plugin
              • Delete a PDF Template
              • Start PDF Generation
              • List your PDF Templates
              • Fetch a PDF Template
              • Edit a PDF Template
              • Add a PDF Template
            • Typical Use-Case PDF Plugin
          • Content Repository
            • Content Files
          • keyValueStore / JSON Store Plugin
        • Plugins via Script
        • Plugin development
        • Anonymous Profile for Plugins
        • Plugin Secrets
  • End User Guide
    • Mobile Client
      • Login
      • Using Apps
      • Handling User Task mobile
      • Adjust Mobile Settings
      • Report Errors
    • Launchpad
      • Handling Tasks
      • Update your Profile
  • Operator Guide
    • Operation Model (PMT)
      • People
      • Method
        • Preparation - Sprint 0
        • Implementation - Sprint 1 - x
    • Roles and Rights
      • Overview
      • Global Roles
      • Project Roles
      • Business Roles
      • Best Practices with Projects
      • Permission Overview
        • Workflow Permission
    • Automation
      • Automate Transport
    • Support
      • Support Requirements
      • Your contact within Simplifier
      • Manage your Simplifier MyID and support users
      • How to login to our support portal
  • Administrator Guide
    • Release Cycle
    • Feature Lifecycle
    • Launchpad Settings
    • Requirements and Instructions
      • Server Requirements
      • Client Requirements
      • Firewall Requirements
      • Reverse Proxy Requirements
        • Testing WebSocket Connection through Reverse Proxy
      • Additional Requirements for Oracle Databases as Backend
      • Additional Requirements for MySQL Databases as Backend
      • Validate CORS Header
      • Validate I/O Storage Performance
    • Installation
      • Docker Security Runtime
      • Checklist - Simplifier Installation
      • Cluster Mode
      • Docker Image Configuration
      • Configure Proxy Settings
      • On Premise
        • General Requirements for On-Premise-Installations
        • Installing Simplifier MAKERS CHOICE
        • Installing Simplifier LTS
        • Oracle Database Setup
        • Setting up custom certificates for transport system
      • AWS
        • Install via AWS Marketplace
        • High Availability and High Performance Cluster (Horizontal Scaling)
      • Azure
        • Install via Azure Marketplace
      • Simplifier Cloud
        • Simplifier Cloud SLA
          • Simplifier Cloud SLA 1.2
          • Simplifier Cloud SLA 1.1
        • Checklist - Your System Integration
        • Cloud Security
        • Operation Models
          • Hosting Models until 25-03-31
          • Hosting Models until 23-05-01
        • Cloud FAQ
        • Data Centers of Simplifier Cloud
        • Backups
        • ISO Certificates and Audits
      • SAP BTP
    • Quality Update
      • Update via docker compose
      • Automatic Update
    • Upgrade to next MAKERS CHOICE or LTS
      • Upgrade from MC 25-03 to MC 25-05
      • Upgrade from Release 9 to MC 25-05
      • Upgrade from Release 8 to Simplifier 9 LTS
      • Upgrade from Release 8 EHP 4 to Simplifier 9 LTS
    • User Management
      • User Overview - Create a new user
      • Reset Passwords
      • Enable Multi-Factor-Authentication (MFA/2FA)
      • Role Overview
        • Restrict Roles Assignment
      • Group Overview
      • QR Login-Generator
      • Permissions
        • Permission Overview
    • Security
      • Mobile Security
      • Overview
      • Basic Protection of Internet Access
      • Secure Simplifier API
      • Implementation of Web Application Firewalls
      • Operation Best Practice - Public Access
      • Authentication for Web Applications
      • Access Control for Web Applications
      • Secure Session Management
      • Controlled Integration of Data and Content into Web Applications
      • Logging of security-relevant Events of Web Applications
      • Protection against Unauthorized Automated Usage of Web Applications
      • Protection against SQL Injection
      • Security Team (ISIRT)
    • Setup external Identity Provider
      • Using OAuth for authorization on Google
      • SAML and SAP Single Sign-On over SOAP
      • SAP SSO via SNC and Identity Provider
      • Troubleshoot SAP SSO via SNC
      • Setup Principal Propagation for SAP BTP
      • Using OAuth for authorization on Azure / Entra ID
      • Configure SAML Setup with Azure AD / EntraID
      • Using OpenID Connect for authorization in SAP BTP
    • Settings
      • Server Settings
      • Security
      • License
      • Authentication
        • Project Permissions
        • LDAP
        • SAP Single Sign On via SOAP
          • Checklist SAP SSO over SOAP
        • SAP Single Sign On via RFC
        • Active Directory
        • Open Authorization (OAuth)
          • Using OAuth for authorization on Amazon
        • Security Assertion Markup Language (SAML)
          • Using SAML with Google - G Suite
          • Using SAML with Microsoft ADFS
        • User Details Mapping
        • User Attributes Synchronization
        • User Roles Synchronization
        • Test Authentication
      • Messages
      • Log
      • Server Environment
      • SAP Security
      • New Features
      • Workflow Monitoring
      • Native Settings (include.conf)
    • Archiving
      • Archiving Workflow Logs
  • Release Notes
    • Release Notes MAKERS CHOICE 25-05
    • Pre-Release Notes 10
    • Release Notes 9
    • Release Notes Mobile Client
    • Archive MAKERS CHOICE
      • Release Notes MAKERS CHOICE 25-03
      • Release Notes MAKERS CHOICE 25-01
      • Release Notes MAKERS CHOICE 24-11
      • Release 8 Enhancement Package 4 (EHP4)
      • Release 8 Enhancement Package 3 (EHP3)
      • Release 8 Enhancement Package 2 (EHP2)
      • Release 8 Enhancement Package 1 (EHP1)
    • Archive Long Term Support
      • Release Notes 8
      • Release 7 Enhancement Package 1 (EHP1)
      • Release Notes 7.0
      • Release Notes 6.5
      • Release Notes 6.0
      • Release Notes 5.5
      • Release Notes 5.0
      • Release Notes 4.5
      • Release Notes 4.0
      • Release Notes 3.5
      • Release Notes 3.0
      • Release Notes 2.5
      • Release Notes 2.0

Design Screen

2114 views 1 Updated on May 28, 2025

Add Widgets to the Screen

To fill your screen with UI elements like text fields, charts or action buttons, use the widget or the widget group panel on the left side. First, select the OpenUI5 version.

Via the filter, only the compatible widgets matching the stored UI5 version of the application are displayed.

Search for a specific widget or widget group using the name or just browse the list, then add the it to the screen via the plus icon or drag and drop it into the tree or the preview. The widget or widget group will appear in the content area of the selected screen.

Sort Widgets in the right order

Use the arrow keys to structure the widgets in the screen content tree into a hierarchy. Alternatively use WASD on your keyboard or drag and drop the widgets or widget groups.

You can also use the arrow keys to structure the widgets in the screen content tree into a hierarchy, or alternatively use WASD on your keyboard (the widget needs to be selected).

W or moves the widget upwards
A or de-nests the widget
S or moves the widget downwards
D or nests the widget underneath the one above (if possible)

With the arrow keys on your keyboard, you can navigate through the screen content tree as follows:

Up ↑ Navigates up
Down ↓ Navigates down
Right → Opens the currently selected tree item (if possible)
Left ← Closes the currently selected tree item (if possible)

Copy Widgets within the Screen Content

You can copy Widgets and insert them on a different Screen or even another Application. For that, use the Copy, Cut and Paste function.

Edit Widget Properties

Every widget has properties to configure how the widget behaves. In the following example the properties of a button widget are shown.

Every widget has properties to configure how the widget behaves.

On the left are an example of the properties of a button widget.

 

Icon Explorer

Use the icon explorer to add icons to widgets that have an image or icon as property.
You can also add a font to an application that contains icons to use in the icon explorer. Images uploaded under Assets can also be selected.

 

Client Validation of Default Properties

The data type of default properties in application items can now be overwritten, but only domain types with the same basic type can be used.

 

You can find the settings in the Properties panel of the UI Designer. The button opens a popover, which lets you define the data type and the validation event. If the validation is enabled (checkbox), an indicator will be displayed. You can change the valueState and valueStateText as result.

In this example, we wanted to make sure, that the input field will be filled with the correct data, an Email Address. Therefore we added the validation for the predefined Datatype “Email” on the change Event.

Tags:Intermediate (202)
Related Articles
  • Release Cycle
  • Release Notes 9
  • Release Notes MAKERS CHOICE 25-03
  • Pre-Release Notes 10
  • Form Assistant
  • Translate Workflows
Previous
Manage Screens
Next
Assets

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.