Creating custom Tile on SAPUI5 and using it on your SAP Web IDE project

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