Skip to Content
Author's profile photo Jamie Cawley

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

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

Assigned Tags

      37 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Lokesh Kamana
      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

      Author's profile photo Lokesh Kamana
      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.

      Author's profile photo Lokesh Kamana
      Lokesh Kamana

      V comes as undefined and it goes to error log.

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog 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

      Author's profile photo Lokesh Kamana
      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.

          



      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog 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

      Author's profile photo Lokesh Kamana
      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.

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog 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

      Author's profile photo Lokesh Kamana
      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.

      Author's profile photo Lokesh Kamana
      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.

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

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

      Regards,

      Jamie

      Author's profile photo Lokesh Kamana
      Lokesh Kamana

      What is the component that needs to be on 750 SP04 is it SAP_UI?

      Regards,

      Lokesh

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      I believe the cds pieces are part of the service pack.  SAP_UI is related to SAPUI5 and Fiori.

      Regards,

      Jamie

      Author's profile photo Nabi Zamani
      Nabi Zamani

      Pretty cool blog - thanks!

      Best, Nabi

      Author's profile photo Pavan Kumar Reddy
      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

       

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog 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

       

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog 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

      Author's profile photo AshiqAli Ratnani
      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

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      You can use the annotationPath as detailed at

      https://help.sap.com/viewer/468a97775123488ab3345a0c48cadd8f/7.51.1/en-US/f70fd87fd7854dc8910df90ee6a486bc.html

      Regards,

      Jamie

      Author's profile photo Pierfrancesco La Spada
      Pierfrancesco La Spada

      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

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      I do not believe that is currently supported.  See

      https://experience.sap.com/fiori-design-web/analytical-card/#types

      Regards,

      Jamie

      Author's profile photo Sindy Zhan
      Sindy Zhan

      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

      Author's profile photo Pierfrancesco La Spada
      Pierfrancesco La Spada

      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

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      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

      Author's profile photo Ashutosh Kumar
      Ashutosh Kumar

      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,

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      HI Ashutosh,

      Please create a new thread in the questions and answer area for your issue.

      Regards,

      Jamie

      Author's profile photo Smriti Gupta
      Smriti Gupta

      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

      Author's profile photo Utkarsh Rastogi
      Utkarsh Rastogi

      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?

      Author's profile photo Timothy Muchena
      Timothy Muchena

      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

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      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

      Author's profile photo Timothy Muchena
      Timothy Muchena

      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

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      Hi Timothy,

      Please create a new thread in the questions and answer area with the details regarding your issue.

      Regards,

      Jamie

      Author's profile photo Timothy Muchena
      Timothy Muchena

      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

      Author's profile photo Jamie Cawley
      Jamie Cawley
      Blog Post Author

      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

      Author's profile photo Timothy Muchena
      Timothy Muchena

      thank you

      Author's profile photo Timothy Muchena
      Timothy Muchena

      Hi

       

      Just to let you know that it finally worked using the following

       

      Thanks once again