xpages - Pass javascript code to Custom Control

Question

I need to pass javascript code (server-side and client-side) to a custom control which should then get executed on click on button inside the custom control.

For this I created a property in custom control, say codessjs, with type javax.faces.el.MethodBinding and editor as Method Binding Editor. On the click of button (inside custom control) I wrote code like this:

compositeData.codessjs.invoke(facesContext, null)

But it throws me an error 'compositeData.codessjs' is null despite the code being present in the XPage source. How can I get the code to execute?

For client side javascript code I can find the editor Client side script editor in custom control properties, but what should be the type of the property? And how can I execute the csjs code in custom control?

Answer 1

If you want to use a method binding this way, you have to create a method binding as parameter for the custom control:

<xc:ccMethod>
   <xc:this.codessjs>
      <![CDATA[#{javascript:
         var app = facesContext.getApplication();
         app.createMethodBinding("#{javascript:print('HELLO!');}", null);
       }]]>
   </xc:this.codessjs>
</xc:ccMethod>

Then, your button inside the custom control is able to invoke the method. In this case, the button will print HELLO! to the server console.

EDIT:
The type of the CSJS property is string. To execute CSJS code you can modify your button in your custom control to something like this:

<xp:button value="Label" id="button1">
   <xp:eventHandler event="onclick" submit="false">
      <xp:this.script><![CDATA[#{javascript:compositeData.codecsjs}]]></xp:this.script>
   </xp:eventHandler>
</xp:button>

In your XPage, the custom control property can be filled this way:

<xc:ccCSJS>
   <xc:this.codecsjs>
      <![CDATA[alert("ABC");]]>
   </xc:this.codecsjs>
</xc:ccCSJS>

Hope this helps

Sven