UI Designer Overview

In this article, we are going to learn about UI Designer.

The UI Designer is actually installed by default when you install the Studio. So no need to install separately. And we can launch it from the Studio and It provides drag and drop capabilities. There is a lot of very easy ways to edit properties of different things in the UI, so it is a really good tool.

[pullquote]     The UI Designer is an in-house-built graphical tool for designing floorplans. Floorplans are the actual screens, and we refer it as floorplans.[/pullquote]

What can you do in the UI designer?

1. Model custom floorplans: You can modify the screens that you have created in the studio
2. Modify SAP floorplans: You can modify SAP floorplans which are also called as Standard floorplans
3. Adapt floorplans for mobile devices: You can modify floorplans for use on a mobile device.

In our upcoming article, we will learn these topics clearly.

UI designer looks like:

Overview of the UI Designer

[pullquote]    The bottom left is the main part of the UI Designer.[/pullquote]

The UI designer contains a number of different tools and functions that you can access from the menu or on tabs at the bottom of the UI designer screen.

The bottom left has the following tabs:

1. Designer: To design the user interface of an application with the available panes and controls from the Toolbox.
2. Data Model: To bind the user interface elements to a business object element.
3. Controller: To define the interaction between user interface components by creating event handlers, interfaces, navigation, and queries.
4. Preview: To preview the changes made to a user interface component, for example, a floorplan.

Here you can learn the overview of the common features available in the user interface designer (UI designer) to design the user interface.

Menus:

File Menu

1. Close: Closes a user interface component.
2. Save: Saves a user interface component in the repository.
3. Save All: Saves all the user interface components that are being edited.
4. Activate: Activates a user interface component, so that the model is available to all users who are accessing the repository.
5. Exit: Exits the UI designer.

View Menu

1. BO Browser/Data Model
   The BO Browser appears in different places in the UI designer. The Data Model tab stores the actual data model of the floorplan, and how it ties the elements of the floorplan itself to a business object.There are different colors are used to identify the binding status.
   1. Blue Indicates an internal data model element. These are used internally for different purposes.
   2. Yellow Indicates an unbound data model element. Data binding has not yet been specified for this element.
   3.  Green Indicates a bound data model element. Valid data binding has been specified for the particular element.
   4. Red Indicates a data model element for which the data binding has to be corrected.
2. Property Explorer
   1. It allows you to view and change properties for each element in the user interface model.
   2. You can edit a few properties, and some are read-only.
3. Toolbox
   1. The Toolbox provides the panes and controls that can be used to design the layout of a user interface component in the Designer tab.
4. Output Window
   1. The Output Window gives an overview of all the changes made to the floorplan that is currently open.

1. OBN Explorer
   1. The OBN Explorer will provide information about the operations, target floorplans and the inports configured in a particular BO.

1. Extensibility Explorer
   1.  The Extensibility Explorer is used to modify floorplans that come from layer lower than the layer the user is working on. Mostly, we are going to use this option for Standard Screens.

Tools Menu

1. Update Metadata: Updates the backend metadata information in the active component.
2. Options… Allows the user to personalize the debug and warning message settings.

Important Toolbar Options:

1. Save and Activate
   Save your changes and implement them using activate.
2. Display Edit
   Changes your view from a display to a view where you can edit what you want.
3. Add FlexLayoutColumn
   Allows you to add an extra column where you can add fields.
4. Run
   Runs the component after it has been activated in the front-end system.

we have seen an overview of UI Designer, and in the next unit, we will learn how to design the screens. Don’t forget to subscribe and leave your comment.