Can Overview Page (OVP) Linklist card use data from oData?

[former_member231903]

Hi,

I'm researching on OVP Linklist card, I want to make two kinds of cards:

1. card with hardcoded titles/SemanticObjects/Actions:

I know I can hardcode those information in manifest.json.

2. card with dynamic titles/SemanticObjects/Actions:

I want to load those information from oData service, but as I searched UI5 toolkit, I didn't find any clue how to make this.

I'm new to Fiori/UI5 development so I think I may missed something.

Any suggestion?

[former_member103161]

Hello Wang,

https://sapui5.hana.ondemand.com/#docs/guide/0326f910c6af4fb1b86f2810ee10419e.html is the link to documentation

Yes you can use oData service, just as you would do for other overview page card, below are the details to be referred to for configuring a link list card using annotations.

Element Source/Annotations

List Item Title

Is taken from the “Title” property of the UI.HeaderInfo annotation.
The reaction on a click event on the list item title is defined by the available annotations. The first annotation of the below list that is found defines the reaction to a click:

• UI.Identification of type UI.DataFieldForIntentBasedNavigation -> An intent based navigation is initiated. The target of the navigation is defined by the content of the annotations “SemanticObject” and “Action” properties.
  Limitation: Please note that it is currently not possible to navigate to different targets from one list since the “Action” property is currently a literal and therefore contains the same value for all List items.
• UI.LineItem of type “DataFieldWithAction” -> triggers one of the service’s function imports. Currently it is not possible to assign a different function import for each line item if the oData annotation is generated from a CDS annotation. But the needed oData annotation can be generated programmatically into the services metadata file. The necessary code has to be implemented in the “define” method of the service’s mpc_ext class. The resulting lines in the metadata.xml should look like this:<Annotations xmlns="http://docs.oasis-open.org/odata/ns/edm"Target="<Service>.<EntityTpe>"> <AnnotationTerm="com.sap.vocabularies.UI.v1.LineItem"> <Collection> <RecordType="com.sap.vocabularies.UI.v1.DataFieldWithAction"> <PropertyValueProperty="Action" Path="<Field with the action name>"/> <PropertyValueProperty="Value" Path="<Field with the action label>"/> </Record></Collection> </Annotation> </Annotations>

• UI.LineItem of type “WITH_URL”: A url navigation is triggered. The URL for this navigation is taken from the entity type field that is named in the lineItem's “url” property.
• Communication.Contact: A Contact card is displayed as a popover. The data shown on the contact card are taken from the Communication contact annotation of the card. Currently the following elements of the contact annotation are evaluated:
  • “fn” (Full name - used as headline of the contact card header)
  • “photo” (URL for a picture – used in the contact card header)
  • “role” (used as the description text in the contact card header)
  • “tel” (with property type “work” and “pref” the contact card shows it as “Phone”, with property type “cell” and “work” it is shown as “Mobile”
  • “email” (with property type “work” and “pref” the contact card shows it as “E-Mail”)

List Item Subtitle

Is taken from the “Description” property of the UI.HeaderInfo annotation.

List Item Picture

Here an image or an icon can be shown. The Url for an image has to be defined using the “ImageUrl” property of the UI.HeaderInfo annotation. The Url for an icon has to be defined using the “typeImageUrl” property of the UI.HeaderInfo.

If both are defined then the Images are shown.

Carousel Picture

For the carousel picture the same rules apply as for the list item picture. Additionally the carousel picture reacts to a click event as the list item title would

[Former Member]

Hi Parsita,

Thanks for your response.

I am trying to implement a navigation to an external URL from link list card item.

In my OData entity I have a field called 'URL' containing the URL for navigation from that particular record.

Request you to review the following questions and share your thoughts -

1. Following are the CDS view annotations. The navigation is not working (same works for List cards). Can you please take a look and comment.

2. Also for the image / icon can you please confirm if I have configured the "UI.headerInfo" correctly and if yes, what are the values expected (lets say if i want to display an icon from SAP Icon Explorer) in ImageUrl and IconUrl fields.

@UI.headerInfo:{

// Link List Card Item Title

title:{type:#STANDARD,value:'AirlinesName'},

// Link List Card Item Description

description:{type:#STANDARD,value:'CurrencyCode'},

// Image URL

imageUrl:'ImageUrl',

// Icon URL

typeImageUrl:'IconUrl'

}

define view YDD_CO_CARR_LINKLIST as select from YDD_BO_OVP_SCARR as Airline {

@UI: {

lineItem.qualifier:'FlightsList',

lineItem.position:10

}

key Airline.carrid as AirlinesId,

@Search:{

defaultSearchElement:true,

ranking:#HIGH,

fuzzinessThreshold:0.8

}

// For Navigation - Begin of Code

@UI.lineItem:{

position: 20,

qualifier:'FlightsList',

//This is for navigation

type:#WITH_URL,

url: 'URL'

}

Airline.carrname as AirlinesName,

@UI: {

lineItem.qualifier:'FlightsList',

lineItem.position:30

}

Airline.currcode as CurrencyCode,

@UI: {

lineItem.qualifier:'FlightsList',

lineItem.position:40

}

Airline.url as URL,

Airline.ImageUrl as ImageUrl,

Airline.IconUrl as IconUrl

}

Thanks,

Indrajit