ENHANCING THE ANNOTATION

UI.LineItem annotations in CDS Views

UI.LineItem is used to show a list of products when the application starts.

This can be done by specifying in the CDS view, before each field we
want to see in the grid, the position where we want to see it and its
importance.
 Steps to add UI.LineItem annotations to CDS Views :-

1 Open first SAP Web IDE and open the existing annotation file with the
AM. In this way we can check step by step how the annotation changes
 2 Open Eclipse
3 Open the CDS view Z_SAMPLE_DEMO_PRODUCTS and
change the code to be the following

4 Save and activate

 5 If you refresh the annotation file in SAP Web IDE you should see that a
new UI.LineItem annotation term has been added to it in disabled mode,
because its coming directly from the server
 5 Lets add now some selection fields: we want to use them to filter records
in the application. The annotation term we need to add
is UI.SelectionField and since we want to filter by ProductID and Category,
we need to add it just before these two fields in the view, like the following
6 SAVE AND ACTIVATE. REFRESHING THE ANNOTATION,
NOW YOU SHOULD SEE THIS
7 We can make this view a little bit more complex by adding
the UI.Identification term. This can be done at the same way we did
for the the UI.Lineitem. The view becomes:
8 SAVE AND ACTIVATE. THE ANNOTATION IN THE AM SHOULD
SHOW NOW THIS NEW UI.IDENTIFICATION TERM
 9 UI.Statusinfo to show the creation and the change
dates at the end of the view
Products.dimensionunit as DimUnit,
@UI: {

statusInfo: {position: 10, importance: #MEDIUM} }

Products.creationdatetime as CreatedAt,
@UI: {
statusInfo: {position: 20, importance: #MEDIUM}
}
Products.lastchangeddatetime as ChangedAt,

concat(concat(/webapp/images/,Products.product),.jpg) as PictureUrl,
Products.supplieruuid,
_SOItems

}
10 save and activate. The UI.Statusinfo has been
successfully added:
11 UI.Datapoint terms in order to show the price and the tax code
_Supplier.businesspartner as SupplierID,
_Supplier.companyname as SupplierName,
@UI: {
dataPoint: { title: TaxCode } }
Products.productvalueaddedtax as TaxTarifCode,
Products.productbaseunit as MeasureUnit,
Products.weight as WeightMeasure,
Products.weightunit as WeightUnit,
Products.currency as CurrencyCode,
@UI: { identification: {position: 60, importance: #HIGH},
lineItem: {position: 50, importance: #HIGH},
dataPoint: { title: Price } }
Products.price as Price,
12 SAVE AND ACTIVATE. HERE ITS THE NEW
ANNOTATION FILE
Adding UI.Fieldgroup annotations
UI.FieldGroup terms will help us to show Technical Data
information about the product in the ObjectPage
The code for UI.FieldGroup Annotation :-
14 save and activate. This is how the annotation appears now
Lastly, adding UI.Lineitem annotation even for sales
order line items
Open in Eclipse the view Z_SAMPLE_DEMO_SOLI and add the annotation in
this way:
17 lets run the application now and check what we
have done so far
 18 The application looks quite promising. We still cannot see the buttons
for creating, updating and deleting records. This can be achieved by adding
the following @ObjectModel annotation to the beginning of
the Z_SAMPLE_DEMO_PRODUCTS view:
19 SAVE AND ACTIVATE. NOW THE APPLICATION
LOOKS LIKE THIS:
20 for products pictures we need to add to the web
app folder a subfolder named images containing all the
images named as the products
21 THE APPLICATION LOOKS LIKE THIS
 Adding UI.Header facet
For example we can add a UI.HeaderFacet term containing
3 UI.ReferenceFacets and a UI.Facet containing a UI.CollectionFacet with
2 UI.ReferenceFacets within and another UI.ReferenceFacet
24 RUNNING THE APPLICATION YOU SHOULD GET
SOMETHING LIKE THIS: