Xpages: How to create a view picklist!!

On May 18, 2009, in xpages, by Mark Hughes

So i finally figured it out, by piecing many sources of code from around the internet.

Updated to say go get the custom control on Openntf.org!!!

It is much easier to use and set up.  It is also reusable.

link

 

Step 1. create a custom control.

Create a custom control and put your view on it, and put a search bar and a select button above it like this, make the first column have a check box option

Configure this for searching…. click here if you do not know how to do this.

On the select button “on click” event put this code in, it gets the selected documents, then it gets a value from the document and then adds it to the field on my main form. I got this code form the developer wiki

<span style="color: #0000ff;">function</span> printToLog(stuff) {
_dump(<span style="color: #006080;">"\r\nPRINT START\r\n"</span>);
_dump(stuff);
_dump(<span style="color: #006080;">"\r\nPRINT END\r\n"</span>);
}

<span style="color: #0000ff;">var</span> database = session.getDatabase(<span style="color: #006080;">"notes1"</span>, <span style="color: #006080;">"applications\\viewpoint.nsf"</span>)
<span style="color: #0000ff;">var</span> viewPanel=getComponent(<span style="color: #006080;">"viewPanel1"</span>); <span style="color: #008000;">//get the componet of viewPanel</span>
<span style="color: #0000ff;">var</span> docIDArray=viewPanel.getSelectedIds(); <span style="color: #008000;">//get the array of document ids</span>
printToLog(<span style="color: #006080;">'got ids'</span>)

<span style="color: #0000ff;">for</span>(i=0;
i  &lt;  docIDArray.length;
i++){
<span style="color: #0000ff;">var</span> docId=docIDArray[i];
printToLog(docId)
<span style="color: #0000ff;">var</span> doc=database.getDocumentByID(docId);
printToLog(doc)
<span style="color: #0000ff;">if</span>(doc != <span style="color: #0000ff;">null</span>){
<span style="color: #0000ff;">var</span> pickthis1 = doc.getItemValueString(<span style="color: #006080;">"projectnum"</span>)
printToLog(pickthis1)
}
}

<span style="color: #0000ff;">if</span>(pickthis1 != <span style="color: #0000ff;">null</span>){
dominoDocument1.replaceItemValue(<span style="color: #006080;">"job"</span>, pickthis1)
}

 

On the client side of the select button js on click event, enter this in 

dijit.byId(‘Dialog3’).hide();

This closes the dialog we will create in a moment. Save and close that custom control.

On your main form you need to add this client side javascript function, i found this on the forum, unless you use this you can not click any buttons on your dialog or search or update.

 

/** 

<span style="color: #008000;">* Creates a dijit dialog box based on a div content</span>
<span style="color: #008000;">* @param id div identifier</span>
<span style="color: #008000;">*/</span>

<span style="color: #0000ff;">function</span> dialog_create(id, title1) {
<span style="color: #0000ff;">var</span> dialogWidget = dijit.byId(id);
<span style="color: #0000ff;">if</span>( dialogWidget )
dialogWidget.destroyRecursive(<span style="color: #0000ff;">true</span>);
dialogWidget = <span style="color: #0000ff;">new</span> dijit.Dialog(
{ title: title1, duration:600},
dojo.byId(id));

<span style="color: #0000ff;">var</span> dialog = dojo.byId(id);
dialog.parentNode.removeChild(dialog);

<span style="color: #0000ff;">var</span> form = document.forms[0];
form.appendChild(dialog);
dialogWidget.startup();
}

Next add this to the source of your page, notice the<> is the picklist custom control we just created

 

At the top of the XPage in source view, you need to add the onload function to call the function to create the dialog

Then we create a button to show the dialog with client side javascript.

dijit.byId(‘Dialog3’).show()

Then you will have something that works like a picklist, once you do it once it gets much easier.

moz-screenshot

example

 

