Skip to main content

On a recent project, a lookup field contained hundreds of results, even applying cascading, and the customer wanted to be able to search on multiple criteria, like the search zone in views. So, how to add a search help on a field.

1. The search interface

The search interface is a simple list view to inherit from the search zone, column filters, sort, ...

186788_pastedImage_1.png

Create a view called "Search" on lookup list. It's a webpart page. Edit the webpart to hide toolbar. Keep only the search zone.

Under the list webpart, add a content editor webpart with that source :

<style type="text/css">
    .ms-dialog #s4-ribbonrow, .ms-dialog .ms-cui-topBar2, .ms-dialog .s4-notdlg, .ms-dialog .s4-pr s4-ribbonrowhidetitle, .ms-dialog .s4-notdlg noindex, .ms-dialog #ms-cui-ribbonTopBars, .ms-dialog #s4-titlerow, .ms-dialog #s4-pr s4-notdlg s4-titlerowhidetitle, .ms-dialog #s4-leftpanel-content {display:none !important;}
    .ms-dialog .s4-ca{margin-left:0px !important; margin-right:0px !important;}
</style>
<script type="text/javascript">
function ModalOk_click() {
  var ctx = SP.ClientContext.get_current();
  var items = SP.ListOperation.Selection.getSelectedItems(ctx);
  if (items.length == 1) {
  SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.OK, items.0].id);
  } else {
  alert('Veuillez s351lectionner un 351l351ment');
  }
}
function ModalCancel_click() {
  SP.UI.ModalDialog.commonModalDialogClose(SP.UI.DialogResult.cancel, 'Cancel clicked');
}
</script>
<input type="button" name="BtnOK" id="btnModalOK" value="OK" onclick="ModalOk_click();" />
<input type="button" name="BtnCancel" id="btnModalCancel" value="Cancel" onclick="ModalCancel_click()">
  • Some css to hide ribbon
  • function ModalOK_click
    • get selected items in the list
    • alerts if not only one item selected
    • close the window, returning item's id
  • function modalCancel_click
    • close the window
  • Add two buttons : OK and Cancel
2. The main form
Add a Search button near the lookup control.
186790_pastedImage_1.png
Button call javascript function OpenDialog()
186791_pastedImage_2.png
Add javascript to form parameters :
//User Defined Function to Open Dialog Framework
function OpenDialog() {
 var dialogOptions = SP.UI.$create_DialogOptions();
 dialogOptions.url = ".../Lists/Bureaux/search.aspx";
 dialogOptions.width = 750; // Width of the Dialog
 dialogOptions.height = 500; // Height of the Dialog
 dialogOptions.dialogReturnValueCallback = Function.createDelegate( null, CloseCallback); // Function to capture dialog closed event
 SP.UI.ModalDialog.showModalDialog(dialogOptions); // Open the Dialog
 return false;
}// Dialog close event capture function
function CloseCallback(strReturnValue, target) 
 {
  if (strReturnValue === SP.UI.DialogResult.OK) // Perform action on Ok.
     {
NWF$("#"+Bureau).val(target);
NWF$("input#"+Bureau).val(target);
}
 }
  • Open the search view of LookupList
    • Define url, window size with dialogOptions structure
  • CloseCallback is started when popup is closed, with two parameters
    • strReturnValue : OK or Cancel
    • target : the id of the selected item pass back with commonModalDialogClose
  • Update the lookup field (Searching the longest to find the good syntax)
    • Add Client ID to lookup field (Bureau)
    • Two updates are necessary (don't ask me why, I couldn't explain. I'm a beginner in Javascript)
      • NWF$("#"+Bureau").val and NWF$("input#"+Bureau").val

    

            

        
                
            
            
                                                                                                                                                                                                
                            

                                                    
                                                                            

    
Hello @jflegras ,
Thank you for posting this. It is exactly the thing I need to do. I am having trouble getting it to work though. After clicking the search button on my main form, it "thinks" for a few seconds then returns to the main form without having opened the search view of my lookup list. Have any changes in JavaScript since July 2016 caused the need to update this code?
 
Or, in these lines:
 
NWF$("#"+Bureau).val(target);
NWF$("input#"+Bureau).val(target);
 
What do I substitue for "Bureau"? The name of the lookup column? Does something specific have to be substituted for "target"?

            

    
                                                    

    
 
Hello @cherylshah ,
 
happy to help you.
 
Probably an error with "dialogOptions.url". This is the url of the view you have created for the search.
Be sure the function called by the javascript search button is the same name than your function.
Bureau is "Client ID javascript variable name" set in advanced tab of the lookup column.
To update "lookup column", it depends of the Nintex Forms version. If previous solution doesn't work, please try something like :
 
var idBureauSELECT = idBureau.replace("_hid","");
NWF$("#" + idBureauSELECT).val(target);
NWF$("input#" + idBureau).val(target);
 
"target" is the value return by the CloseCallBack function.
 
Regards

            

    
                                                    

    
Thank you very much for your reply @jf_legras . Following your directions:
 
The script I now have in the Form Settings is:
1187iAB012BBD20AF2B7B.png
 
(continued...)
1185iB656C0C99EAA3BB2.png
 
I've tried both the full and relative URLs to the search view.
 
The button settings are:1183i59A8EB649E374882.png
Client click matches the function name.
 
The lookup control settings (this lookup is multiple choice, is that a problem?) are:
1186iD65699BE77DA78F4.png
 
So the Client ID JavaScript variable name matches these lines in the Custom JavaScript setting on the form:
 
 var idEquipmentSELECT = idEquipment.replace("_hid","");
 NWF$("#"+Equipment).val(target);
 NWF$("input#"+Equipment).val(target);
Do you see anything that is wrong? It is still behaving the same way - I click the search button on the form and the dialog does not open. Thank you for any further help you can provide!

            

    
                                            

                    
                                                                

                        

                            
  
Reply










                        

                    

                                                

        

    


            

                                      

                                                                                                
            








View our Community Site Map
Nintex Community Sitemap


        

                        

    
    





    


                                        

                                                        

            
        
    






                        
Terms & ConditionsCookie settings