Create a UI5 Integration Card that Consumes Data from the SAP Gateway Demo System

By connecting your card to the SAP Gateway Demo System (ES5), you’re enabling the card to consume dynamic data. Card destinations are used for outbound communication to a remote resource and contain the required connection information.

1. To set a destination, add the following configuration section in the sap.card section after the type subsection. Note, that the card destination is pointing to the same (ES5) destination that is set on the subaccount level.

     "configuration": {
                           "destinations": {
                               "ES5": {
                                   "name": "ES5",
                                  "defaultUrl": "/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/"
                               }
                           }
                       },
   

   

2. To configure a data request pointing to the SAP Gateway Demo System, add a new data section after the configuration. In this way the data section will be defined on a card level. Note, that our destination is referred here using the double-bracket syntax {{destinations.ES5}}.

   "data": {
   	"request": {
   "url": "{{destinations.ES5}}/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/Products",
   "withCredentials": true
                               },
                   "path": "/d/results"
           },
   

   

3. To display the dynamically requested data, replace the static content section with the following one. The title, description, icon, and info properties are now dynamically requested.

   "content": {
               "item": {
                   "title": "{Name}",
                   "description": "{Description}",
                   "icon": {
                       "src": "{ImageUrl}"
                   },
                   "info": {
                       "value": "{AverageRating}",
                       "state": "{= ${AverageRating} > 3.5 ? 'Success' : 'Warning' }"
                   }
               },
               "maxItems": 5
           }
   

   

Results after Step 3:

The application displays dynamic data loaded from the SAP Gateway Demo System (ES5). Note, that the actual displayed products may differ depending on the current data in the ES5 demo system.
To learn more, see the Destinations and Data sections in the Card Explorer.

If you would like to deploy the card and see how it looks on SAP Work Zone, you can skip to Step 6 and deploy it. In the next steps you add card capabilities that can make your card more interactive.

Manifest parameters provide dynamic values for card attributes. They are replaced during manifest processing and can be used with the double-bracket syntax like: {{parameters.city}}. As an example, in this step you will add parameters to set the header (title and subTitle) properties and the number (maxItems) of displayed items in the content.

1. To define parameters - add the following parameters subsection in the manifest.json in the configuration section (note the comma which divides the entries).

   ,
                               "parameters": {
                                   "title" : {
                                       "value": "List Card with Top {{parameters.maxItems}} Products"
                                   },
                                   "subTitle": {
                                       "value": "These are the top sellers this month"
                                   },
                                   "maxItems": {
                                       "value": 4
                                 		  }
              		 	             }
   

   

2. To use the new maxItems parameter, replace the maxItems: 5 static value in the content section with the (maxItems) parameter as shown below:

   "maxItems": "{{parameters.maxItems}}"
   

   

3. Let’s also use the new parameters in the header section. Use the double-bracket syntax and edit (or replace) the header, so it looks like this:

   "header": {
   			"title": "{{parameters.title}}",
   			"subTitle": "{{parameters.subTitle}}",
   			"icon": {
   				"src": "sap-icon://desktop-mobile"
   			},
   			"status": {
   				"text": "{{parameters.maxItems}} of 20"
   			}
   		},
   

   

Results after Step 4:

In this step you have learned how to declare configurable parameters and use them to achieve desired dynamic behavior. The application now displays a list of 4 items according to the parameters property (maxItems value: 4).

To learn more, see the Manifest Parameters section in the Card Explorer.

You can make the card even more dynamic when using filters. Filters appear as a dropdown under the card header, and users can interact to customize the data shown by the card. The value of each filter can be used inside a data request definition by using the {filters>/myFilter/value} placeholder. When the end user selects different value from the dropdown - a new data request is made with the updated value. As an example, in this step you will add a filter that enables users to filter products by a selected supplier.

1. Add a filters subsection in the configuration section. It defines a dropdown list with suppliers, which are received by a data request.

   ,
                            "filters": {
                                "supplier": {
                                    "value": "{{parameters.selectedSupplierID}}",
                                    "type": "string",
                                    "label": "Supplier",
                                    "description": "Filter the orders by supplier.",
                                       "item": {
                                           "path": "/d/results",
                                           "template": {
                                               "key": "{Id}",
                                               "title": "{Name}"
                                           }
                                       },
                                       "data": {
                                           "request": {
                                               "url": "{{destinations.ES5}}/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/Suppliers",
   "withCredentials": true
                                           }
                                       }
                                   }
                               }
   

   

2. Add selectedSupplierID subsection in the parameters section. This is the supplier that is initially selected in the filter. Later the user can change it from the dropdown list. The "value": 100000056 corresponds to the supplier ID (of Pear Computing Services) in the SAP Gateway Demo System (ES5).

   ,
                                   "selectedSupplierID": {
                                       "value": 100000056,
                                       "type": "integer",
                                       "label": "The default selected supplier"
                                   }       
   

   

3. Add parameters in the main data section > request subsection, after the url property as shown below. The $filter parameter will be used in a data request for the supplier with ID that is equal to the one selected by the user in the filter’s dropdown list.

   "parameters": {
                                       "$filter": "Supplier/Id eq '{filters>/supplier/value}'"
                                   },
   

   

4. Finally replace the title in the header adding the {filters>/supplier/selectedItem/title} parameter, which will show the selected vendor:

   "title": "Products provided by {filters>/supplier/selectedItem/title} vendor ",
   

   

Results after Step 5:

The manifest.json file is configured with destinations, parameters, and a filter.
The application displays the products from the selected vendor:

To learn more, see the Filters section in the Card Explorer.

1. Select the dt/configuration.js file (in the Explorer view on the left).

   

2. Replace the content with the code below:

sap.ui.define(["sap/ui/integration/Designtime"], function (
    Designtime
) {
    "use strict";
    return function () {
        return new Designtime({
        "form": {
          "items": {
            "maxItems": {
              "manifestpath": "/sap.card/configuration/parameters/maxItems/value",
              "type": "integer",
              "label": "Maximum Items",
              "translatable": false,
              "description": "Defines how many items will be displayed at most."
            }
          }
        },
        "preview": {
          "modes": "LiveAbstract"
        }
      });
    };
});

The dt/configuration.js now looks like: