CODEWITHSUNDEEP
controlssapui5
Werner Daehn
Werner Daehn

Reputation: 635

SAPUI5: Extend Control, renderer has html tags with event

I extend a Control to create a new custom control in UI5 and this control renders a tree as UL items nicely. Now I need to implement a collapse/expand within that tree. Hence my renderer writes a tag like 

<a class="json-toggle" onclick="_ontoggle"></a>

and within that _ontoggle function I will handle the collapse/expand logic.

No matter where I place the _ontoggle function in the control, I get the error "Uncaught ReferenceError: _ontoggle is not defined"

I am missing something obvious but I can't find what it is. At the moment I have placed a function inside the 

return Control.extend("mycontrol", 
  {_onToggle:  function(event) {},
   ...

Please note that this event is not one the control should expose as new event. It is purely for the internals of how the control reacts to a click event.

I read things about bind and the such but nothing that made sense for this use case.

Upvotes: 0

Views: 877

Answers (1)

Werner Daehn
Werner Daehn

Reputation: 635

Took me a few days to crack that, hence would like to provide you with a few pointers. There are obviously many ways to do that, but I wanted to make that as standard as possible.

The best suggestion I found was to use the ui5 Dialog control as sample. It consists of internal buttons and hence is similar to my requirement: Render something that does something on click.

https://github.com/SAP/openui5/blob/master/src/sap.ui.commons/src/sap/ui/commons/Dialog.js

In short, the solution is

1) The

<a class="json-toggle" href></a>

should not have an onclick. Neither in the tag nor by adding such via jQuery.

2) The control's javascript code should look like:

sap.ui.define(
[ 'sap/ui/core/Control' ],
function(Control) {
  var control = Control.extend(
                "com.controlname",
                {
                    metadata : {
                        ...
                    },

                    renderer : function(oRm, oControl) {
                        ...
                    },

                    init : function() {
                        var libraryPath = jQuery.sap.getModulePath("mylib");
                        jQuery.sap.includeStyleSheet(libraryPath + "/MyControl.css");
                    },

                    onAfterRendering : function(arguments) {
                        if (sap.ui.core.Control.prototype.onAfterRendering) {
                            sap.ui.core.Control.prototype.onAfterRendering.apply(this, arguments);
                        }
                    },
                });

  control.prototype.onclick = function (oEvent) {
    var target = oEvent.target;
    return false;
  };

  return control;
});

Nothing in the init(), nothing in the onAfterRendering(), renderer() outputs the html. So far there is nothing special.

The only thing related with the onClick is the control.prototype.onclick. The variable "target" is the html tag that was clicked.

Upvotes: 0

Related Questions