How to pass and display a custom control in another custom control - xpages

Question

I am creating an application where I want to add data to a form in a wizard format. I will have a series of modal dialogs that step through the data entry process. I am using the Bootstrap modal dialogs. I intend on saving each step to a managed bean. The application needs to work on all devices, which is why I am doing it this way.
I am trying to create a single custom control to hold the modal window, and then pass the window title, mainContent, button title to the control using custom properties. The window title, and button title work fine. The "mainContent" property contains the XML code for the custom control to display in the window. My question is how to I make the control display the actual custom control content vs the XML string of the custom control name. My goal is to make a reusable snippet.
I have tried using 'Include Page' which makes the whole xpage disappear. I have tried using the 'dynamicContent' control but have been unable to get it to work. There is a very distinct possibility I am not using that control correctly. I left that code in there. Sidenote: xc:layout on the xpage is my Bootstrap layout that I don't think factors in.
XPage code - all that is there is calling the modalWindow custom control:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xc:layout>
<xc:modalWindow button_title="Save and Continue to Step 2"
window_title="Create New PO - Step 1 of 7">
<xc:this.mainContent><![CDATA[<"xc:NewPO_Step1 />"]]></xc:this.body>
</xc:modalWindow>
</xc:layout>
Here is the code for the custom control "modalWindow"
<?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">
<a href="#myModal" role="button" class="btn" data-toggle="modal">
Begin Creating New PO
</a>
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog"
aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"
aria-hidden="true">
×
</button>
<h3 id="myModalLabel">
<xp:text escape="true" id="computedField3"
value="#{javascript:compositeData.window_title}">
</xp:text>
</h3>
</div>
<div class="modal-body">
<xe:dynamicContent id="dynamicContent1"><xp:text escape="true" id="computedField2" value="#{javascript:compositeData.mainContent}">
</xp:text><xp:this.facets>
</xp:this.facets>
</xe:dynamicContent>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">
Cancel
</button>
<button class="btn btn-primary">
<xp:text escape="true" id="computedField4"
value="#{javascript:compositeData.button_title}">
</xp:text>
</button>
</div>
</div>

Answer 1

You can use "Include Page" adding ".xsp" to the name of custom control:
<div class="modal-body">
<xp:include id="include1">
<xp:this.pageName><![CDATA[${javascript:compositeData.mainContent + ".xsp"}]]></xp:this.pageName>
</xp:include>
</div>
Add mainContent="nameOfYourCustomControl" to modalWindow call and you have the flexibility you are looking for:
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xc="http://www.ibm.com/xsp/custom">
<xc:modalWindow button_title="Save and Continue to Step 2"
window_title="Create New PO - Step 1 of 7" mainContent="step1">
</xc:modalWindow>
</xp:view>
In this example you have to create a custom control "step1" which contains all the content.