Procedure to Develop Our Own Custom Control by Extending SAP UI5 control

Objective :

We might require all the property and features which SAP UI control provide into our custom control but rendering UI elements should be as per our own requirement.

Let’s start:

To achieve the above requirement, I am considering sap.m.GenericTile for our example.

We will add two custom labels  into the GenericTile and we should get all the features of sap.m.GenericTile into our custom ui control as well.

First we should create a SAP UI5 project into SAP Web IDE.

And create a folder like below , where we will store our all customcontrol.

And create below two files :

Now we will extend all the metadata feature of sap.m.GenericTile into our own CustomGenericTile as below:

Now we can add our own additional properties , events what we want. As below:

sap.ui.define(
	["sap/ui/core/Control", "sap/m/GenericTile"],
	function(Control, GenericTile) {
		"use strict";
		var CustomGenericTile = GenericTile.extend("b.customcontrol.CustomGenericTile", {
			metadata: {
				library: "sap.m",
				properties: {
					firstName: {
						type: "string",
						group: "Misc",
						defaultValue: null
					},
					companyName: {
						type: "string",
						group: "Misc",
						defaultValue: null
					},
					footer: {
						type: "string",
						group: "Misc",
						defaultValue: null
					},
					footerColor: {
						type: "sap.m.ValueColor",
						group: "Misc",
						defaultValue: null
					},
					unit: {
						type: "string",
						group: "Misc",
						defaultValue: null
					},
					disabled: {
						type: "boolean",
						group: "Misc",
						defaultValue: null
					},
					frameTypeFooter: {
						type: "sap.m.FrameType",
						group: "Misc",
						defaultValue: null
					}

				}
			}

		});
		CustomGenericTile.prototype.generateUUID = function() {
			var d = new Date().getTime();
			var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function(c) {
				var r = (d + Math.random() * 16) % 16 | 0;
				d = Math.floor(d / 16);
				return (c === "x" ? r : (r & 0x3 | 0x8)).toString(16);
			});
			return uuid;
		};
		CustomGenericTile.prototype.setFooter = function(footer) {
			return this.setProperty("footer", footer);
		};
		CustomGenericTile.prototype.setFooterColor = function(footerColor) {
			return this.setProperty("footerColor", footerColor);
		};
		CustomGenericTile.prototype.setUnit = function(unit) {
			return this.setProperty("unit", unit);
		};
		CustomGenericTile.prototype.setDisabled = function(disabled) {
			return this.setProperty("disabled", disabled);
		};
		CustomGenericTile.prototype.setFirstName = function(firstName) {
			return this.setProperty("firstName", firstName);
		};
		CustomGenericTile.prototype.setCompanyName = function(companyName) {
			return this.setProperty("companyName", companyName);
		};
		CustomGenericTile.prototype.setFrameTypeFooter = function(frameTypeFooter) {
			return this.setProperty("frameTypeFooter", frameTypeFooter);
		};

		return CustomGenericTile;
	});

Now we have to write our own custom renderer as per our own requirement. But all the available features of sap.m.GenericTile also we can use as it is.

We can see from the above code snippet , we are retrieving value of our customized & inheritance property.

Now, we will start writing our own UI elements rendering process.

sap.ui.define(["sap/ui/core/Renderer", "sap/m/Label", "sap/m/GenericTile", "sap/m/TileContent", "sap/ui/layout/VerticalLayout"],
	function(Renderer, Label, GenericTile, TileContent, VerticalLayout) {
		"use strict";

		var CustomGenericTileRenderer = Renderer.extend("b.customcontrol.CustomGenericTileRenderer", {
			render: function(oRm, oControl) {
				this.renderPreamble(oRm, oControl);
				// implementation core renderer logic here
				var id = oControl.getId();
				/*Retrive Data From UI */
				/*Retrive data for cutom property*/
				var sFirstName = oControl.getFirstName();
				var sCompanyName = oControl.getCompanyName();
				/*Retrive data for inheritance property*/
				var sHeader = oControl.getHeader();
				var sFrameType = oControl.getFrameType();
				var oHeaderImage = oControl.getHeaderImage();
				var sState = oControl.getState();
				var sUnit = oControl.getUnit();
				var sFooter = oControl.getFooter();
				var sSubheader = oControl.getSubheader();
				var oFooterColor = oControl.getFooterColor();
				var bDisabled = oControl.getDisabled();
				var oFrameTypeFooter = oControl.getFrameTypeFooter();
				
				oRm.write("<div");
				oRm.writeControlData(oControl);
				oRm.writeAttribute("id", id + "-CustomGenericTile");
				oRm.writeAttribute("role", "presentation");
				oRm.write(">");

				var oGenericTile = new GenericTile(id + "-" + oControl.generateUUID(), {
					header: sHeader,
					headerImage: oHeaderImage,
					frameType: sFrameType,
					state:sState,
					subheader:sSubheader
				});
				// oGenericTile.addStyleClass("widthGeneric");
				var oTileContent = new TileContent(id + "-TileContent" + oControl.generateUUID(),{
					unit: sUnit,
					footer:sFooter,
					footerColor:oFooterColor,
					disabled : bDisabled,
					frameType : oFrameTypeFooter
				});

				var oVerticalLayout = new VerticalLayout(id + "-VerticalLayout" + oControl.generateUUID());

				var oLabelFirstName = new Label(id + "-LabelFirstName" + oControl.generateUUID(), {
					text: sFirstName
				});

				var oLabelCompanyName = new Label(id + "-LabelCompanyName" + oControl.generateUUID(), {
					text: sCompanyName
				});

				oVerticalLayout.addContent(oLabelFirstName);
				oVerticalLayout.addContent(oLabelCompanyName);

				oTileContent.setContent(oVerticalLayout);
				oGenericTile.addTileContent(oTileContent);
				oRm.renderControl(oGenericTile);

				oRm.write("</div>");

				this.renderPostamble(oRm, oControl);

			},

			renderPreamble: function(oRm, oControl) {

			},

			renderPostamble: function(oRm, oControl) {

			}

		});

		return CustomGenericTileRenderer;
	});

