SAPUI5 comes with a vast variety of components and objects, but in certain cases a components may does not match with the user expectation. In a parallel approach, a developer may want to innovate on the front-end by building own resources.
As SAPUI5 and OPENUI5 were written based on javascript programming language, there is a possibility to create your own objects in javascript and use it on your project. In this document, I will present how to create a custom tile, and explain how to place it on your project.
Create Tile.js file in <project>/control/
The first thing to do is to create Tile.js file. For organization reasons, let’s place custom objects in a single folder called control.
Copy and past the following code to the created Tile.js file:
sap.ui.define([
"sap/ui/core/Control"
], function(Control) {
"use strict";
return Control.extend("_custom.control.Tile", {
/**
* Metadata:
* Where properties, aggregations and events
* are declared
*/
metadata: {
properties: {
noData: {
type: "string",
defaultValue: "No data"
},
width: {
type: "sap.ui.core.CSSSize",
defaultValue: "auto"
},
height: {
type: "sap.ui.core.CSSSize",
defaultValue: "auto"
},
padding: {
type: "sap.ui.core.CSSSize",
defaultValue: "1rem"
}
},
defaultAggregation: "content",
aggregations: {
content: {
type: "sap.ui.core.Control",
multiple: false, // 1:1
singularName: "content"
}
}
},
/**
* Init: Called when object is being created
* @public
*/
init: function() {
this._oNoDataLabel = new sap.m.Label().addStyleClass("cockpitPanelContainerNoData");
},
/**
* Exit: Garbage collector
* @public
*/
exit: function() {
this._oNoDataLabel.destroy();
delete this._oNoDataLabel;
},
renderer: {
/**
* Main method for custom objects.
* In order to display the object with properties
* and aggregations defined, the method below
* treat them, and allows the developer to insert
* css classes or styles
*
* @public
* @param {object} oRm
* @param {object} oControl
*/
render: function(oRm, oControl) {
oRm.write("<div tabindex=\"0\"");
oRm.writeControlData(oControl);
// write classes
oRm.addClass("tileLayout");
oRm.writeClasses();
// write styles
oRm.addStyle("padding", oControl.getPadding());
oRm.addStyle("height", oControl.getHeight());
oRm.addStyle("width", oControl.getWidth());
oRm.writeStyles();
oRm.write(">");
this._renderContent(oRm, oControl); //
oRm.write("</div>");
},
/**
* Render each object of content aggregation
* to the main object
* @private
* @param {object} oRm
* @param {object} oControl
*/
_renderContent: function(oRm, oControl) {
var oContent = oControl.getAggregation("content");
if (!oContent || oContent.length === 0) {
// no data found on content aggregation
this._renderNoData(oRm, oControl);
} else {
oRm.renderControl(oControl.getContent());
}
},
/**
* Render 'noData' property to the main object
* @private
* @param {object} oRm
* @param {object} oControl
*/
_renderNoData: function(oRm, oControl) {
if (!oControl._oNoDataLabel.getText()) {
// force "no data" text in case of empty container
oControl._oNoDataLabel.setText("Empty Tile");
}
oRm.write("<div");
oRm.writeClasses();
oRm.write(">");
oRm.renderControl(oControl._oNoDataLabel);
oRm.write("</div>");
}
}
});
});
Create/Edit style.css file
As your can see above, there is a mention to a css class(tileLayout). Provide the following enhancement on your style.css.
.tileLayout {
border: solid 1px;
box-sizing: border-box;
display: inline-block;
}
Declaring custom Tile on your view
Now, the custom Tile object should be declared on your view. To do it, declare the control folder as a namespace at the begging of the file on <mvc:View> component. In your example, c is the corresponding namespace of the custom folder. Then, call <c:Tile> on view body with the desires parameters.
Feel free to copy and paste the view file below.
<mvc:View
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:form="sap.ui.layout.form"
<!-- custom folder reference -->
xmlns:c="_custom.control"
xmlns:l="sap.ui.layout"
controllerName="opensap.manageproducts.controller.
<Panel
class="sapUiResponsiveMargin"
headerText="Custom Tile"
width="auto"
expanded="true">
<content>
<!-- custom Tile comes here-->
<c:Tile width="180px" height="175px">
<c:content>
<l:VerticalLayout>
<Link text="Tile" class="sapMLnk sapMLnkEmphasized sapMLnkMaxWidth"/>
<l:HorizontalLayout class="sapUiTinyMarginTopBottom">
<Text text="Here's your custom tile" textAlign="Begin"/>
</l:HorizontalLayout>
</l:VerticalLayout>
</c:content>
</c:Tile>
</content>
</Panel>
</mvc:View>
Result
Run the your project and see the result, your Tile should be like this.
Arthur Silva
Amazing document.