javascript - SAPUI5 How to create a custom control by extending existing control -
i have customize functionality of existing control (facetfilter). not customize functionality of renderer of facetfilter. can please me in this.
the code 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 extend control, code tried below,
jquery.sap.declare("control.customfacetfilter"); sap.m.facetfilter.extend("control.customfacetfilter", {});
i extended because want features of control. not want modify anything. have renderer file follows.
/* * @copyright */ sap.ui.define(['jquery.sap.global'], function(jquery) { "use strict"; /** * facetfilter renderer. * @namespace */ var customfacetfilterrenderer = { }; /** * renders html given control, using provided {@link sap.ui.core.rendermanager}. * * @param {sap.ui.core.rendermanager} orm rendermanager can used writing render output buffer * @param {sap.ui.core.control} ocontrol object representation of control should 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 rendermanager can used writing render output buffer * @param {sap.ui.core.control} ocontrol object representation of control should 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 div carousel orm.write("<div"); orm.writeattribute("id", ocontrol.getid() + "-head"); orm.addclass("sapmffhead"); orm.writeclasses(); orm.write(">"); var alists = ocontrol._getsequencedlists(); (var = 0; < 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 rendermanager can used writing render output buffer * @param {sap.ui.core.control} ocontrol object representation of control should rendered */ customfacetfilterrenderer.rendersummarybar = function(orm, ocontrol) { // cannot render toolbar without parent div. otherwise // not possible switch type light 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 copy pasted code, modified code inside renderer when run code, showing lists.js not found, here lists aggregation in facetfilter. if observe here in xml, facetfilter top parent , has 1 child(facetfilterlist) in turn has child(facetfilteritem). extended control facetfilter here, means got properties of facetfilter custromfilter it?, still showing lists.js not found. confused how create custom control in scenario can please me in this.
sap.ui.define(['./herepathtofacetfilterrenderer', 'sap/ui/core/renderer'], function(facetfilterrenderer, renderer) { "use strict"; var customfacetfilterrenderer = renderer.extend(facetfilterrenderer); //... here custom implementation, overwrite of base methods or hooks return customfacetfilterrenderer; }, /* bexport= */ true);
see textarearenderer inherits inputbase https://github.com/sap/openui5/blob/master/src/sap.m/src/sap/m/textarearenderer.js
actually docu should more other way of extending existing controls https://openui5.hana.ondemand.com/#docs/guide/bcee26a4801748f39bf5698d83d903aa.html
Comments
Post a Comment