title: SAPUI5 How to create a custom control by extending existing control
body: <p>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.</p>
  
  <p>the code i have in xml is</p>
  
  <pre><code>&lt;FacetFilter
      id="idFacetFilter"
      type="Simple"
      showPersonalization="true"
      showReset="true"
      reset="handleFacetFilterReset"
      lists="{/ProductCollectionStats/Filters}"&gt;
      &lt;lists&gt;
        &lt;FacetFilterList
          title="{type}"
          key="{key}"
          active="false"
          multiselect="true"
          listClose="handleListClose"
          items="{values}" &gt;
          &lt;items&gt;
            &lt;FacetFilterItem
              text="{text}"
              key="{key}"
              count="{data}" /&gt;
          &lt;/items&gt;
        &lt;/FacetFilterList&gt;
      &lt;/lists&gt;
   &lt;/FacetFilter&gt;
  </code></pre>
  
  <p>i tried to extend control, the code i tried is below,</p>
  
  <pre><code>jQuery.sap.declare("control.CustomFacetFilter");
  sap.m.FacetFilter.extend("control.CustomFacetFilter", {});
  </code></pre>
  
  <p>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.</p>
  
  <pre><code>/*
  * @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("&lt;div");
      oRm.writeControlData(oControl);
      oRm.addClass("sapMFF");
  
      if (oControl.getShowSummaryBar()) {
  
          oRm.write("&gt;");
          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("&gt;");
  
  
          if (sap.ui.Device.system.desktop) {
              oRm.renderControl(oControl._getScrollingArrow("left"));
          }
  /*          // dummy after focusable area.
          oRm.write("&lt;div tabindex='-1'");
          oRm.writeAttribute("id", oControl.getId() + "-before");
          oRm.write("&gt;&lt;/div&gt;");*/
          // Render the div for the carousel
          oRm.write("&lt;div");
          oRm.writeAttribute("id", oControl.getId() + "-head");
          oRm.addClass("sapMFFHead");
          oRm.writeClasses();
          oRm.write("&gt;");
  
          var aLists = oControl._getSequencedLists();
          for (var i = 0; i &lt; 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("&lt;/div&gt;"); // Close carousel div
          if (sap.ui.Device.system.desktop) {
              oRm.renderControl(oControl._getScrollingArrow("right"));
          }
  
          if (oControl.getShowReset()) {
  
              oRm.write("&lt;div");
              oRm.addClass("sapMFFResetDiv");
              oRm.writeClasses();
              oRm.write("&gt;");
              oRm.renderControl(oControl.getAggregation("resetButton"));
              oRm.write("&lt;/div&gt;");
          }
      }
      oRm.write("&lt;/div&gt;");
  };
  
  
  /**
   * 
   * 
   * @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("&lt;div");
      oRm.writeControlData(oControl);
      oRm.addClass("sapMFF");
      oRm.writeClasses();
      oRm.write("&gt;");
      var oSummaryBar = oControl.getAggregation("summaryBar");
      oRm.renderControl(oSummaryBar);
      oRm.write("&lt;/div&gt;");
  };
  
  
  return CustomFacetFilterRenderer;
  
  }, /* bExport= */ true);
  </code></pre>
  
  <p>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.</p>