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

[arthursilva]

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