Skip to Content
avatar image
felix zhao

How to launch Fiori application by index.html

Jan 04, 2018 at 03:01 AM | 296 Views

Hi Experts,

I have to launch the fiori app as BSP Application by index.html cause some special reason,but I noticed that the latest WebIDE(Version: 170330) local version doesn't generate index.html by wizard any more, I want to new create index.html file, but the old version index.html (I copied from my previous project that is maybe about 2 years ago) doesn't work also, Could some experts help me out, thank you very much.

My new Component.js is

jQuery.sap.declare("com.xxx.testztest_001.Component");sap.ui.getCore().loadLibrary("sap.ui.generic.app");
jQuery.sap.require("sap.ui.generic.app.AppComponent");sap.ui.generic.app.AppComponent.extend("com.xxx.testztest_001.Component",     {
        metadata:{"manifest": "json"}});

So I want to know, How to code the index.html to launch this Component.js

thank you in advance.

best regards,

felix.zhao

SAPUI5
SAP Fiori
Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • Best Answer
    avatar image
    Jun Wu
    Jan 04, 2018 at 01:26 PM

    <!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>YOURAPP</title>

    <!-- Bootstrapping UI5 -->
    <script id="sap-ui-bootstrap"
    src="resources/sap-ui-core.js"
    data-sap-ui-libs="sap.m"
    data-sap-ui-theme="sap_bluecrystal"
    data-sap-ui-compatVersion="edge"
    data-sap-ui-bindingSyntax='complex'
    data-sap-ui-resourceroots='{"<YOURCOMPONENTID>": "."}'
    data-sap-ui-frameOptions="trusted">
    </script>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <script>
    var oStartupParameters = jQuery.sap.getUriParameters().mParams;
    sap.ui.getCore().attachInit(function () {
    sap.ui.require([
    "sap/m/Shell",
    "sap/ui/core/ComponentContainer"
    ], function (Shell, ComponentContainer) {
    // initialize the UI component
    new Shell({
    app: new ComponentContainer({
    height : "100%",
    name : "<YOURCOMPONENTID>",
    settings: {
    componentData: { startupParameters: oStartupParameters }
    }
    })
    }).placeAt("content");
    });
    });
    </script>

    </head>

    <!-- UI Content -->
    <body id="content">
    </body>
    </html>

    Add comment
    10|10000 characters needed characters exceeded