Skip to content

Instantly share code, notes, and snippets.

@umar4sap
Created January 6, 2015 12:11
Show Gist options
  • Save umar4sap/66ecd377103c8e21c478 to your computer and use it in GitHub Desktop.
Save umar4sap/66ecd377103c8e21c478 to your computer and use it in GitHub Desktop.
Custom Tiles using XML // source http://jsbin.com/salule
<!DOCTYPE HTML>
<html>
<head>
<script src="http://fb.me/react-with-addons-0.12.0.js"></script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Custom Tiles using XML</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons"
data-sap-ui-xx-bindingSyntax="complex"
>
</script>
<!-- XML-based view definition -->
<script id="view1" type="sapui5/xmlview">
<sap.ui.core.mvc:View controllerName="my.own.controller"
xmlns="sap.m"
xmlns:sap.ui.core.mvc="sap.ui.core.mvc"
xmlns:sap.ui.commons="sap.ui.commons"
xmlns:sap.ui.layout="sap.ui.layout">
<App>
<pages>
<Page title="CustomTile with Multiple Controls" enableScrolling="false">
<content>
<TileContainer id="tc1" width="100%" height="100%" editable="" allowAdd="" tileMove=""
tileDelete="" tileAdd="">
<tiles>
<CustomTile class= "sapMTile" id="ct1" removable="true" press="">
<content>
<HBox>
<Text id="id1" text="test1" textDirection="Inherit"
visible="true" wrapping="true" textAlign="Begin" width="" maxLines="2">
<tooltip></tooltip> <!-- sap.ui.core.TooltipBase -->
<dependents></dependents> <!-- sap.ui.core.Control, since 1.19 -->
</Text>
</HBox>
</content>
</CustomTile>
</tiles>
</TileContainer>
</content>
</Page>
</pages>
</App>
</sap.ui.core.mvc:View>
</script>
<script>
// Controller definition
sap.ui.controller("my.own.controller", {
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE HTML>
<html>
<head>
<script src="//fb.me/react-with-addons-0.12.0.js"><\/script>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Custom Tiles using XML</title>
<script id="sap-ui-bootstrap"
type="text/javascript"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m,sap.ui.layout,sap.ui.commons"
data-sap-ui-xx-bindingSyntax="complex"
>
<\/script>
<\!-- XML-based view definition -->
<script id="view1" type="sapui5/xmlview">
<sap.ui.core.mvc:View controllerName="my.own.controller"
xmlns="sap.m"
xmlns:sap.ui.core.mvc="sap.ui.core.mvc"
xmlns:sap.ui.commons="sap.ui.commons"
xmlns:sap.ui.layout="sap.ui.layout">
<App>
<pages>
<Page title="CustomTile with Multiple Controls" enableScrolling="false">
<content>
<TileContainer id="tc1" width="100%" height="100%" editable="" allowAdd="" tileMove=""
tileDelete="" tileAdd="">
<tiles>
<CustomTile class= "sapMTile" id="ct1" removable="true" press="">
<content>
<HBox>
<Text id="id1" text="test1" textDirection="Inherit"
visible="true" wrapping="true" textAlign="Begin" width="" maxLines="2">
<tooltip></tooltip> <\!-- sap.ui.core.TooltipBase -->
<dependents></dependents> <\!-- sap.ui.core.Control, since 1.19 -->
</Text>
</HBox>
</content>
</CustomTile>
</tiles>
</TileContainer>
</content>
</Page>
</pages>
</App>
</sap.ui.core.mvc:View>
<\/script>
<script>
// Controller definition
sap.ui.controller("my.own.controller", {
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#view1').html()
});
oView.placeAt('content');
<\/script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment