HCL Notes and Domino Application Development wiki: Designing XPage Applications: Converting large Notes Client forms to XPages

Converting large Notes Client forms to XPages

Added by ~Fred Umlukonyobu | Edited by ~Pippy Asaacheklen on March 9, 2016 | Version 23

Actions ▼

This method will allow your users to progress through a large form piece by piece, without refreshing the form and losing data already input by the user. You could also use this method within itself, to give the user progressive disclosure, saving on time for the user and screen real estate for you.

Tags: XPages, x-pages

ShowTable of Contents

HideTable of Contents

1 Problem
- 1.1 Custom Control Setup
2 About the Author

Problem

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.

Custom Control Setup

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:-
7 panels in the outline on the CC

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.
named panels

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 external link

who if he hadn't done this entry I wouldn't have been able to do this at all, thanks Paul.
David Leedy external link

for support and encouragement to do an entry here and of course wiki madness external link

Chris Toohey external link

for support and encouragement to do an entry here and of course wiki madness external link

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.

Actions ▼

Attachments (8)

Versions (23)

Comments (7)

~Wendy Nonboosivitchoni commented on May 17, 2016

Re: Converting large Notes Client forms to XPages

Thanks! Great idea for a mobile "wizard" type form, too. Another long form option could be Bootstrap's ScrollSpy (http://getbootstrap.com/javascript/#scrollspy). I've used this a few times, and users seem to like it on desktops. The example above, methinks, is much better for mobile.

~Denise Elhipitherakol commented on Nov 25, 2010

Converting large Notes Client forms to XPages

@Wayne. I have changed the code sections and they are now visible.

~Pippy Xanfoolitynds commented on Nov 24, 2010

Converting large Notes Client forms to XPages

There are three pieces of code missing. The first one I can do without, the other two seem rather important. The only thing that is showing is "{"...not real helpful.

Can you provide...please?

~Denise Elhipitherakol commented on Apr 12, 2010

Converting large Notes Client forms to XPages

@Robert, no need for extra fields for displaying data, not sure how it works exactly but from examples I have seen there are still two modes, read and edit, depends how you set the xpage up on how it opens the data xpage from the view. Create new document you would want in edit mode straight away, clicking on a link in a view, read mode.

@David, thank you, working on another one now.

~Sven Desluzenettu commented on Apr 7, 2010

Converting large Notes Client forms to XPages

Good information. I've had a site in production for about eight years that does the same thing only using sub-forms like you're using panels. I've been thinking of how to upgrade it to xPages. This is a good start.

I'm really new to xPages so I'm still confused by another related aspect. With a regular Notes form with editable fields you get the data entry field when in "edit" mode and the text displayed when in "display " mode. One design does both. How does this work in xPages? Do I build a different page to display the contents from the page where the data is entered?

~Isaac Fezboosiakoi commented on Mar 31, 2010

Converting large Notes Client forms to XPages

~Isaac Fezboosiakoi commented on Mar 31, 2010

Converting large Notes Client forms to XPages

Really neat article. I'm actually working on a large form/xpage right now and will give this a try. Thanks for posting!

Copy and paste this wiki markup to link to this article from another article in this wiki.

Link: