Add additional annotations to show filter fields and columns on the list report as well as to allow the selection of data using a value help.
Open all Close all Create metadata extension file for travel entityWhenever your unique suffix for creating objects is needed, the object names within this tutorial are named with suffix “######”. For the screenshots, the suffix “000100” was used.
In the CDS files of your RAP-based service you can add annotations to refine the user interface. These CDS annotations will be translated into OData annotations used by SAP Fiori elements to generate the UIs. UI annotations are stored within metadata extension files to separate them from the CDS view structure for better reading.
Annotations controlling the UI can be stored in metadata extension files. In this section such a file will be created for the Travel entity and a first annotation will be added. Right click the ZC_FE_TRAVEL_###### projection view for the Travel entity to open the context menu. Choose New Metadata Extension.
Enter the name of your metadata extension file. Choose the same name as your projection view file name ZC_FE_TRAVEL_###### and enter a description as well. Choose Next.
A transport request is already assigned to the metadata extension file. Choose Finish to confirm the creation of the file.
Now open the new metadata extension file ZC_FE_TRAVEL_###### within the Metadata Extensions folder. To show a first column within the list report table, add the content shown in the coding example below. You can use code completion by pressing CTRL-SPACE at the related coding positions, e.g. when adding the @UI.lineItem annotation, just type @UI and then press CTRL-SPACE to choose the entry from the list of proposals.
@Metadata.layer: #CORE annotate view ZC_FE_TRAVEL_###### with < @UI.lineItem: [< position: 10 >] TravelID; > To finish this step, choose Save and Activate to take over the changes in your metadata extensions file.
Check your changes by refreshing of your real application preview in BAS or use the quick service preview in ADT. Choose Go to load the data.
You will now see the column Travel ID made visible on the list report table by the @UI.lineItem annotation added to the metadata extensions file. The data shown in the column is loaded from the database with the request triggered by the Go button.
To see some more data on the list report you are now adding more columns to the table, and to simplify the selection of data you will add filter fields to the filter bar. Please open the metadata extensions file ZC_FE_TRAVEL_###### located in folder Core Data Services > Metadata Extensions . Now add the fields with the corresponding lineItem annotations to the metadata extensions file as shown in the code fragment below. The property position controls the order of the columns within the list report table.
@UI.lineItem: [< position: 20 >] AgencyID; @UI.lineItem: [< position: 30 >] CustomerID; @UI.lineItem: [< position: 40 >] BeginDate; @UI.lineItem: [< position: 50 >] EndDate; @UI.lineItem: [< position: 60 >] BookingFee; @UI.lineItem: [< position: 70 >] TotalPrice; @UI.lineItem: [< position: 80 >] OverallStatus; @UI.lineItem: [< position: 90 >] LocalLastChangedAt; As a result, after saving and activating the metadata extensions file and then refreshing the preview of your application, you will see the additional columns shown in the list report table.
Note: The default table type of a list report is the responsive table. If you reduce the size of your browser window, some columns will disappear and an action Show Details appears in the table toolbar (as of SAPUI5 version 1.90). If you use the property importance: #HIGH in your lineItem annotation, you can make sure that the information of the column will be shown independently of the browser window size.
To assign specific fields to the filter bar you will use the selectionField annotation. Add this annotation to the three existing fields AgencyID , CustomerID and OverallStatus as shown in the coding example below.
@UI.lineItem: [< position: 20 >] @UI.selectionField: [< position: 10 >] AgencyID; @UI.lineItem: [< position: 30 >] @UI.selectionField: [< position: 20 >] CustomerID; @UI.lineItem: [< position: 80 >] @UI.selectionField: [< position: 30 >] OverallStatus; Again save and activate the file and refresh the application to see the changes on the UI. You can now filter the data loaded into the list report by specifying values for these additional selection fields.
Now the list report table will be sorted by the last updated travel records and also the number of records available in the database will be made visible. To achieve this, add header information to the metadata extensions file right above the view annotation:
@Metadata.layer: #CORE @UI: < headerInfo: < typeName: 'Travel', typeNamePlural: 'Travels' >, presentationVariant: [< sortOrder: [< by: 'LocalLastChangedAt', direction: #DESC >], visualizations: [< type: #AS_LINEITEM >] >] > annotate view ZC_FE_TRAVEL_###### with < . The @UI.headerInfo annotation contains information about the naming of the main entity in singular and plural format and it shows the number of records available in the database in the table title. The table title is determined by the typeNamePlural property. The @UI.presentationVariant annotation controls the sorting of the table by field LocalLastChangedAt via sortOrder property. The visualizations property determines that the sorting is applied to the list report table. Save and activate the metadata extensions file and refresh the application preview to see the result on the UI.
Instead of showing IDs for the fields Travel ID, Agency ID and Customer ID, one would preferably show descriptions or names. Additionally, some labels of specific fields will be changed globally to make the new label accessible wherever the fields are used on the list report or object page. You will achieve this by using specific annotations which are implemented within the projection view ZC_FE_TRAVEL_###### . Therefore, open the projection view located in folder Core Data Services > Data Definitions which contains the root view definitions for the Travel entity.
Add the @EndUserText and @ObjectModel annotations to the fields as shown in the coding fragments below. Annotation @EndUserText.label defines the column label for the related fields. @ObjectModel.text.element controls the source of the content shown for the related field. For field TravelID this will be the Description field from this view. AgencyID and CustomerID will get their content from the related field through the corresponding association.
@EndUserText.label: 'Travel' @ObjectModel.text.element: [ 'Description' ] TravelID, @EndUserText.label: 'Agency' @ObjectModel.text.element: ['AgencyName'] AgencyID, _Agency.Name as AgencyName, @EndUserText.label: 'Customer' @ObjectModel.text.element: ['LastName'] CustomerID, _Customer.LastName as LastName, @EndUserText.label: 'Status' OverallStatus, @EndUserText.label: 'Last Changed At' LocalLastChangedAt, The semantic key for the view will be TravelID . The content of the field will be highlighted, and the draft indicator will be shown while the Travel item is being worked on. Add the corresponding annotation @ObjectModel.semanticKey before the definition of the view.
. @Search.searchable: true @ObjectModel.semanticKey: ['TravelID'] define root view entity ZC_FE_TRAVEL_###### . After saving and activating the file and refreshing the application, you will see the changed labels and content for the fields Travel, Agency, Customer, Status and Last Changed At.
