Overview Page from Template in UI5

[former_member374496]

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

[former_member186852 · Accepted solution]

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

[former_member374496 · Accepted solution]

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

[former_member103161]

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

[former_member374496]

Hi Prasita,

Thanks a lot for the Reply.

it is really a good example.

[former_member560141]

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"
    }
}

[former_member374496]

Hi Nicholas,

your code Helped me a lot , Thank you 🙂

Best Regards,

Pradeep

[former_member560141]

No problem. A upvote is always appreciated 🙂