Indroduction
A scenario where SAP UI 5 application has multiple SAP UI 5 Views with each view having an independent functionality, and each view needs to be extended as a separate widget for Use in Cloud Portal. In such a scenario, multiple spec files can be included in the project along with multiple startpoint HTML files.
Example
Below are two sample spec files:-
specification1.spec.xml
<?xml version='1.0' encoding='UTF-8'?>
<Module>
<ModulePrefs title="Trial Widgets" height="250" description='A widget for validating' thumbnail='<--Widget icon image path-->'>
<Require feature="sap-xhrwrapper" />
</ModulePrefs>
<Content view="authoring, consumption, mobile, preview" href="./index1.html"/>
</Module>
specification2.spec.xml
<?xml version='1.0' encoding='UTF-8'?>
<Module>
<ModulePrefs title="Trial Widgets new splitter" height="250" description='A widget for validating' thumbnail='<--Widget icon image path-->'>
<Require feature="sap-xhrwrapper" />
</ModulePrefs>
<Content view="authoring, consumption, mobile, preview" href="./index2.html"/>
</Module>
Note that in both the xml we have separate "href" path in content tag.
Here both specification files will be deployed as two different widgets in SAP HANA cloud portal. 'href' separates them by having different html files for both of them.
Each html file can be configured accordingly to load only the desired view. This will make widgets to load only particular html file with its own initialized view.
Here are sample index.html files:-
index1.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("trialwidgets");
var view = sap.ui.view({id:"idwidgetView1", viewName:"trialwidgets.widgetView", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
index2.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons"
data-sap-ui-theme="sap_goldreflection">
</script>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
sap.ui.localResources("trialwidgets");
var view = sap.ui.view({id:"idrteWidgetView", viewName:"trialwidgets.rteViewWidget", type:sap.ui.core.mvc.ViewType.JS});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Both index files are refering to their own independent views in thier <script> tag. This makes each index file load only mentioned SAP UI5 Views.
These index files can later be referenced in 'href' tag of specification xml files making them separate widgets but within same SAP UI5 application.
