SAPUI5 How to create a custom control by extending existing control

Question

i have to customize the functionality of the existing control (FacetFilter). i could not customize the functionality of the renderer of the FacetFilter. can you please help me in this.

the code i have in xml is

<FacetFilter
    id="idFacetFilter"
    type="Simple"
    showPersonalization="true"
    showReset="true"
    reset="handleFacetFilterReset"
    lists="{/ProductCollectionStats/Filters}">
    <lists>
      <FacetFilterList
        title="{type}"
        key="{key}"
        active="false"
        multiselect="true"
        listClose="handleListClose"
        items="{values}" >
        <items>
          <FacetFilterItem
            text="{text}"
            key="{key}"
            count="{data}" />
        </items>
      </FacetFilterList>
    </lists>
 </FacetFilter>

i tried to extend control, the code i tried is below,

jQuery.sap.declare("control.CustomFacetFilter");
sap.m.FacetFilter.extend("control.CustomFacetFilter", {});

i simply extended because i want all the features of the that control. i do not want to modify anything. i have the renderer file as follows.

/*
* @copyright
*/

sap.ui.define(['jquery.sap.global'],
function(jQuery) {
"use strict";


/**
 * FacetFilter renderer. 
 * @namespace
 */
var CustomFacetFilterRenderer = {
};


/**
 * Renders the HTML for the given control, using the provided {@link     sap.ui.core.RenderManager}.
 * 
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.render = function(oRm, oControl){
    switch (oControl.getType()) {

    case sap.m.FacetFilterType.Simple:
        CustomFacetFilterRenderer.renderSimpleFlow(oRm, oControl);
        break;

    case sap.m.FacetFilterType.Light:
        CustomFacetFilterRenderer.renderSummaryBar(oRm, oControl);
        break;
    }
};

/**
 * 
 * 
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.renderSimpleFlow = function(oRm, oControl) {

    oRm.write("<div");
    oRm.writeControlData(oControl);
    oRm.addClass("sapMFF");

    if (oControl.getShowSummaryBar()) {

        oRm.write(">");
        CustomFacetFilterRenderer.renderSummaryBar(oRm, oControl);
    } else {

        if (oControl._lastScrolling) {

            oRm.addClass("sapMFFScrolling");
        } else {

            oRm.addClass("sapMFFNoScrolling");
        }

        if (oControl.getShowReset()) {

            oRm.addClass("sapMFFResetSpacer");
        }
        oRm.writeClasses();
        oRm.write(">");


        if (sap.ui.Device.system.desktop) {
            oRm.renderControl(oControl._getScrollingArrow("left"));
        }
/*          // dummy after focusable area.
        oRm.write("<div tabindex='-1'");
        oRm.writeAttribute("id", oControl.getId() + "-before");
        oRm.write("></div>");*/
        // Render the div for the carousel
        oRm.write("<div");
        oRm.writeAttribute("id", oControl.getId() + "-head");
        oRm.addClass("sapMFFHead");
        oRm.writeClasses();
        oRm.write(">");

        var aLists = oControl._getSequencedLists();
        for (var i = 0; i < aLists.length; i++) {

            oRm.renderControl(oControl._getButtonForList(aLists[i]));
            if (oControl.getShowPersonalization()) {

                oRm.renderControl(oControl._getFacetRemoveIcon(aLists[i]));
            }
        }

        if (oControl.getShowPersonalization()) {
            oRm.renderControl(oControl.getAggregation("addFacetButton"));
        }
        oRm.write("</div>"); // Close carousel div
        if (sap.ui.Device.system.desktop) {
            oRm.renderControl(oControl._getScrollingArrow("right"));
        }

        if (oControl.getShowReset()) {

            oRm.write("<div");
            oRm.addClass("sapMFFResetDiv");
            oRm.writeClasses();
            oRm.write(">");
            oRm.renderControl(oControl.getAggregation("resetButton"));
            oRm.write("</div>");
        }
    }
    oRm.write("</div>");
};


/**
 * 
 * 
 * @param {sap.ui.core.RenderManager} oRm the RenderManager that can be used for writing to the render output buffer
 * @param {sap.ui.core.Control} oControl an object representation of the control that should be rendered
 */
CustomFacetFilterRenderer.renderSummaryBar = function(oRm, oControl) {

    // We cannot just render the toolbar without the parent div.  Otherwise it is
    // not possible to switch type from light to simple.
    oRm.write("<div");
    oRm.writeControlData(oControl);
    oRm.addClass("sapMFF");
    oRm.writeClasses();
    oRm.write(">");
    var oSummaryBar = oControl.getAggregation("summaryBar");
    oRm.renderControl(oSummaryBar);
    oRm.write("</div>");
};


return CustomFacetFilterRenderer;

}, /* bExport= */ true);

i simply copy pasted the code, i modified code inside that renderer when i run this code, its showing lists.js is not found, but here lists is an aggregation in FacetFilter. if we observe here in xml, FacetFilter is a top most parent and it has one child(FacetFilterList) which in turn has another child(FacetFilterItem). i already extended the control FacetFilter here, that means i got all the properties of the FacetFilter to my CustromFilter is it?, But still its showing lists.js is not found. i confused how to create custom control in this scenario can you please help me in this.

Answer 1

sap.ui.define(['./HerePathToFacetFilterRenderer', 'sap/ui/core/Renderer'],
function(FacetFilterRenderer, Renderer) {
"use strict";

    var CustomFacetFilterRenderer = Renderer.extend(FacetFilterRenderer);

    //... here your custom implementation, overwrite of base methods or hooks


return CustomFacetFilterRenderer;

}, /* bExport= */ true);

See TextAreaRenderer that inherits from InputBase https://github.com/SAP/openui5/blob/master/src/sap.m/src/sap/m/TextAreaRenderer.js

Actually docu should help more with an other way of extending existing controls https://openui5.hana.ondemand.com/#docs/guide/bcee26a4801748f39bf5698d83d903aa.html