nutansh07

Add New Item Dialog to Lookup Field On Nintex Form 2013

Blog Post created by nutansh07 on Feb 26, 2015

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

  1. Add a Rich text field on Nintex for beside the Lookup Field
  2. Add the HTML Source as below

 

<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

Outcomes