Lookup control as search box to dynamically update another display form web part

Forms
1

Hi,

I have a "Suppliers" list with supplier data (name, address, emails, etc.) and I want to display supplier data after performing a search/lookup through the forms web part without reloading the page.

One way I think is potentially possible is to create a dummy list "Suppliers Search" and then use the display form with a lookup control which uses JS to get the "Extra Fields" data into the fields on the same form, but this seems clunky.

I'm hoping there is a more elegant solution where I can do the lookup and then use JS to feed the item ID into another Plumsail forms web part on the same page so that I can use the "Suppliers" display form or embed the "Suppliers" display form into another display form?

Or if there's a better way of achieving the above, please let me know!

Hope all that makes sense!
Thanks!

2

Hello @atomicharri,

I'm not sure I fully understood you.

How do you store the data? Is the Supplier list a sharepoint list?

If it is a SharePoint list, you can create a lookup field or use a Lookup control if the list is on another site. Lookup field and control both support search within the options. You can also configure search by multiple columns, find the code example here. And you can display extra data when a user select a supplier.

3

Hi @mnikitina
Yes the data is stored in a Sharepoint list "Supplers" but there are up to 20 columns of data for each row.
My objective is for the user to search for a supplier in the lookup control, select a supplier and then the Supplier list display form should appear and show the relevant data - all without the page navigating or reloading.

If I put the lookup control into the Display form of the "Suppliers" list, how do I reload the form to show the data of the new item selected in the lookup control without reloading the page?

4

Hello @atomicharri,

Thank you for the details!

I would suggest redirecting a user to another item in this case. This is a simplest solution on my opinion.

var url = "https://domainName.sharepoint.com/sites/SiteName/_layouts/15/listform.aspx";

fd.control('Lookup1').$on('change', function(value){
        var params = {
            PageType: 4,
            ListId: fd.spFormCtx.ListAttributes.Id,
            ID: value.ID
        }
        //build URL
        url += "?" + $.param(params);
        //redirect
        window.location.href = url;
});

But if that is not an option, you can populate the form fields using PnPjs library. But this will be a more complex solution and requires more coding.

fd.control('Lookup1').$on('change', function(value){
        pnp.sp.web.lists.getByTitle('List').items.getById(value.ID).get().then(function(item){
            fd.field('Title').value = item.Title
        });
});
5

Thanks @mnikitina
I used the following to get the Extrafields data - is there any difference doing it this way vs using the pnpjs library?

function loadSupplierData() {

    fieldsArray = ['Name', 'OfficeAddress', 'PostalAddress', 'Phone1', 'Phone2', 'Fax', 'Website', 'CompanyEmail', 'IndustrySector', 'ABN_x002f_BusinessRegistration', 'PrimaryContact', 'PrimaryContactPhone', 'PrimaryContactEmail', 'Notes'];

    if (fd.control('SupplierSearch').value) {
    
        fieldsArray.forEach((fieldname) => {
            fd.field(fieldname).value = fd.control('SupplierSearch').value[fieldname];
        });
    }
}

fd.control('SupplierSearch').$on('change',loadSupplierData);
1 Like
6

Hello @atomicharri,

Yes, this is a nice option if the list doesn't have many items.

7

Hi, I've setup the Plumsail forms web part to show the Display form for my list. And then using a lookup field, combined with the code above from @atomicharri, to allow for quickly searching for and loading another item's data into the form fields without needing to reload the page--it works beautifully.

How would I make the Edit button on the Display form open the item that I had just dynamically displayed with a search in the lookup field? Currently, clicking Edit will load the item that was initially loaded upon the page rendering. Clearly, I'd have to somehow grab the value of that lookup field and make sure that's the item that gets loaded instead, but I'm completely new to this and, frankly, barely have a clue of what I'm doing :slight_smile:

8

I think I got this figured out. I was able to add a button control on my form, labeled "Edit", and then added this code to the button to make sure the Edit form opened is the item that was most recently looked up with my lookup control:

window.location.href = "https://xxx.sharepoint.com/sites/xxx/SitePages/PlumsailForms/xxxlist/Item/EditForm.aspx?item=" + fd.field('ID').value;

Now I'd like to make sure that the default Edit button is hidden. I found in the forums that I could add some javascript to hide the default Edit button from the Display form:

fd.toolbar.buttons[0].style = "display: none;";

The problem is that, while this properly hides the Edit button on the Display form, it's now also hiding the Save button on the Edit form, which I don't want. I realize one solution is to only save this code on the Display form, but I'd rather not save the New/Edit/Display forms separately, I'd rather accomplish this with some javascript instead. Is there a way to target that line of code above to only be applied when opening the Display form and not when opening the Edit or New forms?

9

@jtuckersage,

You can determine the form type using the code:

fd.formType

Simply add a condition to run the code for the Display form:

if(fd.formType == 'Display') { 
   fd.toolbar.buttons[0].style = "display: none;"; 
}
1 Like