Layouts and Floorplans

Fiori Elements supports multiple floorplans. See the Fiori Design Guidelines for details: https://experience.sap.com/fiori-design-web/floorplan-overview/.

The most relevant floorplans for RAP are:

• Overview Page
• List Report
• Worklist
• Analytical List Page
• Object Page

Without Fiori Tools the two bolded floorplans (List Report and Object Page) are the ones you can use with RAP.

Example and demo for the UI5 documentation

https://sapui5.hana.ondemand.com/sdk/#/topic/214dc25fb47f42c6a0091dfe71e87950

Value Helps

Every input field can have a value help (also for search fields). A value help is usually based on a CDS view that provides the lookup data.

You connect the field to the value help using the field annotation:

@Consumption.valueHelpDefinition.entity: { Name : <CDS View>, 
																					 Element: <FieldName> }

The value-help CDS view can read from any table and can be implemented as a CDS Table Function using SQLScript if needed.

A frequent scenario is using the table DD07T (domain fixed values). You can reference it directly.

More complex value helps are implemented with the additionalBinding where you can bind multiple fields so the UI values restrict the value help.

Multi-line long text fields

Use @UI.multiLineText: true for long text areas.

@UI.multiLineText: true

More info

List Report Features

• Search fields for individual columns and a fuzzy search field for multiple columns
• Column personalization
• Header area

List Report Annotations

The annotation @UI.lineItem defines that a field is displayed as a column in a table. Usually position is provided.

@UI.lineItem: [ { position: 30 ,         
									label: 'Bearbeiter' ,
									importance: #HIGH
									} ]  
Assignee,

@ObjectModel.text.element connects an identifier element with its language-independent descriptive texts.

@ObjectModel.text.element: [ 'Name' ]
key user_id       as UserId,

Annotations for selection fields (Filters)

Filter

Users can personalize filter fields in a List Report. If you use the annotation @UI.selectionField you can define default filter fields. Again, position must be provided.

@UI.selectionField: [ { position: 10, 
												label: 'Aufgabenstatus',
												exclude: true } ]
Status,

Object Page Layout

Object Pages - Facet example

Define a facet group:

@UI.facet: [ { label: 'Task Info', 
							 purpose: #STANDARD, 
							 type: #FIELDGROUP_REFERENCE,
							 targetQualifier: 'TaskInfo' }]

Assign fields to the group

@UI.fieldGroup: [ { importance: #HIGH, 
										position: 10, 
										qualifier: 'TaskInfo' } ]                    
@UI.lineItem: [{ position: 10 }]
@UI.identification: [{ position: 10 }]
		TaskKey;

Groups on the Object Page

Define groups

	@UI.facet: [ {    id: 'Details',
										purpose: #STANDARD ,
										type:     #FIELDGROUP_REFERENCE,
										label: 'Details',
										position: 20 ,
										targetQualifier: 'Details'}  ]

Assign fields

	@UI.fieldGroup: [ { qualifier: 'Details' ,
											position: 20 }]
	Name;

Service Definitions

• Service Definitions determine which Business Objects are exposed by the service. With aliases you can present nicer external names for technical objects.

@EndUserText.label: 'Task Management'
DEFINE SERVICE zbc_tm {
	EXPOSE zc_users AS Users;
	EXPOSE zc_tasks AS Tasks;
}

/n/IWFND/MAINT_SERVICE (1)

Add a service:

Search for the binding: