源代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fiori Launchpad Sandbox</title>
<script>
window["sap-ushell-config"] = {
defaultRenderer: "fiori2",
bootstrapPlugins: {
KeyUserPlugin: {
component: "sap.ushell.plugins.rta"
},
PersonalizePlugin: {
component: "sap.ushell.plugins.rta-personalize"
}
},
applications: {
"display-uimodule": {
title: "Products",
description: "App Description",
icon: "sap-icon://add",
additionalInformation: "SAPUI5.Component=tutorial.products",
applicationType: "URL",
url: "./",
navigationMode: "embedded"
},
"display-uimodule2": {
title: "Jerry Products",
description: "Jerry's Products",
icon: "sap-icon://add",
additionalInformation: "SAPUI5.Component=tutorial.products",
applicationType: "URL",
url: "./",
navigationMode: "embedded"
}
}
};
</script>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/test-resources/sap/ushell/bootstrap/sandbox.js"
></script>
<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-resourceroots='{
"tutorial.products": "./"
}'
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-frameOptions="allow"
></script>
<script>
sap.ui.getCore().attachInit(() => sap.ushell.Container.createRenderer().placeAt("content"));
</script>
</head>
<body class="sapUiBody" id="content"></body>
</html>
實作要點
直接給 window 的 sap-ushell-config 屬性寫入 Fiori Launchpad 的配置值，其中 Launchpad tiles 的配置，寫在 applications 字段裡：
其中 additionalInformation 字段的 SAPUI5.Component=後面，指定了 tile 對應的 SAP UI5 Component 的技術明細。
該 Component 對應的 Component.js, 必須和 Fiori Launchpad 本地實作的 flpSandbox.html, 位于同一層級結構下：
最後效果如下：