ShowTable of Contents
The traditional way you would approach this problem would be by using a div like this
<div id="staffmember" class="Invisible">
some stuff in here....
</div>
You would then have some JavaScript to change the class from "Invisible" to "Visible" so that the user could see it. This would not cause the web page to refresh, retaining the input the user had already given.
But how to do that in an xpage?
In this example I have split my form into 6 parts, and I'm going to name them Page 1 0f 6 through to Page 6 of 6.
We first need to create a new custom control(CC). On that CC we will need to add a panel to store our pages, and we need to create a new panel for each of the steps we have broken down our form into. Once there we need to embed our six panels into the main one. This is done by using the Outline provided in the Domino Designer, here we simply drag and drop the panels into the main panel as shown below:-
When you look back at your CC it should look like this:-
From here we need to make all panels unique by setting the ID on each of the panels. Again using the Outline saves a lot of fiddly mouse work trying to select the correct panel.
When you have finished the outline should look something like this.
Each panel has a property window that is shown near the bottom of the Designer Client, we are interested in the Visible part for each of the panels as shown here:-
We click the diamond and select "Compute Value", this brings up the Script Editor window and in here we are going to set the condition that allows the panel to be seen by the users.
sessionScope.mp01 == "SHOW"
sessionScope.mp02 == "SHOW"
sessionScope.mp03 == "SHOW"
sessionScope.mp04 == "SHOW"
sessionScope.mp05 == "SHOW"
sessionScope.mp06 == "SHOW"
We need to repeat this for all the panels we are going to hide. Not forgetting to change the mp0# to the relevant panel id
number.
When this is done we need to give some individual text to each of the panels to show where we are when were done.
We now need to add some action buttons so that our users have some way to progress through our wizard.
Simply drag and drop a button from the Core Controls into panel mp01.
I've labeled my button "Next Page", but you can label them as you see fit really. Click on the events tab of the button, select script editor instead of simple action.
Now we need to close the first page and open the second page and this is how we do that.
sessionScope.put( "mp01","HIDE");
sessionScope.put( "mp02", "SHOW" );
We are using the "put" method of the sessionScope to set the value of variable we want.
On Page 2 of 6 we need to have "Previous Page" and "Next Page" buttons to allow the user to navigate back to the first page if they want to change anything.
Previous Page code:-
sessionScope.put( "mp02","HIDE");
sessionScope.put( "mp01", "SHOW" );
Next Page code:-
sessionScope.put( "mp02","HIDE");
sessionScope.put( "mp03", "SHOW" );
This is repeated through all the pages until the last one where we give the user a "Submit button" to allow them to complete the form. Here is what you should have at this point.
There is one more step before you would test the whole thing in its own xpage and that is how to set the sessionScope variables when the page loads. This we do by using the after page load event for the whole custom control.
Select the custom control in the outline and you will see the events that can be controlled that affect the whole custom control.
We want to see the first panel so we set that to "SHOW" and all the other we set to hide like so.
sessionScope.put("mp01","SHOW");
sessionScope.put("mp02","HIDE");
sessionScope.put("mp03","HIDE");
sessionScope.put("mp04","HIDE");
sessionScope.put("mp05","HIDE");
sessionScope.put("mp06","HIDE");
So now we are ready to see the result of this in an xpage.
Major thanks here to go the following people for there help and encouragement:-
Paul Hannan
who if he hadn't done this entry I wouldn't have been able to do this at all, thanks Paul.
David Leedy for support and encouragement to do an entry here and of course
wiki madness
About the Author
Tony Westwell is a Lotus Notes and Domino Developer working for the United Nations Office on Drugs and Crime based in Vienna Austria.