Skip to Content
avatar image
Pradeep V

Overview Page from Template in UI5

Mar 01 at 09:02 AM | 87 Views

Hi All,

I have a requirement to develop the overview page with template with the following details,

1. card with the list

2. card with any chart , or donut chart

3. card with the progress indicator

4.on click of line item it should navigate to the actual app.

Please let me know how can i achieve this, and any sample examples would be the great help.

Thanks in advance,

Pradeep

SAPUI5
ui5 | template | overview page | overview page application | overview
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

3 Answers

  • Best Answer
    avatar image
    MEGHAL SHAH
    Mar 01 at 10:49 AM

    Hi

    Please check below example ,

    https://blogs.sap.com/2016/01/11/sap-overview-page-list-cards-examples/

    # to get the navigation details check below url

    https://sapui5.hana.ondemand.com/#/topic/530f9e6f66104d5888ade79b5cf417e0

    Regards ,

    Meghal shah

    Add comment
    10|10000 characters needed characters exceeded

    • Pradeep V
      Mar 01 at 11:24 AM

      Hi Meghal,

      Thank you so much for the reply, and i will try out the example which is in the Link which you have shared.

      Thanks a lot,

      Best Regards,

      Pradeep

  • avatar image
    Nicholas Owen O’Malley
    Mar 05 at 08:09 AM

    Hello Pradeep V

    Here are some examples on json to putt in manifest.json, One custom, one line and one bar


    "customCard_Card": {
	"model": "northwind",
	"template": "name.cards.productionStatus",
	"settings": {
	    "title": "{{titel}}",
	    "entitySet": "Customers"
	}
},
"line_Card": {
    "model": "northwind",
    "template": "name.cards.line",
    "settings": {
	"title": "{{line_title}}",
	"entitySet": "Sales_Totals_by_Amounts",
	"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant",
	"chartAnnotationPath": "com.sap.vocabularies.UI.v1.Chart",
	"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant",
	"selectionPresentationAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant",
	"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
	"navigation": "dataPointNav"
    }
},
"bar_card": {
    "model": "northwind",
    "template": "name.cards.bar",
    "settings": {
	"title": "{{bar_title}}",
	"entitySet": "Invoices",
	"selectionAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionVariant",
	"chartAnnotationPath": "UI.Chart",
	"presentationAnnotationPath": "com.sap.vocabularies.UI.v1.PresentationVariant",
	"selectionPresentationAnnotationPath": "com.sap.vocabularies.UI.v1.SelectionPresentationVariant",
	"identificationAnnotationPath": "com.sap.vocabularies.UI.v1.Identification",
	"navigation": "dataPointNav"
    }
}
    Add comment
    10|10000 characters needed characters exceeded

  • avatar image
    Prasita Prabhakaran
    Mar 14 at 03:51 AM

    Hi Pradeep,

    You may also refer to: SAP Fiori Overview Page – Navigation concepts

    SAP Fiori Overview Page – List Cards in detail

    SAP Fiori Overview Page – All about Chart Cards – Part 1

    Add comment
    10|10000 characters needed characters exceeded