Learning XPages Part 48 : Linking Checkboxes To An Action
Tags : Lotus Domino XPages Checkboxes
Bookmark :
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.
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.
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.
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.
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.
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.
Bookmark :
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.
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.
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.
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.
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.
Comments
var docId = docIDs
be
var docId = docIDs(i)
Posted by Patrick Picard At 03:57:24 PM On 03/11/2009 | - Website - |
Shouldn't :
var docId = docIDs
be
var docId = docIDs (square brackets)
Posted by Patrick Picard At 03:59:11 PM On 03/11/2009 | - Website - |
Error while executing JavaScript action expression
Script interpreter error, line=7, col=5: 'doc' is null
Javascript 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
Posted by Oskar At 08:11:42 AM On 03/17/2009 | - Website - |