Hello Everyone,
Recently we had a requirement where client wanted to have the SharePoint Lookup Field editable in Nintex Form.
We can up with an approach to open the List NewForm.aspx via a link in the Nintex Form and let user add new data. Once the user adds the new record and clicks submit, the Look Field on Nintex Form is re-populated and the last added data is selected by default.
Here is the approach we took.
Step 1: Update the UI
<a class="ms-addnew nf-repeater-addrow-link" href="javascript:AddNewLookupItem(”/Lists/CustomList/NewForm.aspx”);">[Add New Item]</a>
Step 2: Update the Script in background
As we had a custom master page, we referred the custom JavaScript inside it as it had more functionality related to other stuff as well.
But you can try to use the Nintex Form Settings from the ribbon bar. I find REST Api easy to develop and also the same file can be used anywhere else with small changes.
File Name : Custom.js, the file can be stored on SharePoint
Function called when link in the form is clicked
function AddNewLookupItem( newFormUrl) { if ( SP.ClientContext ) { var siteUrl = SP.ClientContext.get_current().get_url(); //can use _spPageContextInfo.webAbsoluteUrl instead
var options = SP.UI.$create_DialogOptions(); options = { url: siteUrl + newFormUrl, dialogReturnValueCallback: OnPopUpClose }; SP.UI.ModalDialog.showModalDialog( options ); } }
|
Function called with the form is closed
function OnPopUpClose( result, returnValue ) { if ( result == SP.UI.DialogResult.OK ) { FillLookupData(); } } |
Function called with the Form is closed and the lookup needs to be refreshed.
Note: I used the formcontrolid attribute to find the lookup field here as the id for a control changes every time when the form is loaded and I did not find any other way to uniquely identify each control.
You can also change the query as per your custom requirement, like to filter on some other conditions.
function FillLookupData () { var selectControl = $( "select[formcontrolid^='a3fe57d1-aa75-494c-adcb-693ff4804e10']" ); var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getByTitle(Custom List')/items?$orderby=Title"; // execute AJAX request $.ajax( { url: requestUri, type: "GET", headers: { "ACCEPT": "application/json;odata=verbose" }, success: function ( data ) { selectControl.find( 'option' ).remove(); selectControl.append( "<option value='0' >Please select a value...</option>" ); if ( data.d.results.length > 0 ) { $.each( data.d.results, function ( index, item ) { var isExist = $( "select[formcontrolid^='a3fe57d1-aa75-494c-adcb-693ff4804e10'] options" ).filter( '[value="' + item.Id + '"]' ).length > 0 ? true : false; if ( !isExist ) selectControl.append( "<option value='" + item.Id + "' >" + item.Title + "</option>" ); } ); } var requestUri = _spPageContextInfo.webAbsoluteUrl + "/_api/Web/Lists/getByTitle(Custom List')/items?$select=Id&$orderby=Id%20desc&$top=1"; // execute AJAX request $.ajax( { url: requestUri, type: "GET", headers: { "ACCEPT": "application/json;odata=verbose" }, success: function ( data ) { if ( data.d.results.length > 0 ) { $( "select[formcontrolid^='a3fe57d1-aa75-494c-adcb-693ff4804e10'] option" ).removeAttr( 'selected' ).filter( '[value=' + data.d.results[0].Id + ']' ).attr( 'selected', 'selected' ); } }, error: function () { alert( "Failed to load Lookup Items" ); } } ); }, error: function () { alert( " Failed to load Lookup Items" ); } } ); }
|
I hope this will help someone. If there are any better suggestions you can add them to the thread.
Thanks,
Nutan
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.