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