diff --git a/tutorials/appstudio-sapui5-integrationcard-create/2-4 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/2-4 NEW.PNG new file mode 100644 index 0000000000..92e59c88b3 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/2-4 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/2-4.PNG b/tutorials/appstudio-sapui5-integrationcard-create/2-4.PNG index 2a6dec3dbc..69826b6d79 100644 Binary files a/tutorials/appstudio-sapui5-integrationcard-create/2-4.PNG and b/tutorials/appstudio-sapui5-integrationcard-create/2-4.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/2-5 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/2-5 NEW.PNG new file mode 100644 index 0000000000..e17c8a773a Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/2-5 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/2-6 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/2-6 NEW.PNG new file mode 100644 index 0000000000..88032e5d64 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/2-6 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/2-7 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/2-7 NEW.PNG new file mode 100644 index 0000000000..002bb5028b Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/2-7 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/3-1 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/3-1 NEW.PNG new file mode 100644 index 0000000000..a9353de5af Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/3-1 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/3-2 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/3-2 NEW.PNG new file mode 100644 index 0000000000..d43658d508 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/3-2 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/3-3 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/3-3 NEW.PNG new file mode 100644 index 0000000000..b044cdc0b9 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/3-3 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/3-4 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/3-4 NEW.PNG new file mode 100644 index 0000000000..ead83e3048 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/3-4 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/4-1 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/4-1 NEW.PNG new file mode 100644 index 0000000000..d176a1337c Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/4-1 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/4-2 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/4-2 NEW.PNG new file mode 100644 index 0000000000..e2e38e01da Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/4-2 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/4-3 DATA REQ.PNG b/tutorials/appstudio-sapui5-integrationcard-create/4-3 DATA REQ.PNG new file mode 100644 index 0000000000..9f8425db98 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/4-3 DATA REQ.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/4-3 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/4-3 NEW.PNG new file mode 100644 index 0000000000..4813b1d60f Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/4-3 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/4-4 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/4-4 NEW.PNG new file mode 100644 index 0000000000..5e059b5fd4 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/4-4 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/5-1 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/5-1 NEW.PNG new file mode 100644 index 0000000000..673fe690b4 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/5-1 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/5-2 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/5-2 NEW.PNG new file mode 100644 index 0000000000..1670ea7c41 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/5-2 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/5-3 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/5-3 NEW.PNG new file mode 100644 index 0000000000..70619dda3f Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/5-3 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/5-4 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/5-4 NEW.PNG new file mode 100644 index 0000000000..a0a1cc8d60 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/5-4 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/5-5 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/5-5 NEW.PNG new file mode 100644 index 0000000000..d722f4bc06 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/5-5 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/6-1 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/6-1 NEW.PNG new file mode 100644 index 0000000000..e937360b6b Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/6-1 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/6-2 NEW.PNG b/tutorials/appstudio-sapui5-integrationcard-create/6-2 NEW.PNG new file mode 100644 index 0000000000..51b5cf2798 Binary files /dev/null and b/tutorials/appstudio-sapui5-integrationcard-create/6-2 NEW.PNG differ diff --git a/tutorials/appstudio-sapui5-integrationcard-create/appstudio-sapui5-integrationcard-create.md b/tutorials/appstudio-sapui5-integrationcard-create/appstudio-sapui5-integrationcard-create.md index 8c487949f7..cb0be45111 100644 --- a/tutorials/appstudio-sapui5-integrationcard-create/appstudio-sapui5-integrationcard-create.md +++ b/tutorials/appstudio-sapui5-integrationcard-create/appstudio-sapui5-integrationcard-create.md @@ -1,4 +1,4 @@ -+--- +--- parser: v2 auto_validation: true time: 25 @@ -7,18 +7,16 @@ primary_tag: software-product>sap-work-zone author name: Boris Dafov --- -# Create a UI5 Integration Card that Displays Data from the SAP Gateway Demo System - Create a UI5 integration card in SAP Build Work Zone, advanced edition to display data from the backend SAP Gateway Demo System. +# Create a UI5 Integration Card that Displays Data from the Northwind Demo System + Create a UI5 integration card in SAP Build Work Zone to display data from the Northwind backend. ## Prerequisites - Please note that if you are following this tutorial as part of a workshop, you can skip these prerequisites. -- You have an account on the SAP Gateway Demo System. See [Create an Account on the SAP Gateway Demo System](gateway-demo-signup). -- You have connected the SAP BTP to your SAP Gateway Demo System Account. See [Connect SAP BTP to Your SAP Gateway Demo System Account (ES5)](cp-portal-cloud-foundry-gateway-connection). - You have created a dev space. See [Create a Dev Space for SAP Fiori Apps](appstudio-devspace-fiori-create). -- To deploy a UI5 Integration card in the SAP Build Work Zone, you should have a subaccount in SAP BTP that includes a subscription to the "SAP Build Work Zone, advanced edition" service. Additionally, you have to configure a destination for the SAP Build Work Zone, advanced edition instance. See [Development Tools for SAP Build Work Zone, advanced edition](https://help.sap.com/docs/build-work-zone-advanced-edition/sap-build-work-zone-advanced-edition/development-tools-for-sap-build-work-zone-advanced-edition). +- To deploy a UI5 Integration card in the SAP Build Work Zone, you should have a subaccount in SAP BTP that includes a subscription to the SAP Build Work Zone service. Additionally, you have to configure a destination for SAP Build Work Zone instance. See [Development Tools for SAP Build Work Zone](https://help.sap.com/docs/build-work-zone-advanced-edition/sap-build-work-zone-advanced-edition/development-tools-for-sap-build-work-zone-advanced-edition). ->**IMPORTANT:** SAP Build Work Zone, advanced edition is not available in a trial account (only Build Work Zone, standard edition). If you only have a trial account and you want to learn more about the Integration cards you can follow this tutorial from steps 1 to 5. +>**IMPORTANT:** SAP Build Work Zone is not available in a trial account. If you only have a trial account and you want to learn more about the Integration cards you can follow this tutorial from steps 1 to 5. ## You will learn @@ -62,26 +60,26 @@ Integration cards are UI elements which display concise pieces of information in ![Image depicting UI Integration Card template option](2-3.PNG) 4. Fill-in the required project details. Use the **Highlight Card** template, which creates an Integration card of type List and select Finish. ->If you are following this tutorial as part of a workshop, please give your card a unique name. In this case your card name should be `wz_products_by_category_card`. +>If you are following this tutorial as part of a workshop, please give your card a unique name. In this case your card name should be `wz_orders_by_shipper`. | Description | Value | :------------- | :------------- - | Project Name | `products_by_category_card` If you're taking part in a workshop, please add your unique identifier to the project name like this: `_products_by_category_card`. + | Project Name | `orders_by_shipper` If you're taking part in a workshop, please add your unique identifier to the project name like this: `_orders_by_shipper`. | Name Space | `ns` | Select a Card Sample (dropdown menu) | `Highlight Card` - | Title | `Products by Category Card` + | Title | `Orders by Shipper` | Subtitle | `UI5 Integration Card of Type List` | Compatible with SAP Mobile Cards (dropdown menu) | `False` - ![Image depicting required Project Details](2-4.PNG) + ![Image depicting required Project Details](2-4 NEW.PNG) 5. To see the card, right-click on `manifest.json` and select **UI Integration Card: Preview**. - ![Image depicting UI Integration Card: Preview option](2-5.PNG) + ![Image depicting UI Integration Card: Preview option](2-5 NEW.PNG) 6. Currently the card displays only static data: - ![Image depicting the application showing only static data](2-6.PNG) + ![Image depicting the application showing only static data](2-6 NEW.PNG) 7. Open the `manifest.json` file. Everything needed to render the card is described in this file. @@ -96,202 +94,218 @@ Integration cards are UI elements which display concise pieces of information in - `data` sections: Define how the card handles its data. It can provide static data (see the `json` object below) or define required parameters for a data request to a backend system. Can be set on different levels (card, header, filter-definition, or content). The inner level data sections take precedence. In the example below the data section is defined on content level. - ![Image depicting manifest.json file structure](2-7.PNG) + ![Image depicting manifest.json file structure](2-7 NEW.PNG) In the next steps you edit the `manifest.json` file to configure the card. ### Add destination to connect to Gateway - By connecting your card to the SAP Gateway Demo System (ES5), you're enabling the card to display dynamic data. Card destinations are used for outbound communication to a remote resource and contain the required connection information. + By connecting your card to the public Northwind demo service, you're enabling the card to display 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. +1. To set a destination, add the following `configuration` section in the `sap.card` section after the `type` subsection. ```JSON - "configuration": { - "destinations": { - "ES5": { - "name": "ES5", - "defaultUrl": "/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/" - } - } - }, + "configuration": { + "destinations": { + "Northwind": { + "name": "Northwind", + "label": "Northwind V4 Service URL", + "defaultUrl": "https://services.odata.org/V4/Northwind/Northwind.svc" + } + } + }, ``` - ![Image depicting manifest.json file – add configuration section](3-1.PNG) + ![Image depicting manifest.json file – add configuration section](3-1 NEW.PNG) -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}}`. +2. To configure a data request pointing to the Northwind demo service, 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.Northwind}}`. ```JSON - "data": { - "request": { - "url": "{{destinations.ES5}}/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/Products", - "withCredentials": true - }, - "path": "/d/results" + "sap.card": { + "data": { + "request": { + "url": "{{destinations.Northwind}}/Orders" }, + "path": "/value" + } + }, ``` - ![Image depicting manifest.json file – add data section](3-2.PNG) + ![Image depicting manifest.json file – add data section](3-2 NEW.PNG) + +>**IMPORTANT:** Due to an issue with the **UI Integration Card: Preview** option, you may need to replace {{destinations.Northwind}} with "https://services.odata.org/V4/Northwind/Northwind.svc" ! -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. +Finally, to display the dynamically requested data, replace the static `content` section with the following one. The `title`, `description`, and `info` properties are now dynamically requested. ```JSON "content": { - "item": { - "title": "{Name}", - "description": "{Description}", - "icon": { - "src": "{ImageUrl}" - }, - "info": { - "value": "{AverageRating}", - "state": "{= ${AverageRating} > 3.5 ? 'Success' : 'Warning' }" - } - }, - "maxItems": 5 + "item": { + "title": "{ShipName}", + "description": "{ShipAddress}", + "info": { + "value": "{ShipCountry}" } + } + } ``` - ![Image depicting manifest.json file – replace content section](3-3.PNG) + ![Image depicting manifest.json file – replace content section](3-3 NEW.PNG) **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. You can also check the [manifest.json](https://raw.githubusercontent.com/SAPDocuments/Tutorials/master/tutorials/appstudio-sapui5-integrationcard-create/manifest_after_step3.json) file at this step. To learn more, see the [Destinations](https://sapui5.hana.ondemand.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/learn/features/destinations) and [Data](https://sapui5.hana.ondemand.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/learn/features/data) sections in the Card Explorer. +The application displays dynamic data loaded from the Northwind demo service. Note, that the actual displayed products may differ depending on the current data provided by the Northwind demo service. You can also check the [manifest.json](https://raw.githubusercontent.com/SAPDocuments/Tutorials/master/tutorials/appstudio-sapui5-integrationcard-create/manifest_after_step3.json) file at this step. To learn more, see the [Destinations](https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/learn/configuration/destinations) and [Data](https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/learn/features/data) sections in the Card Explorer. -![Image depicting the application showing dynamic data](3-4.PNG) +![Image depicting the application showing dynamic data](3-4 NEW.PNG) If you would like to deploy the card and see how it looks on SAP Build 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. ### Add manifest parameters - 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. + Manifest parameters provide dynamic values for card attributes. They are replaced during manifest processing and can be used from the `parameters` model, for example: `{parameters>/city/value}`. As an example, in this step you will add parameters to set the header (`title`) property and the number (`maxItems`) of displayed items in the content. + + >If you are following this tutorial as part of a workshop and run out of time, you can skip steps 4,5,6 and create a simpler card. You can later read the steps you missed. 1. To define parameters - add the following `parameters` subsection in the `manifest.json` in the `configuration` section (note the comma which divides the entries). ```JSON - , - "parameters": { - "title" : { - "value": "List Card with Top {{parameters.maxItems}} Products" - }, - "subTitle": { - "value": "These are the top sellers this month" - }, - "maxItems": { - "value": 4 - } - } + "parameters": { + "title" : { + "value": "Orders by Shipper" + }, + "maxOrdersShown": { + "value": "4", + "type": "integer", + "label": "Numbers of orders", + "description": "How many orders to show in the list." + } + } + ``` + + ![Image depicting manifest.json file - add parameters](4-1 NEW.PNG) + +2. To use the new `maxOrdersShown` parameter, add it as shown below: + + ```JSON + "maxItems": "{parameters>/maxOrdersShown/value}" ``` - ![Image depicting manifest.json file - add parameters](4-1.PNG) + ![Image depicting manifest.json file – use maxOrdersShown parameter](4-2 NEW.PNG) -2. To use the new `maxItems` parameter, replace the `maxItems: 5` static value in the `content` section with the (`maxItems`) parameter as shown below: +3. Update the data request as follows: ```JSON - "maxItems": "{{parameters.maxItems}}" + "data": { + "request":{ + "url": "{{destinations.Northwind_V4}}/Orders", + "parameters": { + "$top": "{parameters>/maxOrdersShown/value}" + }, + "path": "/value/" + } + } ``` + ![Image depicting manifest.json file – use $top](4-3 DATA REQ.PNG) - ![Image depicting manifest.json file – use maxItems parameter](4-2.PNG) +>**IMPORTANT:** Due to an issue with the **UI Integration Card: Preview** option, you may need to replace {{destinations.Northwind}} with "https://services.odata.org/V4/Northwind/Northwind.svc" ! -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: +Finally, let's also use the new parameters in the `header` section. Use the `parameters` syntax and edit (or replace) the header, so it looks like this: ```JSON "header": { - "title": "{{parameters.title}}", - "subTitle": "{{parameters.subTitle}}", - "icon": { - "src": "sap-icon://desktop-mobile" - }, - "status": { - "text": "{{parameters.maxItems}} of 20" - } - }, + "title": "{parameters>/title/value}", + "icon": { + "src": "sap-icon://desktop-mobile" + }, + "status": { + "text": "{parameters>/maxOrdersShown/value}" + } + }, ``` - ![Image depicting manifest.json file - edit header](4-3.PNG) + ![Image depicting manifest.json file - edit header](4-3 NEW.PNG) **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`). +In this step, you have learned how to declare configurable parameters and use them to achieve the desired dynamic behavior. The application now displays a list of 4 items according to the `parameters` property (`maxOrdersShown value: 4`). -![Image depicting the application showing dynamic data using parameters](4-4.PNG) +![Image depicting the application showing dynamic data using parameters](4-4 NEW.PNG) -To learn more, see the [Manifest Parameters](https://sapui5.hana.ondemand.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/learn/features/manifestParameters) section in the Card Explorer. +To learn more, see the [Manifest Parameters](https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/learn/configuration/manifestParameters) section in the Card Explorer. ### Add user interaction with filtering - 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 category. + 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 the orders by a selected shipper. 1. Add a `filters` subsection in the `configuration` section. It defines a dropdown list with product categories, which are received by a data request. ```JSON - , - "filters": { - "mainCategory": { - "value": "{{parameters.selectedCategoryName}}", - "type": "string", - "label": "Main Category", - "description": "Filter products by main category.", - "item": { - "path": "/d/results", - "template": { - "key": "{Id}", - "title": "{Name}" - } - }, - "data": { - "request": { - "url": "{{destinations.ES5}}/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/MainCategories", - "withCredentials": true - } - } + "filters": { + "shipper": { + "value": "{parameters>/selectedShipperID/value}", + "type": "Select", + "label": "Shipper", + "item": { + "path": "/value", + "template": { + "key": "{ShipperID}", + "title": "{CompanyName}" + } + }, + "data": { + "request": { + "url": "{{destinations.Northwind}}/Shippers" } } + } + }, ``` - ![Image depicting manifest.json file - add filters section](5-1.PNG) + ![Image depicting manifest.json file - add filters section](5-1 NEW.PNG) -2. Add `selectedCategoryName` subsection in the `parameters` section. This is the category that is initially selected in the filter. Later, the user can change it from the dropdown list. +2. Add `selectedShipperID` subsection in the `parameters` section. This is the shipper that is initially selected in the filter. Later, the user can change it from the dropdown list. ```JSON - , - "selectedCategoryName": { - "value": "Computer Systems" - } + "selectedShipperID": { + "value": 3, + "label": "The default selected shipper" + } ``` - ![Image depicting manifest.json file – set the initially selected category](5-2.PNG) + ![Image depicting manifest.json file – set the initially selected category](5-2 NEW.PNG) -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 category with `MainCategoryName` that is equal to the one selected by the user in the filter's dropdown list. +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 orders with `shipper` that is equal to the one selected by the user in the filter's dropdown list. ```JSON - "parameters": { - "$filter": "MainCategoryName eq '{filters>/mainCategory/value}'" - }, + "request": { + "url": "https://services.odata.org/V4/Northwind/Northwind.svc/Orders", + "parameters": { + "$top": "{parameters>/maxOrdersShown/value}", + "$filter": "Shipper/ShipperID eq {filters>/shipper/value}" + } + } ``` - ![Image depicting manifest.json file - add filter parameter in the main data section](5-3.PNG) + ![Image depicting manifest.json file - add filter parameter in the main data section](5-3 NEW.PNG) -4. Finally replace the title in the `header` adding the `{filters>/supplier/selectedItem/title}` parameter, which will show the selected category: +4. Finally, replace the title in the `header` adding the `{filters>/shipper/selectedItem/title}` parameter, which will show the selected category: ```JSON - "title": "Products filtered by {filters>/mainCategory/selectedItem/title} category", + "title": "Orders by Shipper {filters>/shipper/selectedItem/title}", ``` - ![Image depicting manifest.json file – use parameters in the header's title ](5-4.PNG) + ![Image depicting manifest.json file – use parameters in the header's title ](5-4 NEW.PNG) **Results after Step 5:** If you have any issues you can check the [manifest.json](https://raw.githubusercontent.com/SAPDocuments/Tutorials/master/tutorials/appstudio-sapui5-integrationcard-create/manifest.json) file at this step. It is configured with destinations, parameters, and a filter. -The application displays the products from the selected category: -![Image depicting the application showing dynamic data, parameters, and a filter](5-5.PNG) +The application displays the products from the selected category: ->**IMPORTANT:** Due to an issue with the **UI Integration Card: Preview** option, it may not be able to correctly display the products that are filtered! +![Image depicting the application showing dynamic data, parameters, and a filter](5-5 NEW.PNG) -To learn more, see the [Filters](https://sapui5.hana.ondemand.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/learn/features/filters) section in the Card Explorer. +To learn more, see the [Card Filters](https://ui5.sap.com/test-resources/sap/ui/integration/demokit/cardExplorer/webapp/index.html#/learn/filters) section in the Card Explorer. ### Configure card parameters that are displayed in SAP Build Work Zone @@ -299,11 +313,11 @@ To learn more, see the [Filters](https://sapui5.hana.ondemand.com/test-resources 1. Select the `dt/configuration.js` file (in the Explorer view on the left). - ![Image depicting the configuration.js file in the file menu](6-1.PNG) + ![Image depicting the configuration.js file in the file menu](6-1 NEW.PNG) 2. Replace the content with the code below: -```JSON +```JAVASCRIPT sap.ui.define(["sap/ui/integration/Designtime"], function ( Designtime ) { @@ -313,7 +327,7 @@ sap.ui.define(["sap/ui/integration/Designtime"], function ( "form": { "items": { "maxItems": { - "manifestpath": "/sap.card/configuration/parameters/maxItems/value", + "manifestpath": "/sap.card/configuration/parameters/maxOrdersShown/value", "type": "integer", "label": "Maximum Items", "translatable": false, @@ -331,7 +345,7 @@ sap.ui.define(["sap/ui/integration/Designtime"], function ( The `dt/configuration.js` now looks like: -![Image depicting the configuration.js file content](6-2.PNG) +![Image depicting the configuration.js file content](6-2 NEW.PNG) diff --git a/tutorials/appstudio-sapui5-integrationcard-create/manifest.json b/tutorials/appstudio-sapui5-integrationcard-create/manifest.json index 6f7b0481d8..d0a95e4d73 100644 --- a/tutorials/appstudio-sapui5-integrationcard-create/manifest.json +++ b/tutorials/appstudio-sapui5-integrationcard-create/manifest.json @@ -1,9 +1,9 @@ { "_version": "1.14.0", "sap.app": { - "id": "ns.products_by_category_card", + "id": "ns.orders_by_shipper", "type": "card", - "title": "Products by Category Card", + "title": "Orders by Shipper", "subTitle": "UI5 Integration Card of Type List", "applicationVersion": { "version": "1.0.0" @@ -20,82 +20,77 @@ "type": "List", "configuration": { "destinations": { - "ES5": { - "name": "ES5", - "defaultUrl": "/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/" + "Northwind": { + "name": "Northwind", + "label": "Northwind V4 Service URL", + "defaultUrl": "https://services.odata.org/V4/Northwind/Northwind.svc" } }, "parameters": { - "title" : { - "value": "List Card with Top {{parameters.maxItems}} Products" + "title": { + "value": "Orders by Shipper" }, - "subTitle": { - "value": "These are the top sellers this month" + "maxOrdersShown": { + "value": "4", + "type": "integer", + "label": "Numbers of orders", + "description": "How many orders to show in the list." }, - "maxItems": { - "value": 4 - }, - "selectedCategoryName": { - "value": "Computer Systems" - } - }, - "filters": { - "mainCategory": { - "value": "{{parameters.selectedCategoryName}}", - "type": "string", - "label": "Main Category", - "description": "Filter products by main category.", - "item": { - "path": "/d/results", - "template": { - "key": "{Id}", - "title": "{Name}" - } - }, - "data": { - "request": { - "url": "{{destinations.ES5}}/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/MainCategories", - "withCredentials": true - } - } - } - } + "selectedShipperID": { + "value": 3, + "label": "The default selected shipper" + } + }, + "filters": { + "shipper": { + "value": "{parameters>/selectedShipperID/value}", + "type": "Select", + "label": "Shipper", + "item": { + "path": "/value", + "template": { + "key": "{ShipperID}", + "title": "{CompanyName}" + } + }, + "data": { + "request": { + "url": "https://services.odata.org/V4/Northwind/Northwind.svc/Shippers" + } + } + } + } }, "data": { "request": { - "url": "{{destinations.ES5}}/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/Products", - "parameters": { - "$filter": "MainCategoryName eq '{filters>/mainCategory/value}'" + "url": "https://services.odata.org/V4/Northwind/Northwind.svc/Orders", + "parameters": { + "$top": "{parameters>/maxOrdersShown/value}", + "$filter": "Shipper/ShipperID eq {filters>/shipper/value}" + } + }, + "path": "/value" }, - "withCredentials": true - }, - "path": "/d/results" - }, "designtime": "dt/configuration", "header": { - "title": "Products filtered by {filters>/mainCategory/selectedItem/title} category", - "subTitle": "{{parameters.subTitle}}", + "title": "Orders by Shipper {filters>/shipper/selectedItem/title}", "icon": { "src": "sap-icon://desktop-mobile" }, "status": { - "text": "{{parameters.maxItems}} of 20" + "text": "{parameters>/maxOrdersShown/value}" } }, "content": { - "item": { - "title": "{Name}", - "description": "{Description}", - "icon": { - "src": "{ImageUrl}" - }, - "info": { - "value": "{AverageRating}", - "state": "{= ${AverageRating} > 3.5 ? 'Success' : 'Warning' }" - } - }, - "maxItems": "{{parameters.maxItems}}" - } + "item": { + "title": "{ShipName}", + "description": "{ShipAddress}", + "info": { + "value": "{ShipCountry}" + } + }, + "maxItems": "{parameters>/maxOrdersShown/value}" + } }, "sap.platform.mobilecards": { "compatible": false diff --git a/tutorials/appstudio-sapui5-integrationcard-create/manifest_after_step3.json b/tutorials/appstudio-sapui5-integrationcard-create/manifest_after_step3.json index 63c4e7027a..6418d00e1b 100644 --- a/tutorials/appstudio-sapui5-integrationcard-create/manifest_after_step3.json +++ b/tutorials/appstudio-sapui5-integrationcard-create/manifest_after_step3.json @@ -1,9 +1,9 @@ -{ +{{ "_version": "1.14.0", "sap.app": { - "id": "ns.products_by_category_card", + "id": "ns.orders_by_shipper", "type": "card", - "title": "Products by Category Card", + "title": "Orders by Shipper", "subTitle": "UI5 Integration Card of Type List", "applicationVersion": { "version": "1.0.0" @@ -20,19 +20,19 @@ "type": "List", "configuration": { "destinations": { - "ES5": { - "name": "ES5", - "defaultUrl": "/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/" + "Northwind": { + "name": "Northwind", + "label": "Northwind V4 Service URL", + "defaultUrl": "https://services.odata.org/V4/Northwind/Northwind.svc" } } }, "data": { "request": { - "url": "{{destinations.ES5}}/sap/opu/odata/sap/EPM_REF_APPS_SHOP_SRV/Products", - "withCredentials": true - }, - "path": "/d/results" - }, + "url": "https://services.odata.org/V4/Northwind/Northwind.svc/Orders" + }, + "path": "/value" + }, "designtime": "dt/configuration", "header": { "title": "List Card with Top 5 Products", @@ -45,19 +45,14 @@ } }, "content": { - "item": { - "title": "{Name}", - "description": "{Description}", - "icon": { - "src": "{ImageUrl}" - }, - "info": { - "value": "{AverageRating}", - "state": "{= ${AverageRating} > 3.5 ? 'Success' : 'Warning' }" - } - }, - "maxItems": 5 - } + "item": { + "title": "{ShipName}", + "description": "{ShipAddress}", + "info": { + "value": "{ShipCountry}" + } + } + } }, "sap.platform.mobilecards": { "compatible": false