Generating and Adapting Screens

In this lesson, we will create screens for our custom business object and adapt them to our needs.

This involves two steps:

1. Screen generation for a business object is executed from the Developer Desktop
2. Adapting the screens is carried out in the UI Designer per screen

Creating screens for a business object is very straightforward. The studio will add controls for all header fields based on their data types and will even include their labels, provided you have maintained them in the business object definition. This serves as a good starting point and additional controls can be added, or existing ones modified, using the UI Designer.

The following video demonstrates how to generate the typical set of screens for our business object, including a working navigation between those screens (Thing-Based Navigation):

As we have seen in the video, single screen creation provides an alternative to a scenario with the full set of screens. This can be helpful if you don’t need the full set of screens.

In our case, it makes sense to use the full screen scenario, since it includes a new work center, object work list, and so on.

After the screens have been generated, they appear in the Project Explorer next to the business object. From there, you can open a screen in the UI Designer with a double-click or by right-clicking and choosing "Open in UI Designer" from the context menu. Furthermore, the context menu allows you to preview screens from the Developer Desktop without starting the UI Designer.

In the following chapters, we will carry out some basic adaptations on the Quick Create (QC), the Thing Inspector (TI), and the Object Work List (OWL) screens.

The Quick Create screen is used to create a new instance of our business object. This kind of screen therefore usually concentrates on the most important fields of the business object. Further details can be entered on the Thing Inspector screen that is shown after the user has selected "Save and Open".

The video below shows some basic actions of the UI Designer, like switching between Display and Edit mode, Save and Activate, or opening the screen for preview. And of course, the adaptations that we want to apply combined with previewing the screen before and after the changes.

The following modifications are performed:

• Step 1: Adapt Screen Title
• Step 2: Implement Account OVS
• Step 3: Implement Contract Owner OVS

The Thing Inspector is the most relevant screen for editing business objects. It provides access to all relevant details of a business object, spread across the header section and several tabs.

Notes and Attachments Tab

In the next step, we will add controls that allow maintenance of notes and attachments in our business object. Notes and attachments are dependent objects referenced by our business object. Consequently, the user interface for accessing these referenced objects displays not merely a field, but an embedded component.

The following video shows how to add embedded components to the screen and bind them correctly, so that they work with our business object:

• Step 1: Add Attachment Embedded Component
• Step 2: Add Notes Embedded Component

The hardest part of this step was probably to determine what TextTypeCode can be used. This is an excellent opportunity to use the Repository Explorer and have a closer look at the DataTypes tab. The full name of the code’s data type is TextCollectionTextTypeCode.

More information about Notes fields and the dependent object TextCollection behind them can be found in the documentation: Dependent Object (Business Object).

Besides typical TextTypeCodes, the documentation also provides further details on the different kind of note fields that support multiple texts, different languages, and so on.

So far, we have adapted the Quick Create and Thing Inspector screens and previewed the changes by opening the screens directly from the studio. Usually, users navigate to the work center where they see the object work list and can either create a new instance or edit an existing instance from the list.

The New button that brings the user to the Quick Create screen is not by default part of the generated OWL screen. We need to add it. For previewing the OWL, it is important we assign appropriate access rights to the test user. This is important for business and developer users. Without access rights to the work center of our custom BO, the links to the Thing Inspector and to the Quick Create will not work. The New button and the link in the Contract ID column would be grayed out.

In the video below, we will add a New button to the OWL and assign access rights to our user, which is a prerequisite to preview all features of the OWL.

That concludes the main part of the screen adaptation demonstrations. Further small adjustments will be applied while implementing scripts in the next lesson.