Component Tree Injection

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://www.ibm.com/xsp/core xsdxp://localhost/xsp~core.xsd" style="margin:50px">
	<xp:link id="link2" text="Dynamicallly inject a Date picker...">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete">
			<xp:this.action>
				<![CDATA[#{javascript:
					importPackage(com.ibm.xsp.convert);
					importPackage(com.ibm.xsp.component.xp);
					try{
						if(null == getComponent("inputText1")){
							view.setDojoParseOnLoad(true);
							view.setDojoTheme(true);
							var div = getComponent("injectionPoint");
							var inputText = new XspInputText();
							inputText.setId("inputText1");
					        var binding = facesContext.getApplication().createValueBinding("#{viewScope.date}");
							inputText.setValueBinding("value", binding);
							div.getChildren().add(inputText);
					    	var converter = new DateTimeConverter();
					   		converter.setType("date");
							inputText.setConverter(converter);
							var dateTimeHelper = new XspDateTimeHelper();
							dateTimeHelper.setId("dateTimeHelper1");
							inputText.getChildren().add(dateTimeHelper);
							inputText.setRendered(true);
						}
					}catch(e){
						print("Error injecting component: " + e);
						throw e;
					}
				}]]>
			</xp:this.action>
		</xp:eventHandler>
	</xp:link>

	<xp:div id="injectionPoint" style="margin:20px;"></xp:div>

	<xp:text escape="true" id="computedField1" value="#{viewScope.date}"></xp:text>
	
	<xp:br></xp:br>
	<xp:br></xp:br>

	<xp:button value="Submit" id="button1">
		<xp:eventHandler event="onclick" submit="true"
			refreshMode="complete" immediate="false" save="true">
		</xp:eventHandler>
	</xp:button>
</xp:view>





XSP demonstrating dynamic injection of a control into the component tree complete with a value binding to a viewScope variable.

Load the XPage, then click on the Link... a Date Picker will be injected into the component tree on the server-side and rendered client-side.  Select a date from the control, then click on the "Submit" button.  Your selected date will be displayed in the computed field that is also bound to the viewScope.date variable.

Convenient under certain contexts / use cases... dynamic workflow form for example.

Have fun!

XPages
Tony McGuckin
March 8, 2012 6:55 PM
Rating
159

All code submitted to OpenNTF XSnippets, whether submitted as a "Snippet" or in the body of a Comment, is provided under the Apache License Version 2.0. See Terms of Use for full details.



1 comment(s)Login first to comment...
Dennis Kronbügel
(at 05:42 on 12.03.2014)
Is it possible to add a custom control (DesignElement) with the same method?