Dynamically creating objects and adding events to it

AppBuilder has a number of visual and non-visual components. I am interested in dynamically creating these components in my code and adding event handlers to them. For example, how can I dynamically create an instance of the HTTP component in my code and add events for done and fail to it?

Hola John,

Maybe we can specify a bit more what is needed. Certainly, it's possible to create AB controls at runtime (or any other kind of control, just by providing the right HTML markup and Javascript code), however, I am not sure if this apply to non visual controls like the HTTP control. But the point, in this case, is that we no need to use the HTTP control, that is, we can use the jQuery "post", "get", or even the "ajax" methods, in order to perform HTTP calls and get ready for the "done" and "fail" events.

The creation of AB controls in runtime is not documented, because in fact we rarely need something like that, and, on the other hand, we can create the controls by using the right HTML markup and Javascript code. It's possible to do it, but, maybe not really needed. You can get what is needed in the app's views HTML (once compiled) and the "app.js" objects that every control has. As a sample, you can place the bellow HTML markup in an HTML control in an app's view:

<dab-push-button v-bind="app.store.mybutton"></dab-push-button>

And then you can place the bellow Javascript code, which defines the "dab-push-button":

app.setVar('mybutton', { name: "button1", classes: "", size: "sm", title: "", tabIndex: 0, text: "button1", kind: "primary", outline: false, active: false, leftIcon: "", rightIcon: "", leftBadge: "", leftBadgeKind: "light", leftBadgePilled: false, rightBadge: "", rightBadgeKind: "light", rightBadgePilled: false, hidden: false, disabled: false, event: null, blurHandler: function () {}, focusHandler: function () {}, clickHandler: function () { alert('You clicked mybutton!'); }, dblclickHandler: function () {}, mouseupHandler: function () {}, mousedownHandler: function () {}, mousemoveHandler: function () {}, mouseenterHandler: function () {}, mouseleaveHandler: function () {}, contextmenuHandler: function () {} });

However, it's also possible to place a button in this way, by providing the right HTML markup and Boostrap CSS, which as you know is the framework used in DecSoft App Builder. Again, you can place the below HTML markup inside an HTML control in an app's view:

<button id="mybutton" class="btn btn-sm btn-primary">Press here!</button>

And then you can place the below Javascript code in the app's view Show event:

$('#mybutton').unbind('click').bind('click', function () { alert('You clicked mybutton!'); });

Note the "unbind().bind()" use: this is to avoid to attach twice the "click" event of the button, for example, if we goto another app's view and then go back to the view which attach the event. If we don't "unbind" the event, then the "click" event can be executed twice, which probably is not what we expected. We can also use here a possible global variable in order to avoid a double event attaching.

If this don't answer your, please, John, don't hesitate to post here any further questions.

---