39 Responses to Xpages: How to create a view picklist!!

  1. John Mackey says:

    Very nice Mark. Thanks for sharing. I’ll have to borrow this…

    -John

  2. Mark Hughes says:

    Seems to work well with multiple dialogs per page as well, still loads fast.

    @John I put it here so others could borrow it, i had not seen it anywhere else, so either people had not done this before or had not shared it. The lack of resources and documentation makes this a little harder than i thought, of course thanks to those who wrote the code i borrowed i have made it past all of the hurdles!

  3. Fifteen August says:

    Hi Mark,

    I am so happy to see this example.

    Actually I am looking for the way how to do dialog in Xpage.

    But in codes, i have a error at this line.
    for(i=0; i <> i++)

    :(

    Plz,

  4. Anonymous says:

    Hi mark,

    I tried your picklist. But

    I got an error "Object doesn't support this property or method". :-(

    Plz help

  5. Jerry Shelley says:

    Thanks Matt, but for all those XPage novices out there like myself, here's some extra info from my reserach how to get this to work …

    http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Client_Side_JavaScript_Libraries_in_XPages.htm
    (why can't I paste into this field?)

    I had to add a semi-colon after the ++ in the "for(i=0; i <> i++) statement.

    More to come perhaps, because it's not working for me yet.

    Jerry

  6. Jerry Shelley says:

    Sorry Mark – I was close with "Matt".
    An embarrassed Jerry.

  7. Mark Hughes says:

    Jerry have you downloaded the example database?

  8. Jerry Shelley says:

    And here's a link to the setting up a Search XPage tutorial which is hidden deep in the depths of the 8.5 Dom Designer Help…

    http://publib.boulder.ibm.com/infocenter/domhelp/v8r0/index.jsp?topic=/com.ibm.designer.domino.xpages_ug.doc/wpd_tutorial_enhancing.html

    (Still can't get the Dialog to work – I'm not getting past the dialog_create JS function loading – it's saying dialog is null.

  9. Jerry Shelley says:

    No Mark, I hadn't, but have now and am avidly interrogating it. Thanks muchly. Jerry.

  10. Mark Hughes says:

    i recopied the js code in a code snipit above in Windows live writer, it is much better than just using blogger.

  11. CharNode says:

    Sweet way of doing it. Pointing people to help files without giving specific information where to find stuff, although is less helpful. I was not able to rebuild the search within the dojo dialog. But then, maybe it's just me not getting it.

  12. Mark Hughes says:

    @CharNode, i just updated it with a link to the topic in the help database, which is full text indexed by the way. Jerry also posted it here in the comments.

  13. Mitch says:

    Hey Mark,

    thanks for your article, works fine, but…

    … the submit button forces my page to save and validate its fields.

    If I select the "Do not validate and update" option, the button type changes back to "button" and it doesnt work anymore.

    Any way to work around that? I dont want my page to be saved just because I add some values via dialogbox.

  14. Mark Hughes says:

    @ mitch is it set to refresh the underlying document or field?

  15. Mitch says:

    Err, I'm sorry, I was that fixed to my problem that I forgot to mention: I'm talking about the searching-part of the dialogbox, as described in the designer help.

    Dialogbox is working fine, but if I want to filter the dialogbox's content, the submit button of the search part submits the whole page.

    It's set to a partial update of itself.

  16. Mark Hughes says:

    refreshes the viewpanel only? set to button, not submit?

  17. Mitch says:

    It's set to "Submit", because that's the only way I can get the search in the dialogbox to work. I tried various versions of the partial update, like the whole dialogbox element or just the view panel. But it always submits & saves the page/document the dialogbox was called from.

  18. Melissa Snell says:

    Got it to work – thanks!

    However needed to do 2 additional bits that you don't mention here:

    1) Follow the instructions here:
    http://www-10.lotus.com/ldd/ddwiki.nsf/dx/Client_Side_JavaScript_Libraries_in_XPages.htm
    to tell the Xpage about Dojo module dijit.Dialog

    2)Change the JavaScript call at the top of the Xpage source to include the title arguement on the function call like this:

    XSP.addOnLoad(function(){dialog_create('Dialog3','Title')});

    3) Put the javascript function into a javascript script library and then added as a resource to the xpage.

    Thanks!

  19. John Smart says:

    Odd… I tried downloading from http://mhughes.focul.co.uk/Picklist%20Example.zip and it doesn't work. Firefox 3.5.7 with Firebug, running off local Domino Designer:

    "failed loading /domjs/dojo-1.3.2/dojo/../dijit/_base/popup.js with error: SyntaxError: illegal character"

    Anyone else have/overcome this problem?

  20. John Smart says:

    I figured it out. My problem was my Kaspersky web anti-virus!!!

    When I disabled it, or added a rule to trust */dijit/_base/popup.js then it started working.

  21. Joy says:

    Hi,

    I followed everything said here..but I am stuck at an error 'parentNode' is null or not an object, while the xpage loads.

    I am new to Xpage, please help me…

  22. Paul Cable says:

    Hi,

    Is it possible to limit the user to only select ONE document from the view?

    I was thinking along the lines of an onClick event triggering some javascript to deselect all other checked items?

    Cheers
    Paul

  23. Patpicos says:

    Hi Paul

    Instead of using a view container control, you could use a data table. This requires a little bit more work. Also, in the first column, you cannot use the radio button object directly because a name= will be generated for each entry and therefore they will not become part of a radio group. What i've done is use the <input name="myGrp" type="radio>put a computed field here for</input>

    Then the javascript code from the select button needs to be modified to find the selected radio button.

    Another caveat is that if your list is greater than the max item per page, a selection will be wiped if you navigate using the pager

  24. Mark Hughes says:

    If you make a datatable, then make a button instead of a checkbox or radii button, get the row value and set your field value

  25. Patpicos says:

    Good point. No point in wasting time finding which one the user selected. Just make them click the button and use that row!

  26. Patpicos says:

    Hi Mark,
    In terms of best practice, do you return an object from your dialog instead of tightly coupling the dialog code to modifying the backend directly? (Im starting in Xpages and Im trying to think 2 steps ahead)

    For example, I've used this tutorial to create a dialog box allowing an admin to change the department for an employee. Based on the selection, I change 3 fields on the employee document (dept_code, dept_title, and cost_centre). Right now, the buttons in the dialog directly act on the form by doing getComponent("xxx").setValue(rowEntry.getDocument.getItemValueString("dept_code");

    Instead of coupling like this, I thought of creating a department object with the appropriate getters. However, I am not sure how to pass that back to the calling Xpages. At first, I thought to save the object in a sessionScope variable, but i find this would polute the global space. Another option would be to save the selected department object in a custom control variable (compositeData). What do you think?

  27. Mark Hughes says:

    Using a viewscope or sessionscope would seem the set way to do this, global objects exist for a reason, sometimes they need to be used.

  28. Ujwala Srinath says:

    Hi Mark,

    Thanks for sharing this piece of code. It has been of great help to me ..:)

    I have been trying to simulate a picklist on xpages by putting together the code snippet that you have mentioned.
    I ,however, encounter a problem with the “docIDArray=viewPanel.getSelectedIds(); ” part.
    I have noticed that when I put create a view panel with in a Dijit Panel and try to acquire the selected ids using the getSelectedIds() function, it returns a null.
    But place the same view panel on the Xpage (instead of the Dialog Panel) and the documents Ids are retrieved perfectly fine.
    Seems like the selectedids function has been giving an error here.
    Am I missing any thing specific here? (Like maybe a property of the Dialog panel or the Xpage that I should include?)
    Any resolutions or work around to this problem?
    I have tried my code on the 8.5.1,8.5.2 and 8.5.3 versions .

    Thanks for the help,

    Ujwala

  29. link says:

    Thank you, I’ve just been looking for information about this subject for ages and yours is the greatest I have discovered till now. However, what about the conclusion? Are you certain in regards to the supply?|What i do not realize is actually how you’re now not actually much more neatly-liked than you might be right now. You are very intelligent.

  30. Glenn Wontor says:

    Hi Mark…great stuff. Exactly what I have been looking for. Made a few mods to fit an exact use case here, but overall it works awesome…

    However, have a question and before I go poking around inside the custom control, thought you might have an answer for this more quickly…

    Here’s the scenario…basically tagging documents (much like “MetaTagging”). The individual tags come from a view. User selects the tags/creates new ones and then saves the document (with associated tags).

    All works well except in this case: if someone deletes one of the tags from the DB. The documents still contain it, however, when that document comes up and we go into your control (only what is in the view is displayed) – this is correct. But, when I select/deselect and then return to the document, the extra tags that were previously deleted still show (even though they aren’t in the view picklist anymore)…

    My guess is that your control grabs the entire “tag list” before coming up. Then it only displays what is in the view. And I suppose that it then takes what is selected in the view picklist control and puts back into what was passed (which leaves the deleted items still in there)?

    How might I change this so that I only pass back what is selected in the view (meaning any deleted tags that were passed in and not displayed in the view are not passed back)…

    If you don’t have a quick answer, I’ll dive into your control (as there must be a way to do this without a lot of work) :)
    Thanks for the control and thanks in advance for any thoughts specific to this request !!
    Glenn

  31. Arno says:

    hi mark,
    great job your picklist! I have a problem with the ssjs-Select-Function:

    1. how do I get the selected value? I have defined a scope value and I call the function like this, but the function gets no value:

    var key = sessionScope.get(“ssContentUID”);
    addContent2MPL(key);

    2. when I try it with a hardcodet value the script runs two or three times not only one time. do you know this problem?

    thanks for help!!

    greeting from austria

    arno

  32. ann says:

    Mark, I just downloaded your viewpicklistbundle3.1, and can’t yet get it to work. I have 8.5.3, and all I’m getting so far on the originating xPage is the view of all the items I want to choose from. I don’t get a button, and honestly, I don’t want to see that view until I get the picklist dialog. The instructions are apparently for an older version of Domino, but I filled in the properties on the custom control the way you suggest. I can send more details if you haven’t seen this problem before.

  33. Bianca says:

    I see you share interesting things here, you can earn some additional money, your blog has big potential, for the monetizing method,
    just search in google – K2 advices how to monetize a website

  34. Polly says:

    I read a lot of interesting posts here. Probably you spend a lot of time writing, i
    know how to save you a lot of work, there is an online tool that creates high quality, SEO friendly articles in minutes, just search in google – laranitas
    free content source

  35. Desmond Sim says:

    hi mark,
    I try your custom control already, it work grat. But here got some question to ask.
    i use “set field value” in onreturn

    My selected field itself have a event to populate all other field, but it seem not work when i using “onchange” event.

    script is like this:

    var vw:NotesView = database.getView(“View”);

    var doc:NotesDocument=vw.getDocumentByKey(document1.getvalue(“fieldname”,true);

    if (doc!=null)

    {

    document1.setValue(“Name”, doc.getItemValueString(“Name”));
    document1.setValue(“Candidate_No”, doc.getItemValueString(“Candidate_No”));
    }

  36. Desmond Sim says:

    problem solve, using ssjs select function!

Leave a Reply

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