Learning XPages Part 48 : Linking Checkboxes To An Action

Our view control has a checkbox beside
each entry. In this part I’m going to link them to an button that will
delete all the selected documents. Lets open the content_LocationAdmin
custom control. The first thing we are going to need is an action bar with
a Delete Documents button on it. As I’ve already covered how to create
an action bar in a previous part here is the source code that I’ve built
for my action bar in this control.

<xp:panel id="panel1"
styleClass="lotusActionBar lotusBtnContainer">
<xp:link escape="true" text="New Location" id="link1"
outerStyleClass="lotusBtn lotusBtnAction lotusLeft">
<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
<xp:this.action>
<xp:actionGroup>
<xp:openPage name="/LocationEdit.xsp" target="newDocument"
/>
</xp:actionGroup>
</xp:this.action>
</xp:eventHandler>
</xp:link>
<xp:link escape="true" text="Delete Locations" id="link4"
outerStyleClass="lotusBtn lotusBtnAction lotusLeft" />
</xp:panel>

Paste this code into the source view
of the content_LocationAdmin above the view panel tags. When you switch
back to the design view you’ll see a new panel containing two links, the
first link is called ‘new Location’ and the second link is called ‘Delete
Locations’. I’ve already provided the code for the first link in the source
above so lets write the code for the second link.

A picture named M2

There are two ways we can figure out
what documents have been selected in the view so that we can delete them,
An ‘Simple Action’ way and a scripted way, lets look at both.

To use the simple action method click
on the ‘Delete Locations’ link and switch to the events tab. Select the
‘onClick’ event and in the simple actions section add a new action.

A picture named M3

I have selected a category of ‘Document’
and an action of ‘Delete Selected Documents’. You then need to tell the
action what view control you want to check for the checkboxes that are
ticked. In this case we only have one view control on the page. You can
optionally enter in a confirmation text that will be displayed to the user
when they click the button.

Save and test it in your web browser.

A picture named M4

And if there is nothing clicked you’ll
also see a standard message telling the user that they must have at least
one document selected.

A picture named M5

This functionality might be sufficient
for most applications but in some cases you may need to do a little more.
For example in a phonebook application you may have people listed at the
location your trying to delete so you may want to block the deletion until
there are no people left in the location or you may want to delete all
the people at that location also.

By using the scripted method to determine
the selected documents you have a lot more options.

To find out what documents have been
selected in the view control we use a method called .getSelectedIds() against
the name of the view control. This function will return an array of the
document IDs of all the selected entries and we can then loop through the
array and process the documents.

Select the ‘Delete Locations’ link in
your designer click and switch the the events tab. We are going to write
a server side javascript so on the onClick event select the option for
the script editor.



var viewPanel=getComponent("viewPanel1");

var docIDs=viewPanel.getSelectedIds();

for(i=0 ; i  <  docIDs.length
; i++){


var docId = docIDs{i};

var doc:NotesDocument = database.getDocumentByID(docId);

 // Process selected documents
here

}

NOTE : replace the { and } on docIDs{i}
above with square brackets.


The first line sets up access to the
view control by using the getComponent() function. This is a very powerful
function in advanced XPages design as it allows you to get and set a lot
of properties on controls at runtime. For example you could change the
number of rows displayed in a repeat at runtime using this function. In
our case we are getting the view control.

The second line creates the array of
document IDs by using the getSelectedIds() function against the variable
we setup in the first line. The third line then sets up the loop

The fourth line sets up a variable to
hold the DocID of the current entry in the loop and the fifth line then
gets the actual document from the notes database using the getDocumentByID()
function.

As you can see we are reusing a lot
of our Lotusscript skills inside of the javascript. if we just wanted to
delete our document right now we could put the line ‘doc.remove(true);’
inside the loop.

Deciding which method you want to use
to process the selected documents in the view control all depends on how
much control you need and if you just need a simple function or if you
need to do a lot more processing in the background.

Tagged with: , , ,
Posted in None
3 comments on “Learning XPages Part 48 : Linking Checkboxes To An Action
  1. Patrick Picard says:

    Shouldn’t :var docId = docIDs bevar docId = docIDs(i)

    Like

  2. Patrick Picard says:

    oops typoShouldn’t :var docId = docIDsbevar docId = docIDs (square brackets)

    Like

  3. Oskar says:

    what is it bad?Error while executing JavaScript action expressionScript interpreter error, line=7, col=5: ‘doc’ is nullJavascript code 1: var viewPanel=getComponent(“viewPanel1”); 2: var docIDs=viewPanel.getSelectedIds(); 3: for(i=0 ; i < docIDs.length ; i++){ 4: var docId = docIDs; 5: var doc:NotesDocument = database.getDocumentByID(docId); 6: 7: doc.remove(true); 8: 9: }thanks

    Like

Comments are closed.

Archives