Now we have to create a model in component.js file as below:

var oModelGenericTile = new JSONModel({});
			var oGenericData = {
				"genericData":[
					{
						"firstName" : "Biplab Ray",
						"companyName": "TCS",
						"header" : "TATA Consultancy Services Pvt Ltd",
						"headerImage": "sap-icon://begin",
						"frameType":"OneByOne",
						"unit" : "unit",
						"footer":"footer"
					},
					{
						"firstName" : "Biplab Ray1",
						"companyName": "IBM",
						"header" : "Internation Business Machine Global Business",
						"headerImage": "sap-icon://begin",
						"frameType":"OneByOne",
						"unit" : "unitOne",
						"footer":"footerOne",
						"state":"Loading"
					},
					{
						"firstName" : "Biplab Ray2",
						"companyName": "E&Y",
						"header" : "E&Y",
						"headerImage": "sap-icon://compare",
						"frameType":"OneByOne",
						"unit" : "unitOne",
						"footer":"footerOne",
						"state":"Failed"
					},
					{
						"firstName" : "Biplab Ray3",
						"companyName": "SAP",
						"header" : "SAP LLP",
						"headerImage": "sap-icon://begin",
						"frameType":"OneByOne",
						"unit" : "unitOne",
						"footer":"footerOne",
						"state":"Failed"
					},
					{
						"firstName" : "Biplab Ray4",
						"companyName": "SAP Budapest",
						"header" : "SAP LLP Hungary",
						"headerImage": "sap-icon://compare",
						"frameType":"TwoByOne",
						"unit" : "unitOne",
						"footer":"footerOne"
					},
					{
						"firstName" : "Biplab Ray5",
						"companyName": "IBM Bratislava",
						"header" : "IBM Brtislava Inc",
						"headerImage": "sap-icon://begin",
						"frameType":"TwoByOne",
						"unit" : "unitOne",
						"footer":"footerOne",
						"state":"Loading"
					}
					]
				
			};
			oModelGenericTile.setData(oGenericData);
			this.setModel(oModelGenericTile, "oModelGenericTile");

Now we will integrate our own custom control into view as below:

<mvc:View controllerName="b.controller.businesscontroller.Wizard" xmlns:l="sap.ui.layout" xmlns:c="b.customcontrol"
	xmlns:mvc="sap.ui.core.mvc" xmlns:core="sap.ui.core" xmlns="sap.m">
<List items="{oModelGenericTile>/genericData}" growing="true" growingThreshold="2" growingTriggerText="More">
		<CustomListItem class="sapMLIBCustom">
	<c:CustomGenericTile firstName="{oModelGenericTile>firstName}" companyName="{oModelGenericTile>companyName}" header="{oModelGenericTile>header}" 
	headerImage="{oModelGenericTile>headerImage}" frameType="{oModelGenericTile>frameType}" unit="{oModelGenericTile>unit}"
	footer="{oModelGenericTile>footer}" state="{oModelGenericTile>state}"></c:CustomGenericTile>
	</CustomListItem>
	</List>
</mvc:View>

Enter below .css class into your application’s css file.

.sapMLIBCustom {
    display: -webkit-box;
    display: inline-flex !important;
    -webkit-box-align: center;
    align-items: center;
    position: relative;
    background: #ffffff;
    border-bottom: 1px solid #e5e5e5;
    /*padding: 0 1rem 0 1rem;*/
}

Now we will run our application and we will get like as below:

We could see our own CustomGenericTile having all the features of sap.m.GenericTile along with our own features.