Passing a SSJS Function as a Custom Property to the Bootstrap Modal Dialog Custom Control

In my post on using my Bootstrap Modal Dialog Custom Control, I mentioned that I had yet to figure out how to pass code to the buttons for processing each step in the wizard.   This post explains how to process the contents of each step of your wizard.

With the help of Stack Overflow I was able to figure out how to pass a method name and execute the method in a button of the custom control.   This question/answer explains it well.  Thanks to Per Henrik Lausten for his clear and concise answer, and practical examples.

I am going to explain how I used this did this, in a way that would be helpful to anyone who implements the Bootstrap Modal Dialog Custom Control.  The steps are nearly the same for passing a SSJS function to any custom control.

1)  The first step is to create a SSJS script library to contain all the scripts for the buttons in your modal window.  (Next, Previous, Cancel)

2)  Include this script library as a resource on every calling xpage for each step.  This is the xpage that is never shown to the user.

3)  Create a new custom property for the modalWindow custom control.   Make the Type equal to "javax.faces.el.MethodBinding" and Editor as "Method Binding Editor".

4)  In each calling xpage, pass a value for the "processNextFunction" parameter.  Notice that how the parameter is passed as javascript.   Do not put open and close parentheses on the function name.

5)  In the modalWindow custom control, in the onClick event for the 'Next' button.   Have one line of code to call the function that you passed in (The middle line).