XPages Mobile Controls and Value Pickers Part Three: Client-Side Approach Extended

Home » XPages Mobile Controls and Value Pickers Part Three: Client-Side Approach Extended

From some feedback to yesterday’s post, that code works fine if all you want to do is create a new document. So, I’ve gone away and come up with some amendments and improvements.

First of all, I’ve moved the New User button into the Page Heading control’s action facet. Again I use the Move to Application Page simple action, setting targetPage to “user” and setting forceFullRefresh to “true”. It’s important to do this. Otherwise, the user will be editing the previous contact instead of creating a new one. The code for this button will look very familiar:

Mobile New User Button

Next I add a dataView control pointing to the AllContacts view. I’ve set to load 10 rows, but you’ll want to extend this to allow the user to add rows and save the state. If you’ve looked at the Discussion XL template, you’ll know exactly how to do that.

Instead of just adding a summaryColumn and setting the pageName property, I’ve added a panel to the detail facet. In that panel I’ve placed a Link control showing the contact’s name and email. I’ve added an onclick event to the Link setting forceFullRefresh to “true” and setting the targetPage to open the current document in edit mode, redirecting to the user page. If you’re relatively new to XPages, the Link text and targetPage may look strange, because I’m combining literal strings, Expression Language and Server-Side JavaScript. Read my blog post on combining languages from a couple of years ago for more. So the code for the dataView is this:

Mobile DataView

On the user page, resetContent is still set to “false”. The only difference here is a minor change on the State field. If the field is set with disabled as “true”, the value does not save into an existing field. If you wanted to prevent the user typing into the field, there are ways to do that, like adding code to the onfocus event of the field to move focus to the button.

The full new code is attached.

Mobile Page for Editing and Creating Contact

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Scroll to Top