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
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: