Call Dynamic JS Functions from Dialog in XPages

<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="" xmlns:xe="">
	<!-- DIV - to store our function Name and arguments to be triggered after Dialog close -->
	<div id="dlgArg" style="display:none"></div>
	<!-- ScriptBlock - Functions to be triggered -->
	<xp:scriptBlock id="scriptBlock1" type="text/javascript">
		<xp:this.value><![CDATA[// Generic Function to call out dynamic functions
function functionTrigger (func){

// function 1 - will be called after dialog hide
function calledFunc_showComment(arg1){
    // Do stuff here
    alert("functionName:calledFunc_showComment > arg1:" + arg1);

	<xp:button value="Open Dialog" id="button1">
		<xp:eventHandler event="onclick" submit="false">
			<xp:this.script><![CDATA[// Save local function Name and arguments
dojo.attr("dlgArg", "functionName", "calledFunc_showComment");

// Optional - Pass to dialog function arguments before opening it.
// dojo.attr("dlgArg", "arg1", "ferhat");
// dojo.attr("dlgArg", "arg2", "bulut");

// Open Dialog
	<xe:dialog id="dialogTest" title="Comment" style="width:350px">
		<xe:this.onHide><![CDATA[// Trigger function after Dialog Hide
// Function Name is coming from dlgArg node.
// Input Param is coming from Dialog node.
functionTrigger(dojo.attr("dlgArg", "functionName"), dojo.attr("#{id:dialogTest}", "userComment"));]]></xe:this.onHide>

		<xp:panel style="padding:2px;">
			<xp:inputTextarea id="inputUserComment"
			<xe:dialogButtonBar id="dialogButtonBar">
				<xp:button value="Save Comment" id="btnOK">
					<xp:eventHandler event="onclick" submit="false">
						<xp:this.script><![CDATA[// Save information which entered from Dialog.
dojo.attr("#{id:dialogTest}", "userComment", dojo.byId("#{id:inputUserComment}").value);

alert("functionName:" + dojo.attr("dlgArg", "functionName"));
alert("arg1:" + dojo.attr("dlgArg", "arg1"));
alert("arg2:" + dojo.attr("dlgArg", "arg2"));

functionTrigger(dojo.attr("dlgArg", "functionName"), dojo.attr("dlgArg", "arg1"), dojo.attr("dlgArg", "arg2"));

				<xp:button value="Close" id="btnClose">
					<xp:eventHandler event="onclick" submit="false">

This XPages design element includes DIV, Script Block, Dialog objects.

I created this sample to use Common Dialog Custom Control object to use it for different operations in different XPages.

DIV -> Used to store dynamic function details using dojo.attr
Script Bllock -> Includes functions will be called and our main function to trigger dynamic functions - triggerFunction-
Dialog -> Sample dialog. Getting comment from the user. After Dialog Close/Hide operation, Dialog calls our dynamic function.

Ferhat BULUT
BestCoder.NET for Personal Blog
BlackberryTool.Com for Blackberry Mobile Applications

Ferhat BULUT
December 31, 2011 7:34 AM

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.

No comments yetLogin first to comment...