Add New Item Dialog to Lookup Field On Nintex Form 2013

[#1]

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

[jflegras]

Hi Nutan

Call a popup and back is ok. But is there an easier way to refresh a lookup field ?

I'm not a JS expert,but I'm sure there is a Nintex way to ajax refresh the control just by  calling a magic function, since they update last year cascading lookup by ajax.

Thanks

[akalmar]

This is a great way to add lookup entries on the fly and I look forward to being able to implement it.  Thank you for posting this solution! However, I am finding that the new entries are not getting saved into the choice fields of the main list.  The source lists are updated but not the main list where the lookups are being used.  Is there away to make sure the new entries are added back to the main list?  Is an additional AJAX call (POST rather than GET) needed?  Has anyone else encountered this?

[akalmar]

Please ignore my previous question from 24 hours ago, I have found a solution based on this post:  https://community.nintex.com/thread/12582

[smurugesan]

Hi Nutan

Finally I was able to implement your solution, however after a new upgrade I am getting "Invalid postback or callback argument.  Event validation is enabled using <pages enableEventValidation="true"/> in configuration or <%@ Page EnableEventValidation="true" %> in a page" error when I submit the form. Any ideas?