<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page</title>
<script src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme='sap_bluecrystal'
data-sap-ui-libs='sap.m' data-sap-ui-compatVersion="edge" data-sap-ui-preload="async" data-sap-ui-bindingSyntax='complex' data-sap-ui-resourceroots='{"sap.m.sample": "./"}'
data-sap-ui-frameOptions="trusted">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.3.2/jspdf.min.js"></script>
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.Shell({
showLogout: false,
appWidthLimited: false,
app: new sap.ui.core.ComponentContainer({
name: "sap.m.sample",
height: "100%",
width: "100%",
settings: {
id: "sample"
},
propagateModel: true
})
}).placeAt("content");
});
</script>
</head>
<body id="content" style="margin: 0" class="sapUiBody">
</body>
</html>
// Code goes here
/* Styles go here */
In response to https://stackoverflow.com/q/54085801/7626277
{"ProductCollection": [{
"productHeader": "Tile Header - 1",
"productSubHeader" : "Tile SubHeader - 1",
"ProductPicUrl": "sap-icon://competitor"
}, {
"productHeader": "Tile Header - 2",
"productSubHeader" : "Tile SubHeader - 2",
"ProductPicUrl": "sap-icon://badge"
}, {
"productHeader": "Tile Header - 3",
"productSubHeader" : "Tile SubHeader - 3",
"ProductPicUrl": "sap-icon://broken-link"
}, {
"productHeader": "Tile Header - 4",
"productSubHeader" : "Tile SubHeader - 4",
"ProductPicUrl": "sap-icon://create"
}, {
"productHeader": "Tile Header - 5",
"productSubHeader" : "Tile SubHeader - 5",
"ProductPicUrl": "sap-icon://pending"
}, {
"productHeader": "Tile Header - 6",
"productSubHeader" : "Tile SubHeader - 6",
"ProductPicUrl": "sap-icon://decision"
},{
"productHeader": "Tile Header - 7",
"productSubHeader" : "Tile SubHeader - 7",
"ProductPicUrl": "sap-icon://process"
}, {
"productHeader": "Tile Header - 8",
"productSubHeader" : "Tile SubHeader - 8",
"ProductPicUrl": "sap-icon://accept"
}, {
"productHeader": "Tile Header - 9",
"productSubHeader" : "Tile SubHeader - 9",
"ProductPicUrl": "sap-icon://alert"
}]}
<View xmlns="sap.m">
<App id="rootControl"></App>
</View>
sap.ui.define(["sap/ui/core/UIComponent", "sap/ui/model/json/JSONModel"],
function(UIComponent,JSONModel) {
"use strict";
return UIComponent.extend("sap.m.sample.Component", {
metadata: {
manifest: "json"
},
init: function() {
var oModel = new JSONModel("data.json");
this.setModel(oModel);
UIComponent.prototype.init.apply(this, arguments);
this.getRouter().initialize();
this.getRouter().attachTitleChanged(function(oEvent) {
document.title = oEvent.getParameter("title");
});
}
});
}, true);
appDescription = Example App
appTitle = Example
appTitle = Example
appDescription = Example App
appTitle = Example
sap.ui.define(function() {
"use strict";
return sap.ui.controller("sap.m.sample.Main", {
// onInit: function() {
// },
onAfterRendering: function() {
},
onSearch: function() {
console.log("Searching");
},
onSelectionChange: function() {
console.log("changing Selection");
}
});
});
<mvc:View controllerName="sap.m.sample.Main" xmlns="sap.m" xmlns:mvc="sap.ui.core.mvc" xmlns:layout="sap.ui.layout">
<Page id="page" title="{masterView>/title}" showHeader="true" enableScrolling="true">
<content>
<Panel height="100%" width="100%" backgroundDesign="Transparent">
<layout:Grid containerQuery="true" defaultSpan="XL12 L12 M12 S12" width="100%">
<layout:VerticalLayout width="100%" class="gridWrapper">
<FlexBox alignItems="Center" alignContent="Center" direction="Row" renderType="Bare" wrap="Wrap" width="100%" displayInline="true" fitContainer="true" items="{/ProductCollection}">
<items>
<GenericTile header="{productHeader}" subheader="{productSubHeader}" press="onTilePress">
<TileContent>
<ImageContent src="{ProductPicUrl}"/>
</TileContent>
</GenericTile>
</items>
</FlexBox>
</layout:VerticalLayout>
</layout:Grid>
</Panel>
</content>
</Page>
</mvc:View>
{
"_version": "1.1.0",
"sap.app": {
"_version": "1.1.0",
"id": "sample",
"type": "application",
"i18n": "i18n.properties",
"title": "{{appTitle}}",
"description": "{{appDescription}}",
"applicationVersion": {
"version": "1.0.0"
},
"dataSources": {
"products": {
"uri": "data.json",
"type": "JSON",
"settings": {
"odataVersion": "2.0",
"localUri": "sap.m.sample.data.json",
"annotations": []
}
}
}
},
"sap.ui": {
"_version": "1.1.0",
"technology": "UI5",
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": ["sap_bluecrystal"],
"fullWidth": false
},
"sap.ui5": {
"_version": "1.1.0",
"rootView": "sap.m.sample.App",
"dependencies": {
"minUI5Version": "1.30",
"libs": {
"sap.m": {}
}
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "sap.m.sample.i18n"
}
},
"products": {
"type": "sap.ui.model.json.JSONModel",
"settings": {
"defaultOperationMode": "Server",
"defaultBindingMode": "TwoWay",
"defaultCountMode": "None",
"useBatch": false
},
"dataSource": "products"
}
},
"resources": {
"css": [{
"uri": "style.css"
}]
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewPath": "sap.m.sample",
"controlId": "rootControl",
"viewType": "XML",
"async": true,
"bypassed": {
"target": ["Main"]
}
},
"routes": [{
"name": "Main",
"pattern": "",
"target": ["Main"]
}],
"targets": {
"Main": {
"viewName": "Main",
"controlAggregation": "pages",
"viewLevel": "1"
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
}
}
}