OroUIBundle macro oro_widget_render

I have a problem with link/button who open a dialog (rendered with macro clientClink() or clientButton()). The link or button are well rendered but the javascript callback didn’t work..

Have you ever encounter this problem before?

Topic

[Hryhorii HrebiniukParticipant]

Hi pcahard,

Could you provide example of your code with options that you pass to clientClink() macro?
And, what is the flow of this control appearance on the page? Is it in page content and appears after navigation action, or does it get on a page/dialog dynamically (you add this control beside general navigation)?

clientClink() and clientButton() macros contain options that have be processed in order to bind callback handlers. It is done automatically by oroui/js/app/views/page/content-view:initLayout() (in stack of render method) for whole page content of response, after navigation action. But if you add your button on a page/dialog in other flow you have to manually invoke initLayout() js-method of related view instance.

[pcahardParticipant]

Hello Hryhoril,

Thank you for your response, you can see the code on: https://gist.github.com/pcahard/53abf57cb9356bb07bfb

As you can see, the content of the widget is rendered on the page content as usually.

[Hryhorii HrebiniukParticipant]

Hello pcahard,

Yes, the widget link is added properly in you code, it have to work.

Can’t tell what is the problem, so let’s do a bit debugging. There’s place where click event handler have to be bound to the link
oroui/js/app/components/widget-component. Please, check if it gets there. If not – check if WidgetComponent is initialized at all. If not, please, send HTML of you link with data-attributes, how it is fetched from server.

What version OroCRM do you use, BTW?

[jnetoParticipant]

hello @Hryhorii Hrebiniuk

But if you add your button on a page/dialog in other flow you have to manually invoke initLayout() js-method of related view instance.

How can i manually invoke the initLayout for my button ?

[Hryhorii HrebiniukParticipant]

Hello @jneto

There’s method initLayout in any instance of Backbone.View . This is not native Backbone.View, it is added in OroPlatform >= v1.8 (extend/backbone.js). You can invoke this method to initialize all components declaration inside a View’s DOM-element. (See more about components declaration in article “How to Replace Inline-Javascript with a Component“). The methods returns promise object that allows to add handler on layout initializing.

JavaScript

render: function() { // add flag that render will be async this._deferredRender(); // get HTML with declared components and update the element var htmlWithDeclaredPageComponents = ... this.$el.html(htmlWithDeclaredPageComponents); // resolve deferred rendering once layout is updated this.initLayout().done(_.bind(this._resolveDeferredRender, this); }

1 2 3 4 5 6 7 8 9 10 11

render: function() {     // add flag that render will be async     this._deferredRender();       // get HTML with declared components and update the element     var htmlWithDeclaredPageComponents = ...         this.$el.html(htmlWithDeclaredPageComponents);       // resolve deferred rendering once layout is updated     this.initLayout().done(_.bind(this._resolveDeferredRender, this); }

In older versions of OroPlatform (1.5-1.7) there was a bit different approach. To initialize components we had to execute mediator’s handler ‘layout:init’ and pass there root element of the view and the instance of View:

JavaScript

render: function() { // add flag that render will be async this._deferredRender(); // get HTML with declared components and update the element var htmlWithDeclaredPageComponents = ... this.$el.html(htmlWithDeclaredPageComponents); // resolve deferred rendering once layout is updated mediator.execute('layout:init', this.$el, this).done(_.bind(this._resolveDeferredRender, this); }

1 2 3 4 5 6 7 8 9 10 11

render: function() {     // add flag that render will be async     this._deferredRender();       // get HTML with declared components and update the element     var htmlWithDeclaredPageComponents = ...         this.$el.html(htmlWithDeclaredPageComponents);       // resolve deferred rendering once layout is updated     mediator.execute('layout:init', this.$el, this).done(_.bind(this._resolveDeferredRender, this); }

[Author]

Replies