How do I stamp values from a lookup control into a form?

As noted in the title, I'm trying to connect an item from a different list (in a separate SP site) to the item being created/edited in my form. I've been able to look up an item via the Lookup control, but I am trying to stamp some values ("Status" - a dropdown select field, as well as Title and Id) from the lookup record into my form ("PReqStatus" single line text field) both on form load and when the lookup value (PReqLookup) is changed.

What am I doing wrong in my JS and config? Do I need both the .extrafields JS and the Extra fields/Expand or is that breaking things?

fd.spRendered(function() {
fd.field('PReqLookup').$on('change', function(value) {
if (fd.field('PReqLookup').value == null) {
fd.field('PReqStatus').value = null;
}
else {
fd.field('PReqLookup').extraFields = ["Category/Id", "Category/Title", "Category/Status"];
var PReqStatusVar = fd.field('PReqLookup').value.Status;
fd.field('PReqStatus').value = PReqStatusVar;
}
});
});

fd.spRendered(function() {
fd.field('PReqLookup').extraFields = ["Category/Id", "Category/Title", "Category/Status"];
var PReqStatusVar = fd.field('PReqLookup').value.Status;
fd.field('PReqStatus').value = PReqStatusVar;
});

Any help is appreciated!

@Gabegia,

Is it a drop-down or a lookup column?

If it is a drop-down, you don't need to expand the field. Also, remove this line, as you are listing all extra fields in the designer:

fd.field('PReqLookup').extraFields = ["Category/Id", "Category/Title", "Category/Status"];

@mnikitina it's a drop-down column, so I've removed the expand fields and the .extrafields JS (and removed the "Category/" from the Extra fields).

For whatever reason, it's still not reading in the "Status" field from my lookup, and is only bringing in the id (65 in this example) and Title ("test- do not place" in this example). Should I expect it to write the Status field back into the array? (screenshot of the text field it's writing to):
image

I also tidied up the code a little to include the form load within the same fd.spRendered:

fd.spRendered(function() {
var PReqStatusVar = fd.field('PReqLookup').value.Status;
fd.field('PReqStatus').value = PReqStatusVar;

fd.field('PReqLookup').$on('change', function(value) {
    if (fd.field('PReqLookupData').value == null) {
    fd.field('PReqStatus').value = null;
    }
    else {
        var PReqStatusVar = fd.field('PReqLookup').value.Status;
        fd.field('PReqStatus').value = PReqStatusVar;  
    }
});

});

image

As always, thanks for all the help!

Hello @Gabegia,

First, as you are using a lookup control, the code to get the field value is:

fd.control('PReqLookup').value;

Next, make sure that you've specified the correct column name in the Extra fields property:
image

And this is the code to populate another field with an extra field value:

fd.spRendered(function() {
   fd.control('Lookup1').ready().then(function(control){
        control.$on('change', function(value){
            if(value){
                fd.field('Title').value = value.Statuc;
            }
        });
   });
});

Replace Lookup1 with the internal name of the control.

1 Like

Got it working - thanks as always!!

Is there a way to refresh the fields on form load? I tried using this, based on another post:

fd.spRendered(function() {
fd.control('PReqLookup').ready().then(function(control){
fd.control('PReqLookup')._dataProvider.refresh();
});
});
from here: Refreshing a List or Library control

as well as this one:

fd.spRendered(function() {
fd.control('PReqLookup').ready().then(function() {
fd.control('PReqLookup').refresh().then(function(){
alert('List refreshed!');
});
});
});

from here: Run a function on refresh of Data Table - #3 by Jamal_Smith-Graham
but it's not updating the looked up values unless I manually remove and re-add looked up value.

Dear @Gabegia,
The following should work:

fd.spRendered(function() {
  fd.control('PReqLookup').ready().then(function() {
    fd.control('PReqLookup').refresh().then(function(){
      alert('List refreshed!');
    });
  });
});

Can you explain the situation in more detail? Why do you need a refresh (specifically on load) and what do you expect to see after it?

Hi @Nikita_Kurguzov - I'm using the lookup to tie together another record to this one. The specific use case is that we're using this form to manage contractor onboarding, so there are several other forms/records related to this one that I want to keep tied together and present the status within this form - a purchase request (PReq), a vendor request (Vend), etc.

I'm using lookup fields to bring in the title and status of those other forms into here, so as they are approved/processed/updated, I want the statuses of those related records to update within the form (i.e. PReqStatus) on form load.

Dear @Gabegia,
Okay, so how does refresh() help here? Is this parent - child relationship, or something more complicated? What do you want the code to do?

To set control value for the Lookup, you need something like this on form load:

fd.spRendered(function() {
   fd.control('Lookup1').ready().then(function(control){
        control.value = ID;
   });
});

This is for our custom Lookup control, for SharePoint lookup field it's almost the same:

fd.spRendered(function() {
   fd.field('Lookup1').ready().then(function(field){
        field.value = ID;
   });
});

Hi @Nikita_Kurguzov - I don't know Javascript very well (or any other coding language) so I'm just trying different things that I can find until something works =)

It's a parent-child relationship (this is the parent, other forms are children of it) with a 1:1 relationship between them.

I'm trying to make it that when the parent form is opened, the children "Status" fields update to the current status. Right now, they seem to be stamped in the form when the lookup values are populated, but are not updating again after that as the children forms are updated.

Dear @Gabegia,
Are you using Lookup control? It stores value as text, but allows connection across different sites.

If the Lists are on the same site, you can use default SharePoint Lookup field - created via List Settings:
image

This type of field:

It can then be added to a form from SharePoint fields, and this will auto-update value when you save changes to Parent item.

Unfortunately, the child lists are on different sites, which is why I can't just use the lookup control/column. The child lists pre-existed the parent, which is one of the reasons we're trying to pull all the children into the parent form.

Dear @Gabegia,
I've just checked, and if you save changes to Child, then the Parent's Lookup control should auto-update when the form opens.

For example, I have Contact List with a Lookup control to an Employee list. If I change Employee name and save, and then open Contact List form, it will auto-update the Lookup value on the form itself (not in the List, this requires to save the form) - is this different for you? Or do you need something else?

I'm finding that my "extra fields" (PReqStatus in the example above) aren't auto-updating. What I'm seeing:

  1. I add a lookup record to the parent form, and am bringing in an "Extra field" of "Status" from the child form (again on a different site), and as an example would be brought in with a "Status" value of "Pending"
  2. I save the form, and the data gets saved to my text field as an array, as expected
  3. The child record is updated so the "Status" field is changed to "Complete"
  4. I open the parent form, and would expect the lookup's extra field of "Status" to show "Complete", but it is still showing "Pending"
  5. Only when I clear the lookup and re-add it does the extra field of "Status" then update to "Complete" as expected

Hopefully that's a little more clear - sorry for the long thread here and thanks for all the help & patience.

Dear @Gabegia,
Now, I understand, please, try the following:

fd.spRendered(function() {
   //function to update status
   function updateStatus(value){
     if(value && value.Status){
       fd.field('Title').value = value.Status;
     }
   }

   fd.control('Lookup1').ready().then(function(control){
        control.$on('change', function(value){
            updateStatus(value)
        });
        //update on form load
        var value = control.value;
        updateStatus(value)
   });
});

That worked, thanks @Nikita_Kurguzov!

Is it possible for the script to run on the parent display form (so it updates on display form load), or just the edit form?

I figured it might only work on new/edit just because of the way SharePoint works but it never hurts to ask =)