<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <script id="sap-ui-bootstrap"
      src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
      data-sap-ui-onInit="module:sap/ui/core/ComponentSupport"
      data-sap-ui-async="true"
      data-sap-ui-compatVersion="edge"
      data-sap-ui-excludeJQueryCompat="true"
      data-sap-ui-resourceRoots='{ "my.demo": "./" }'
      data-sap-ui-xx-componentPreload="off"
      data-sap-ui-xx-waitForTheme="init"
    ></script>
  </head>
  <body class="sapUiBody sapUiSizeCompact">
    <div data-sap-ui-component
      data-id="rootComponentContainer"
      data-name="my.demo"
      data-height="100%"
      data-settings='{ "id": "rootComponent" }'
    ></div>
  </body>
</html>
sap.ui.define([
  "sap/ui/core/UIComponent",
  "sap/ui/core/ComponentSupport",//https://github.com/SAP/ui5-tooling/issues/381
], (UIComponent) => {
  "use strict";

  return UIComponent.extend("my.demo.Component", {
    metadata: {
      interfaces: [
        "sap.ui.core.IAsyncContentCreation",
      ],
      manifest: "json",
    },

    init() {
      UIComponent.prototype.init.apply(this, arguments);
      this.getRouter().initialize();
    },

  });
});
{
  "_version": "1.63.0",
  "start_url": "index.html",
  "sap.app": {
    "id": "my.demo",
    "type": "application",
    "title": "My Awesome App",
    "description": "Sample Code",
    "applicationVersion": {
      "version": "0.0.1"
    },
    "dataSources": {}
  },
  "sap.ui": {
    "technology": "UI5",
    "deviceTypes": {
      "desktop": true,
      "tablet": true,
      "phone": true
    }
  },
  "sap.ui5": {
    "handleValidation": true,
    "dependencies": {
      "minUI5Version": "1.120",
      "libs": {
        "sap.ui.core": {},
        "sap.m": {}
      }
    },
    "config": {
      "sapFiori2Adaptation": true
    },
    "contentDensities": {
      "compact": true,
      "cozy": true
    },
    "resources": {
      "css": []
    },
    "models": {
      "": {
        "type": "sap.ui.model.json.JSONModel"
      }
    },
    "rootView": {
      "viewName": "my.demo.view.App",
      "id": "rootView",
      "type": "XML",
      "height": "100%",
      "async": true
    },
    "routing": {
      "routes": [
        {
          "name": "home",
          "pattern": "",
          "target": "home"
        }
      ],
      "targets": {
        "home": {
          "id": "homeView",
          "name": "Home",
          "level": 1
        },
        "notFound": {
          "id": "notFoundView",
          "name": "Home",
          "transition": "slide",
          "level": 98
        }
      },
      "config": {
        "routerClass": "sap.m.routing.Router",
        "async": true,
        "path": "my.demo.view",
        "type": "View",
        "viewType": "XML",
        "controlId": "rootApp",
        "controlAggregation": "pages",
        "transition": "slide",
        "bypassed": {
          "target": "notFound"
        },
        "homeRoute": "home"
      }
    }
  }
}
<mvc:View controllerName="my.demo.controller.App"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  displayBlock="true"
  height="100%"
>
  <App id="rootApp" autoFocus="false">
    <pages>
      <!-- will be added by the Router -->
    </pages>
  </App>
</mvc:View>
<mvc:View controllerName="my.demo.controller.Home"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  height="100%"
>
  <Page title="Home" showHeader="false" class="sapUiResponsiveContentPadding">
    <Text text="Your content ..." />
  </Page>
</mvc:View>
sap.ui.define([
  "sap/ui/core/mvc/Controller",
], (Controller) => {
  "use strict";

  return Controller.extend("my.demo.controller.Home", {
    onInit() {
      // ...
    },

  });
});
sap.ui.define([
  "sap/ui/core/mvc/Controller",
], (Controller) => {
  "use strict";

  return Controller.extend("my.demo.controller.App", {
    onInit() {
      // ...
    },

  });
});
# UI5 Basic Template

Feel free to fork and use it for e.g. reporting issues, sharing samples on Q&A platforms, etc..

1. Open the [edit version of this plunk](https://plnkr.co/edit/16J1TFICxbqETCzaxuZ0).
2. Click on "Fork" or press <kbd>Ctrl</kbd> + <kbd>Shift</kbd> + <kbd>S</kbd>.
3. Edit, save, and share the URL!

I recommend sharing the *embed* plunk with the following URL parameter:
```
https://embed.plnkr.co/<plunkID>/?show=preview:?sap-ui-xx-componentPreload=off
```

## Sharing Options

* Share the *embed* version of the plunk:
   ```
   https://embed.plnkr.co/<plunkID>
   ```
* Share with specific multiple panes:
   ```
   https://embed.plnkr.co/<plunkID>?show=myFolder/myScript.js,preview
   ```
* Share with URL parameters for the *preview* pane, whereas a leading `:?` is mandatory and `%26` corresponds to the `&` character in the URL:
   ```
   https://embed.plnkr.co/<plunkID>?show=myFolder/myScript.js,preview:?<param1>=...%26<param2>=...
   ```
   (See https://github.com/plnkr/feedback/issues/545 for the feature description and sample URLs)

For more sharing options, see the [documentation](https://ggoodman.gitbooks.io/plunker/content/embed.html#adding-the-embed-to-your-website).

## What about OData?

### OData V4

- Use the [OData V4 Trippin service](https://services.odata.org/TripPinRESTierService) directly which is [CORS enabled](https://github.com/OData/ODataSamples/issues/29#issuecomment-861736364). No reverse proxy server needed! However, there are [known issues in the TripPin service](https://github.com/search?q=repo%3AOData%2FODataSamples+%22v4%22+OR+%22trippin%22&type=issues&s=created&o=desc&state=open).
- Use one of the V4 services mentioned in https://blogs.sap.com/2017/12/05/new-sap-gateway-demo-system-available/ and sign up for a demo account on the "ES5" system as instructed in the blog post.

### OData V2

- Set up a [mock server](https://sdk.openui5.org/topic/3a9728ec31f94ca18a7d543ce419d85d) as none of the reference OData V2 services from `odata.org` currently support CORS. Consider voting for https://github.com/OData/ODataSamples/issues/145 (Give it a 👍).
- Use one of the V2 services mentioned in https://blogs.sap.com/2017/12/05/new-sap-gateway-demo-system-available/ and sign up for a demo account on the "ES5" system as instructed in the blog post.