Issue:
Want to switch name picker field to do name type-ahead look-ups in-line w/o pop-up dialog.
Solution A - JQuery:
1. Add jQuery to the app.
- add the jquery.js JS library into the File Resources.
- add the jqueryui.js JS library file into the File Resources.
- add the CSS file or paste into new CSS stylesheet design page.
- give the name field an ID property/value of nmfld.
2. Add them to the HTML header.
[jQuery.css]
"<script language='javascript' src='jquery.js?Openfileresource'></script>" +
"<script language='javascript' src='jqueryui.js?Openfileresource'></script>"
3. Add to the JSHeader the jQuery onLoad call.
$(document).ready(function() {fInitApp();} );
// customize the init function below
function finitApp() {
$("nmfld").autocomplete( {
minLength: 3,
source: "myagentnm?OpenAgent",
dataType: "json"
} )
}
4. Create the myagentnm agent in the app.
- make it Agent List type and run on None
- let it have restricted access (since looking up to external app)
- protect against anonymous run
Code sample:
Set db = s.CurrentDatabase
Set doc = s.DocumentContext
urlQSList = Split(doc.Query_String(0), "=")
nmkey = urlQSList(0)
Print "Content-Type:application/json"
Set nDb = s.GetDatabase(db.Server, "names.nsf", false)
Set nV = nDb.GetView("($Users)") ' assuming you want all entries, use $VIMPeople if not
Set nCol = nV.GetAllDocumentsByKey(nmkey, false)
// build rest of print-out in JSON format
If (nCol.Count >0) Then
Set nDoc = nCol.GetFirstDocument()
ncount = 0
txtstr = |[|
Do While Not (nDoc Is Nothing)
Set nNm = New NotesName(nDoc.FullName(0) )
txtstr = txtstr & | "| & nNm.Abbreviated & |",|
Loop
txtstr = txtstr & | ""] |
Print txtstr
End If
Solution B - NP_Picker from OpenNTF:
I like this solution better than the JQuery one because:
1. You have multiple dialog options / behaviors available (single selection, multiple selection, etc).
2. You don't need the Mac truck of the JQuery library so it's a lighter / quicker load. (Since version 2.0, it doesn't use any external libraries for code.)
3. The authors did a good job of supporting the major browsers including back support all the way back to at least IE 8 on XP and Citrix.
1. Download the newest version available from OpenNTF.org. A copy of the 2011/May version is attached below:
 NP_Picker.zip (Version 2.3 - May 2011)
2. Extract the file. Open the NSF locally in the Designer. Copy the following design elements:
a. Copy out the JavaScript library:
- NP_Picker.nsf (Code --> Script Libraries --> NP_Picker.js )
b. Copy the agent from this NSF to your application:
- NP_Picker.nsf (Code --> Agents --> NP_Picker )
c. Copy the style sheet from this NSF to your application
- NP_Picker.nsf (Resources --> Style Sheets --> NP_Picker.css )
3. Update the form containing the Names field(s) for the pop-up:
a. Add Stylesheet to the HTML Head.
- Click HTML Head Content.
- Create (menu) --> Insert Resource --> NP_Picker.css
b. Add JavaScript library JS Header.
- Click JS Header.
- Create (menu) --> Insert Resource --> NP_Picker.js
c. Add to the forms JavaScript onLoad.
- Click onLoad. Add below your other code. e.g.:
f = document._MyFormAbbrev;
NP_initialize();
c. Update the onFocus event for all Names fields that will use the pop-up.
- Select each field. Click onFocus on left.
- Add the following code:
NP_openPopup(this.id,"",this.name,'E',"");blur();
Notes:
- We believe we saw slightly better results w/full-text index on names.nsf. However, since the look-ups use the ($Users) view, it should NOT be necessary.
- You can change the Domino directory searched and the max results. They are in the NP_Picker agent. Update the intMax variable w/in the NP_findnames function for the number of entries returned for selection.
- Search results time on directory w/8000 person documents and 3000 group documents was/is 0.5 to 1.5 seconds with VM Domino 8.5.x and Domino 9.0.x server w/one processor and 3 GB ram.
Issues and Resolutions for NP_Picker:
a. Had unusual issue where a developer had named an app in all uppercase. (No, he was not a mainframe guy.) The URL parsing didn't work. So we had update the NP_Picker.js like below. (Updated w/in the NP_dom:Array object around line 114, adding 3 lines and updating the, now, 4th line with tmpurlpos.)
tmpurlstr1 = location.href;
tmpurlstr = tmpurlstr1.toLowerCase();
tmpurlpos = tmpurlstr.indexOf('.nsf');
NP_url = location.href.substring(0,tmpurlpos + 4);
b. We usually use the "E" (extended single name) picker option. However, we found when using the "M" (multiple names) picker option, we encountered issues with the NP_Picker.css with IE 6 and IE 11 with it. The button text was "missing" in that it was blue like the buttons. You could not distinguish between the add, remove, removal all, update, and cancel buttons. We quickly added the following to the NP_picker.css. (Note: you could also do this via the container class for the all the buttons.)
#NPm_add {
color: #ffffff;
}
#NPm_remove {
color: #ffffff;
}
#NPm_removeall {
color: #ffffff;
}
#NPm_update {
color: #ffffff;
}
#NPm_cancel {
color: #ffffff;
}
previous page
|