Learning XPages Part 36 : Saving The Document And Hiding The Actions

For either the client side or server side
validation that we covered in the last few section to do its job and check
the fields and return an error if invalid we need to save the document.
Let’s create the save button in the action bar. Open the content_Person
custom control again and drag a new link into the area beside the ‘Edit
Document’ button that we created earlier and change it’s label to ‘Save
Document’

A picture named M2

Now switch to the events tab and select
the ‘onClick’ event. Using the ‘Add Action button I have added in two actions.
The first action will save the document

A picture named M3

and the second action will switch the
document back into read mode.

A picture named M4

when your done your actions list will
look something similar to this :

A picture named M5

This is just like creating an action
in the traditional notes client form to do a @Command([FileSave]);@Command([FileCloseWindow]);

If you save the custom control and preview
your XPage you will now see your save button beside the ‘Edit Document’
button and you can test out any validation you did in the last few parts.

A picture named M6

Of course there is no point displaying
the ‘Save’ button when the document is not in edit mode and no point displaying
the ‘Edit’ button when the document is already in edit mode so lets fix
that up right now.

In your data source for the page we
have defined the document as an object called ‘personDoc’. Select the ‘Save
Document’ link again and look for the ‘Visible’ tickbox and click on the
diamond  and select ‘compute value’. In the JavaScript dialog box
enter in personDoc.isEditable(); and then OK the dialog box and
save and refresh your Xpage. The save button should now disappear when
you are in read mode and should only show when your in Edit Mode.

To make the ‘Edit Document’ button disappear
when the document is in edit mode you can use the NOT value of the same
JavaScript expression like this :  !(personDoc.isEditable());

A picture named M7

A picture named M8

In the next part of the series we’ll
add a ‘Rich Text’ control to the form for an ‘About Me’ style area.

Tagged with: , , ,
Posted in None
Archives