WebPage Card
The WebPage Card allows to embed HTML page in the content area, which will be isolated in iframe.
Properties
Property | Type | Required | Description | Schema Version | Since |
---|---|---|---|---|---|
src | string | Yes | The URL of the web page to be embedded. | 1.33.0 | 1.90 |
sandbox | string | No | Determines what restrictions are applied to the content of the embedded page. By default full restrictions are applied. This is the preferred value if the page origin is not trusted. Set this to space-separated tokens to lift particular restrictions. For more detailed documentation and possible tokens read the iframe sandbox attribute documentation. | 1.33.0 | 1.90 |
minHeight | sap.ui.core.CSSSize | No | Defines the minimum height of the content. Default value is "150px". | 1.33.0 | 1.90 |
Example
Define the manifest.json
of the card:
{ "sap.app": { "id": "card.explorer.webpage.card", "type": "card", "title": "Sample of a WebPage Card", "subTitle" :"Sample of a WebPage Card", "applicationVersion": { "version": "1.0.0" }, "shortTitle": "A short title for this Card", "info": "Additional information about this Card", "description": "A long description for this Card", "tags": { "keywords": [ "WebPage", "Card", "Sample" ] } }, "sap.ui": { "technology": "UI5" }, "sap.card": { "type": "WebPage", "configuration": { "parameters": { "minHeight": { "description": "Minimum height of the content", "type": "string", "value": "25rem" } } }, "header": { "title": "OpenUI5 Events", "icon": { "src": "sap-icon://desktop-mobile" } }, "content": { "src": "https://openui5.org/events", "minHeight": "{{parameters.minHeight}}" } } }
Create the view to display the card:
<mvc:View xmlns:w="sap.ui.integration.widgets"> <w:Card manifest="./manifest.json" width="400px" height="auto" /> </mvc:View>Try it Out