Use Integration Cards In Apps
There are two ways to consume a card:
- Pass a URL from where to load the manifest.
- Pass a manifest object and a base URL. The base URL is needed to resolve relative URLs of card static resources like translations and icons.
Consumption in UI5
Using manifest URL
Consumption in a XML View
<mvc:View xmlns:w="sap.ui.integration.widgets"> <w:Card manifest="./mycardbundle/manifest.json" width="400px" height="auto"/> </mvc:View>
Consumption in JS
var oCard = new sap.ui.integration.widgets.Card(); oCard.setManifest("./mycardbundle/manifest.json"); someContainer.addContent(oCard);
Using manifest object and base URL
Consumption in a XML View
NOTE: For the example below the manifest object is saved inside an unnamed model which is then used with the standard UI5 binding syntax.
<mvc:View xmlns:w="sap.ui.integration.widgets"> <w:Card manifest="{/manifestObject}" baseUrl="./mycardbundle/" width="400px" height="auto"/> </mvc:View>
Consumption in JS
var oManifest = { "sap.app": { "i18n": "i18n/i18n.properties", "type": "card", "id": "my.card" }, "sap.card": { "type": "List", "header": { ... }, "content": { ... } } }; var oCard = new sap.ui.integration.widgets.Card(); oCard.setManifest(oManifest); oCard.setBaseUrl("./mycardbundle/"); someContainer.addContent(oCard);
Consumption in HTML
Cards can also be consumed in HTML. To do that you should load the integration card bundle which includes a minimalistic UI5 Core and all other components which are needed to render a card. There are two resource bundles depending if your application has jQuery or not:
- With jQuery https://{YourUI5Location}/resources/sap-ui-integration.js
- Without jQuery https://{YourUI5Location}/resources/sap-ui-integration-nojQuery.js
After the bundle is loaded "ui-integration-card" custom element is created.
Loading the integration bundle
- Set the URL to the integration bundle
- Set the ID to be "sap-ui-bootstrap"
- Set a theme. The recommended one is "sap_fiori_3"
<script src="https://ui5.sap.com/resources/sap-ui-integration.js" id="sap-ui-bootstrap" data-sap-ui-theme="sap_fiori_3"> </script>
Using manifest URL
<body> <ui-integration-card manifest="./some/location/my/card/manifest.json"></ui-integration-card> </body>
Using manifest object and base URL
<body> <ui-integration-card base-url='./some/location/my/card/' manifest='{ "sap.app": { "type": "card", "id": "tableCardAsAttribute" }, "sap.card": { "type": "Table", "header": { ... }, "content": { ... } } }'> </ui-integration-card> </body>