Creating a Fiori OVP Application with CDS view annotations – Part 3
In this blog we will add some additional OVP Cards to the application we created in the previous two blogs. If you haven’t already done so, please review the first two blogs of the series, which can be found at
Creating a Fiori OVP Application with CDS view annotations – Part 1
Creating a Fiori OVP Application with CDS view annotations – Part 2
ADDING A STACK CARD TO THE OVP APPLICATION
The stack card relies on the annotations defined by @UI.headerInfo, @UI.identification and @UI.fieldGroup. Using the headerInfo annotation allows us to define a typeName which will be shown as the card header, as well as a title and header. In addition you can also utilize the annotation @UI.headerInfo.imageUrl to display an image next to the title and description. For the image, I will just hard card a value there, field mytestImg, due to the view not having a image field at this level.
These assignments will be as follows
@UI.headerInfo: {
typeNamePlural: 'Sales Orders',
imageUrl: 'mytestImg',
typeName: 'Sales Order',
title: {
label: 'Order ID',
value: 'sales_order_id'
},
description: {
label: 'Customer',
value: 'company_name'
}
}
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
....
'/resources/sap/ui/core/mimes/logo/sap_50x26.png' as mytestImg,
The stack card has two clickable areas. The left side of the card, the white can be used to navigate to another app using semantic navigation. Clicking the right side will open up the card view. To assign the left side of the card’s navigation point we will utilize the @UI.identification annotation as follows. This will also display within each card with the position identifying the layout.
@UI.identification: {type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample2', label: 'Nav Sample', position: '10'}
We can also add another button in each card using the same annotation. For this we can utilize the web_address field as the navigation path.
@UI.identification: {type: #WITH_URL, label: 'Customer Site', url: 'web_address', position: '20'}
so.customer.web_address
Finally, we can define a fieldGroup to display some additional data in each card, but to utilize this we will have to add some additional local annotations in our Web IDE OVP application. We can do this by utilizing the Annotation Modeler of Web IDE, but lets first save and activate the CDS View.
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Email', position: '10', qualifier: 'cusContact'}
so.customer.email_address,
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Phone', position: '20', qualifier: 'cusContact'}
so.customer.phone_number,
The result of our changes necessary for our stack card should yield
@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
@UI.headerInfo: {
typeNamePlural: 'Sales Orders',
imageUrl: 'mytestImg',
typeName: 'Sales Order',
title: {
label: 'Order ID',
value: 'sales_order_id'
},
description: {
label: 'Customer',
value: 'company_name'
}
}
define view Z_Ovp_Demo as select from sepm_cds_sales_order as so {
key so.sales_order_key,
@UI.selectionField: [ { position: 10 } ]
@Consumption.semanticObject: 'Action'
@UI.identification: {type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample2', label: 'Nav Sample', position: '10'}
@UI.lineItem: [{ label: 'salesOrd', qualifier:'ordOverView',type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample'},
{ position: 10, qualifier:'ordOverView', label: 'Sales Order'}]
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
so.gross_amount,
@UI.dataPoint: {title: 'Net Amt',
criticalityCalculation: {
improvementDirection: #TARGET,
deviationRangeLowValue: 100,
toleranceRangeLowValue: 400,
toleranceRangeHighValue: 800,
deviationRangeHighValue: 1200
},
valueFormat:{
numberOfFractionalDigits: 1
}}
@UI.lineItem: { position: 30, qualifier:'ordOverView', label: 'Net Amount', type: #AS_DATAPOINT}
so.net_amount,
@UI.dataPoint: {title: 'Tax Amt', valueFormat:{
numberOfFractionalDigits: 1
}}
@UI.lineItem: { position: 40, qualifier:'ordOverView', label: 'Tax Amount', type: #AS_DATAPOINT}
so.tax_amount,
@UI.dataPoint: {title: 'Lifecycle'}
@UI.lineItem: { position: 50, qualifier:'ordOverView', label: 'Lifecycle', type: #AS_DATAPOINT}
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
/* Associations */
so.customer,
so.items,
@UI.selectionField: [ { position: 20 } ]
@UI.lineItem: { position: 20, qualifier:'ordOverView', label: 'Customer', }
so.customer.company_name,
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Email', position: '10', qualifier: 'cusContact'}
so.customer.email_address,
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Phone', position: '20', qualifier: 'cusContact'}
so.customer.phone_number,
@UI.identification: {type: #WITH_URL, label: 'Customer Site', url: 'web_address', position: '20'}
so.customer.web_address
'/resources/sap/ui/core/mimes/logo/sap_50x26.png' as mytestImg,
}
After saving and activating the CDS view changes we can now add the Stack Card to the application. In your OVP Application add a Stack Card as shown
This will yield the card
The card has two clickable areas, the white area and also the blue area. Clicking on the white area relies on the first @UI.identification and clicking on the blue area which opens the cards results in
Choosing the Customer Site button will navigate us to the url provided by the field web_address and the Nav Sample button we take us to a predefined navigation sample app.
Adding the Field Group
To utilize the field group, it’s necessary to add some additional annotations utilizing the Annotation Modeler. To do this let’s first right click on the Web IDE project’s webapp folder and choose New -> folder and name it annotations. Now right click on the annotations folder and choose New -> Annotation File and provide the values
choose Next and Finish to complete the process. In addition to creating the file, this process will add an additional entry in the manifest.json declaring a local annotation. Right click on the new annotation file and choose Open With -> Annotation Modeler. When the editor opens, choose the Annotate button next to the OData Entity Set.
Select the node Local Annotations and then choose the add button under actions.
Choose the annotation UI.Facets and choose OK.
Now with the Facet annotation selected, choose the add button and add a ReferenceFacet to it.
Finally assign the fieldGroup to the ReferenceFacet by setting the Annotation property to the FieldGroup Qualifier cusContact and Save your changes.
After refreshing your app your stack card should now look like
ADDING A CHART CARD TO THE OVP APPLICATION
OVP applications have the ability to show numerous types of analytical charts. In this example we will add a line chart, but the procedure is the same form any type of chart card. CDS views provide the annotation @UI.chart which contain the majority of the information related to the card. To adjust the displayeddata we can also utilize the annotation @UI.presentationVariant, which allows grouping and sorting or data, and the annotation @UI.selectionVariant, which allows filtering of data. Additionally, the annotation @UI.dataPoint is available to display a KPI value in the card header as well as the annotation @UI.identification to define a navigation path.
In our CDS view lets first define a line chart as follows in the view area.
@UI.chart:[{
qualifier: 'ordNetChart',
title:'Order Net Amount',
chartType: #LINE,
dimensions: ['sales_order_id'],
measures: ['net_amount', 'tax_amount'],
dimensionAttributes: {dimension: 'sales_order_id', role:#SERIES},
measureAttributes: [{measure: 'net_amount', role: #AXIS_1}, {measure: 'tax_amount', role: #AXIS_1}]
}]
To limit the amount of data we see in our chart we can utilize the presentation variant annotation which we can use to sort the data in addition to limiting the results returned. This is also a view level annotation so we can add it under our chart.
@UI.presentationVariant: [{qualifier: 'top5Changed', maxItems: '5', sortOrder.by: 'changed_at', sortOrder.direction: #DESC }]n: #DESC }]
For the example we can define a static field myTarget which we used to display in the KPI header area using the @UI.dataPoint annotation.
@UI.dataPoint:{title: 'Order Target Value', criticalityCalculation: {
improvementDirection: #MAXIMIZE,
toleranceRangeLowValue: 8000,
deviationRangeLowValue: 9000} }
10000.00 as myTarget,
The resulting CDS view should now be
@AbapCatalog.sqlViewName: 'zovpdemo'
@AbapCatalog.compiler.compareFilter: true
@AccessControl.authorizationCheck: #CHECK
@EndUserText.label: 'OVP Demo App'
@OData.publish: true
@UI.headerInfo: {
typeNamePlural: 'Sales Orders',
imageUrl: 'mytestImg',
typeName: 'Sales Order',
title: {
label: 'Order ID',
value: 'sales_order_id'
},
description: {
label: 'Customer',
value: 'company_name'
}
}
@UI.chart:[{
qualifier: 'ordNetChart',
title:'Order Net Amount',
chartType: #LINE,
dimensions: ['sales_order_id'],
measures: ['net_amount', 'tax_amount'],
dimensionAttributes: {dimension: 'sales_order_id', role:#SERIES},
measureAttributes: [{measure: 'net_amount', role: #AXIS_1}, {measure: 'tax_amount', role: #AXIS_1}]
}]
@UI.presentationVariant: [{qualifier: 'top5Changed', maxItems: '5', sortOrder.by: 'changed_at', sortOrder.direction: #DESC }]
define view Z_Ovp_Demo
as select from sepm_cds_sales_order as so
{
key so.sales_order_key,
@Consumption.semanticObject: 'Action'
@UI.identification: {type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample2', label: 'Nav Sample', position: '10'}
@UI.lineItem: [{ label: 'salesOrd', qualifier:'ordOverView',type: #FOR_INTENT_BASED_NAVIGATION, semanticObjectAction: 'toappnavsample'},
{ position: 10, qualifier:'ordOverView', label: 'Sales Order'}]
@UI.selectionField: [ { position: '10' } ]
so.sales_order_id,
so.created_by,
so.created_at,
so.changed_by,
so.changed_at,
so.note_guid,
so.currency_code,
'/resources/sap/ui/core/mimes/logo/sap_50x26.png' as mytestImg,
@UI.dataPoint:{title: 'For Charts', referencePeriod.end: 'created_at', criticalityCalculation: {
improvementDirection: #MAXIMIZE,
toleranceRangeLowValue: 1000,
deviationRangeLowValue: 4000}}
so.gross_amount,
@UI.dataPoint:{title: 'Order Target Value', criticalityCalculation: {
improvementDirection: #MAXIMIZE,
toleranceRangeLowValue: 8000,
deviationRangeLowValue: 9000} }
10000.00 as myTarget,
@UI.dataPoint: {title: 'Net Amt',
criticalityCalculation: {
improvementDirection: #TARGET,
deviationRangeLowValue: 100,
toleranceRangeLowValue: 400,
toleranceRangeHighValue: 800,
deviationRangeHighValue: 1200
},
valueFormat:{
numberOfFractionalDigits: 1
}}
@UI.lineItem: [{ position: 30, qualifier:'ordOverView', label: 'Net Amount', type: #AS_DATAPOINT},{qualifier: 'chartLineItem'}]
so.net_amount,
@UI.dataPoint: {title: 'Tax Amt', valueFormat:{
numberOfFractionalDigits: 1
}}
@UI.lineItem: { position: 40, qualifier:'ordOverView', label: 'Tax Amount', type: #AS_DATAPOINT}
so.tax_amount,
@UI.dataPoint: {title: 'Lifecycle'}
@UI.lineItem: { position: 50, qualifier:'ordOverView', label: 'Lifecycle', type: #AS_DATAPOINT}
so.lifecycle_status,
so.billing_status,
so.delivery_status,
so.buyer_guid,
/* Associations */
so.customer,
so.items,
@UI.lineItem: { position: 20, qualifier:'ordOverView', label: 'Customer' }
@UI.selectionField: [ { position: '20' } ]
@UI.identification: [{label: 'Customer', position: '10'}]
so.customer.company_name,
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Email', position: '10', qualifier: 'cusContact'}
so.customer.email_address,
@UI.fieldGroup: {groupLabel: 'Contact Details', label: 'Phone', position: '20', qualifier: 'cusContact'}
so.customer.phone_number,
@UI.identification: {type: #WITH_URL, label: 'Customer Site', url: 'web_address', position: '20'}
so.customer.web_address
}
After saving and activating the CDS view add another card to define a Line Chart. Define the card as
The should result in the card
Hi,
I am trying to build a LINE chart following the above blog. But i am facing the below error.
Can you please help me in resolving the issue.
CDS View:-
WEB IDE Manifest.json
Error Screenshot:-
After debugging further i understand that the below is the place where it fails. Can you please tell me what are the possible cases this could happen.
Regards,
Lokesh.
V comes as undefined and it goes to error log.
When you activate the view in eclipse are you seeing any errors? Do the annotation marked in red come up in auto complete? What version of Netweaver are you using?
Regards,
Jamie
Hi Jamie,
Thank you very much for helping on this issue.
@UI.chart: [{
qualifier: '',
title: '',
description: '',
chartType: ,
dimensions: [ '' ] ,
measures: [ '' ]
}]
I dont get @UI.presentationVariant in the auto complete at all.
3.What version of Netweaver are you using?
We are on SAP Netweaver Version 750 SP01.
Regards,
Lokesh.
I can see for that the annotation @UI.presentationVariant requires 7.50 SP4. I do not see the others but would assume the same.
Regards,
Jamie
Hi Jamie,
I removed the 2 tags and copied the same code as your CDS view. But still see the same error. So in order to make the above CDS view work do we have to be on 7.50 SP04 and no work around for 7.50 SP01 to make this work.
Is there a way i could see a detailed error log versus the one i am seeing right now.
What are the steps i would need to do to configure this on my on-premise launchpad and see if i get the same error?
I have already deployed it to SAP UI5 ABAP repository and need the remaining steps to configure it on Launchpad and setup a tile.
Regards,
Lokesh.
If the annotation are showing up red and not in auto complete, it's because your Netweaver system does not have them so you will not be able to generate the chart with the cds annotations. You would have to update the system to obtain them. I would image you would see an error in the problems pane in eclipse and also in the Netweaver system. You are getting an error in the UI5 app because of the missing annotations. As a work around you could use the annotation editor in Web IDE to add them. For launchpad info see
All Things SAP Fiori
Regards,
Jamie
HI Jamie,
I tried modifying the annotation file with missing tags but it is removing my tags if i reopen it. What is the reason for this behaviour?
Do you have a sample view which is built on 750 SP01 and works with this editor. I tried a lot of examples but none of seem to work.
Regards,
Lokesh.
Hi,
Is there any SAP Note which we could apply to make this working in 750 SP01. We have upgraded recently and another upgrade would be a tiresome job.
Would raising a OSS message of be any help?
Regards,
Lokesh.
The local annotation would be the easiest approach. Create a new discussion thread detailing what you are seeing.
Regards,
Jamie
What is the component that needs to be on 750 SP04 is it SAP_UI?
Regards,
Lokesh
I believe the cds pieces are part of the service pack. SAP_UI is related to SAPUI5 and Fiori.
Regards,
Jamie
Pretty cool blog - thanks!
Best, Nabi
Hi Jamie,
Nice Blog 🙂
I have few questions in Chart card
@UI.dataPoint:{title: 'For Charts', referencePeriod.end: 'created_at', criticalityCalculation: {
improvementDirection: #MAXIMIZE,
toleranceRangeLowValue: 1000,
deviationRangeLowValue: 4000}}
so.gross_amount,
@UI.lineItem: [{ position: 30, qualifier:'ordOverView', label: 'Net Amount', type: #AS_DATAPOINT },{qualifier: 'chartLineItem'}]
so.net_amount,
@UI.identification: [{label: 'Customer', position: '10'}]
so.customer.company_name,
Please clarify my questions.
Thanks & Regards,
Pavan
The role determines how a measure is to be used on a chart. See https://help.sap.com/saphelp_uiaddon20/helpdata/en/c7/c5a828fe69411da7d63e2e63086b59/content.htm
The criticalityCalculation is used to set a color based on the value of the datapoint. See https://help.sap.com/saphelp_uiaddon20/helpdata/en/65/731e6b823240398e33133908efdaa1/content.htm
I believe the chartLineItem qualifier was used in another card that I did not include in the blog.
You can find info regarding the use of the identification annotation in charts at
https://help.sap.com/saphelp_uiaddon20/helpdata/en/c7/c5a828fe69411da7d63e2e63086b59/content.htm
Not sure about your issue. I would suggest posting a questions with the details of your issue.
Regards,
Jamie
Hello,
is it possible to navigate from a chart card to e.g. an another application (navigation like e.g. in a list card)? If yes, can you post the coding for this.
Thanks & Regards,
Michael
As defined in the blog, the chart will navigate to the first identificationAnnotationPath found. You can enter another @UI.Identification that points to a specific path if desired. You would need to add a qualifier to specify the one used. There is also a property, navigation, which can be added to the card to specify either Data Point Navigation or Chart Navigation.
Regards,
Jamie
Hi Jamie,
Quick question around the stack card.
How does the stack card that we have added link with the field group annotation we added manually?
What If i have multiple stack cards with 2 different field groups having different qualifiers?
Thanks
Ashiq Ali Ratnani
You can use the annotationPath as detailed at
https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.51.1/en-US/f70fd87fd7854dc8910df90ee6a486bc.html
Regards,
Jamie
Hi Jamie, i found this really helpful! Have you ever tried to implement a radar chart type through specific UI.Chart.charttype annotation on top of the CDS view definition?
I have not been able to find any documentation on number of dimension / axis and other settings for this kind of chart.
Thanks
I do not believe that is currently supported. See
https://experience.sap.com/fiori-design-web/analytical-card/#types
Regards,
Jamie
Hi Jamie,
Thank you for your link! I have the same need of data visualization in radar chart, but when I open the link you provided, I cannot find it in Fiori Document. Can you give more information here? Is it because radar chart is not supported as UI again now?
Best regards,
Sindy
Hi Jamie, do you know if there is any documentation or API Reference on table cards? I wasn't able to find it. I saw that by default table card supports 3 columns and I'm trying to overcome this limit.With the trick of setting "containerLayout": "resizable" I was able to show the other columns when expanding the layout, but I don't know how to set the number of columns by default at OVP execution. Do you think is it possible to do it without creating a custom controller?
Thanks,
Pier
I do not believe the card was intended to show more than three fields, maybe using the list card would satisfy your need.
Regards,
Jamie
Hi,
I am trying to place Data Point in "Header Facet". But its not working. I have selected Facet type as "FILEDGROUP_REFERENCE" and then I tired to pass type - #AS_DATAPOINT .
Can you please suggest any solution for this. If I am adding directly in local annotation file then its working.
@UI.fieldGroup: [{
qualifier : 'HeaderStatus',
position : 10,
importance : #HIGH
// type : #AS_DATAPOINT
}]
@ObjectModel.readOnly: true
@UI.dataPoint.targetValueElement: 'CmmdtySubAccountStatusText'
@UI.dataPoint.description: 'Status'
cast(_CmmdtySubAcctStatusText.CmmdtySubAccountStatusText as cmmfsa_subacctstatustext preserving type) as CmmdtySubAccountStatusText,
HI Ashutosh,
Please create a new thread in the questions and answer area for your issue.
Regards,
Jamie
Hello Jamie,
A very well documented Blog with detailed steps. Thanks for the effort. Looking fwd to more blogs on Cds from you
Best Regards,
Smriti
Hello Jamie,
I followed your blog for cards in an overview page.
I was able to create list and stack cards but when i was not able to create chart card as the KPI annotation path was coming blank while creating it.
Can you please guide on this?
Hi
Thanks for the great blog.
Which card type did you use for the chart? Analytic card is not giving me the option for chart.
Thanks and kind regards
Hi Timothy,
It's an analytic card.
https://experience.sap.com/fiori-design-web/analytical-card/#types
The chartType property of the CDS view determines what chart will be used.
Regards,
Jamie
Thank you for a well thought out and detailed blog series.
I am however having issues the analytical card. Could you please share the manifest.js part of your analytical card.
Kind regards
Hi Timothy,
Please create a new thread in the questions and answer area with the details regarding your issue.
Regards,
Jamie
Hi Jamie
Thanks for your response.
I just want to cross-check my manifest.js part with your manifest part. I don't think it's something that requires a new thread. If it's the same with what you have then I can create a new thread
Kind regards
At the time I created the blog the template I used was sap.ovp.cards.charts.line. This has be deprecated in favor of sap.ovp.cards.charts.analytical which results in a different structure.
The following listing may be of use for you.
https://wiki.scn.sap.com/wiki/display/Fiori/Fiori+elements
Regards,
Jamie
thank you
Hi
Just to let you know that it finally worked using the following
Thanks once again