- This control can be added multiple times to an xpage for different dialogs.
- Key elements of the window are passed to the custom control as parameters
- The main content of the control is passed as custom control. I use the <xp:include> control to accept the name of the passed control.
- I use jQuery to trick the control to using the correct id that I want to open
- I had to remove data-dismiss="modal" from the example to get the windows to close properly. I have no idea why this worked except that it did.
 |
| Here is a screenshot of the xpage that calls the modal windows |
Here is the code for the calling buttons. You can see that four parameters are passed to the "modalWindow" custom control. The third parameter "mainContent" is the name of the custom control that holds the contents of the window. The "id_name" parameter determines which window on the page to open. In the code below, you will see how I replace the "id" with the "id_name" that is passed.
<a href="#step1" role="button" class="btn" data-toggle="modal">
Modal Window #1</a>
<xc:modalWindow button_title="Save and Continue to Step 1"
window_title="Create New PO - Step 1 of 7" mainContent="NewPO_Step1"
id_name="step1" />
<br />
<a href="#step2" role="button" class="btn" data-toggle="modal">
Modal Window #2</a>
<xc:modalWindow button_title="Save and Continue to Step 2"
window_title="Create New PO - Step 2 of 7" mainContent="NewPO_Step2"
id_name="step2" />
 |
| The result of pushing the first button |
 |
| The result of pushing the second button |
Here is the code for the modalWindow custom control. Note that this is a work in progress. I will try to make sense of this by footnoting parts that might be confusing.
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xe="http://www.ibm.com/xsp/coreex"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:text escape="true" id="computedField1">
1)<xp:this.value><![CDATA[#{javascript:var idName = compositeData.id_name
view.postScript("$('#default').attr('id', '" + idName + "');")
}]]></xp:this.value></xp:text>
2)<div id="default" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" aria-hidden="true">
×
</button>
<h3 id="myModalLabel">
3)<xp:text escape="true" id="computedField3" value="#{javascript:compositeData.window_title}" /></h3>
</div>
<div class="modal-body">
4)<xp:include id="include1">
<xp:this.pageName><![CDATA[${javascript:compositeData.mainContent + ".xsp"}]]></xp:this.pageName>
</xp:include>
</div>
<div class="modal-footer">
<button class="btn" aria-hidden="true">
Cancel
</button>
5)<xp:button value="#{javascript:compositeData.button_title}"
id="button1" loaded="true">
<xp:this.attrs>
<xp:attr name="class" value="btn btn-primary" />
</xp:this.attrs>
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action />
</xp:eventHandler>
</xp:button>
</div>
</div>
</xp:view>
1) This uses clientside javascript using JQuery to change the id from "default" to whatever was passed to the control in the button.
2) Two things here: The id is set to "default", which is changed at runtime. This is also one of two places where data-dismiss="modal" was removed to fix the window from not closing properly. The other place is the cancel button.
3) Reading the passed parameter to set the window title
4) Reading the passed parameter to know what custom control to call for the main content. Thanks to Knut Herrmann for helping me out on Stack Overflow to get this working.
5) Reading the passed parameter for the button title. This button was changed from an html button to an xpage button so I can write code for what to do upon submit.
No comments:
Post a Comment