Skip to Content

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

Screen Shot 2016-06-17 at 10.02.26 AM.png

This will yield the card

Screen Shot 2016-06-28 at 4.16.04 PM.png

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

Screen Shot 2016-06-29 at 2.55.03 PM.png

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

Screen Shot 2016-06-28 at 4.22.04 PM.png

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.

Screen Shot 2016-06-29 at 2.58.02 PM.png

Select the node Local Annotations and then choose the add button under actions.

Screen Shot 2016-06-29 at 3.00.43 PM.png

Choose the annotation UI.Facets and choose OK.

Screen Shot 2016-06-28 at 4.26.04 PM.png

Now with the Facet annotation selected, choose the add button and add a ReferenceFacet to it.

Screen Shot 2016-06-28 at 4.27.26 PM.png

Finally assign the fieldGroup to the ReferenceFacet by setting the Annotation property to the FieldGroup Qualifier cusContact and Save your changes.Screen Shot 2016-06-28 at 4.29.05 PM.png

After refreshing your app your stack card should now look like

Screen Shot 2016-06-29 at 3.02.21 PM.png

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

Screen Shot 2016-07-05 at 1.34.56 PM.png

The should result in the card

Screen Shot 2016-07-05 at 1.39.01 PM.png

To report this post you need to login first.

20 Comments

You must be Logged on to comment or reply to a post.

  1. Lokesh Kamana

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

    CDS View.jpg

    WEB IDE Manifest.json

    /wp-content/uploads/2016/07/manifest_json_992337.jpg

    Error Screenshot:-

    Error Screenshot.jpg

    (0) 
    1. Lokesh Kamana

      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.

      Error 2.jpg

      Regards,

      Lokesh.

      (0) 
        1. Jamie Cawley Post author

          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

          (0) 
          1. Lokesh Kamana

            Hi Jamie,


            Thank you very much for helping on this issue.

            1. When you activate the view in eclipse are you seeing any errors? I don’t see any errors in eclipse when activating this view.
            2. Do the annotation marked in red come up in auto complete? Annotations marked in red doesn’t show up in auto complete and i have manually copied these on CDS view. For Example the signature of @UI.chart would be as below.

                 @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.

                



            (0) 
            1. Jamie Cawley Post author

              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

              (0) 
              1. Lokesh Kamana

                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.

                (0) 
                1. Jamie Cawley Post author

                  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

                  (0) 
                  1. Lokesh Kamana

                    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.

                    (0) 
                    1. Lokesh Kamana

                      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.

                      (0) 
                      1. Jamie Cawley Post author

                        The local annotation would be the easiest approach.  Create a new discussion thread detailing what you are seeing.

                        Regards,

                        Jamie

                        (0) 
  2. Pavan Kumar Reddy

    Hi Jamie,

    Nice Blog ūüôā

    I have few questions in Chart card

    • Could you please explain in detail¬†dimensionAttributesrole and¬†measureAttributesrole ?
    • what does below annotation does?

    @UI.dataPoint:{title: ‘For Charts’, referencePeriod.end: ‘created_at’, criticalityCalculation: {

    improvementDirection: #MAXIMIZE,
    toleranceRangeLowValue: 1000,
    deviationRangeLowValue: 4000}}
    so.gross_amount,

    • did you use¬†chartLineItem qualifier?

    @UI.lineItem: [{ position: 30, qualifier:’ordOverView’, label: ‘Net Amount’, type: #AS_DATAPOINT },{qualifier: ‘chartLineItem’}]

    so.net_amount,

    • What does below annotation does in respective charts?

    @UI.identification: [{label: ‘Customer’, position: ’10’}]
    so.customer.company_name,

    • In my case I am not able to see title¬†Order Target Value, Sales Order ID label in X-axis, Total Net Amount, Total Tax amount in Y-axis as you got in the chart card, What would be the reason?

    Please clarify my questions.

    Thanks & Regards,

    Pavan

     

    (0) 
  3. Jamie Cawley Post author

    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

     

    (0) 
  4. Michael Jellbauer

    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

    (0) 
    1. Jamie Cawley Post author

      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

      (0) 
  5. AshiqAli Ratnani

    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

    (0) 

Leave a Reply