Skip navigation
All Places > Getting Started > Blog > Authors nutansh07

Getting Started

1 Post authored by: nutansh07

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

Filter Blog

By date: By tag: