Hiding a field based on a lookup dropdown

Forms SharePoint 2019
1

I have a form where I want to hide a field based on the value of another field. Both are sharepoint fields.

I copied a working example where I was using a toggle, so instead of .value == true I used .value == 'Other'. The only tangible difference is that the 'franchise' field is a sharepoint lookup instead of sharepoint toggle (yes/no)

fd.rendered(function() {

function setFranchiseVisibility() {
    if (fd.field('Franchise').value == 'Other') {
        $(fd.field('Other_x0020_Franchise').$parent.$el).show();
  } else {
        $(fd.field('Other_x0020_Franchise').$parent.$el).hide();
  }
}
  
// Calling when the user changes the status
fd.field('Franchise').$on('change',setFranchiseVisibility);


// Calling on form loading
setFranchiseVisibility();

});

Can someone point out what I'm doing wrong?

2

Hello @JoeyJ,

Welcome to Plumsail Community!

To get the value of the lookup field you need to use this code:
fd.field('Lookup').value.LookupValue

And in case you are using SharePoint forms, you need to put your code inside spRendered event. Please find more information about the events here.

I've updated your code according to the comments. Please see below.

fd.spRendered(function() {

	function setFranchiseVisibility() {
		if (fd.field('Franchise').value.LookupValue == 'Other') {
			$(fd.field('Other_x0020_Franchise').$parent.$el).show();
	  } else {
			$(fd.field('Other_x0020_Franchise').$parent.$el).hide();
	  }
	}

	// Calling when the user changes the status
	fd.field('Franchise').$on('change',setFranchiseVisibility);


	// Calling on form loading
	setFranchiseVisibility();

});
2 Likes
3

Thanks for your reply @mnikitina. That does work. I ran into a further problem with the same function.
The code above works fine, but if the dropdown does not have a default value, then it fails with
TypeError: Cannot read property 'valuelookup' of null

I'm assuming I need to do some check to make sure the field value is not null first, but I can't seem to figure that out.

4

nevermind, it was a syntax error. Working now.

1 Like
5

Hiya Margarita,

I have a similar issue but my case is for checking multiple options. How do I write the correct syntax for this scenario?

Here is the code that I have created:

function showHidePILON(){
    if (fd.field("Leaving_Reason").value.LookupValue == "Dismissal - Capability"
    ||"Dismissal - Conduct" 
    || "Dismissal - Other Substantial Reason" 
    || "Dismissal - Statutory Reason"){
    //show PILON field
    $(fd.field('Payments_Made_In_Lieu_Notice').$parent.$el).show();
    $(fd.field('RPaymentsLieuNotice').$parent.$el).show();
    }
    else{
    $(fd.field('Payments_Made_In_Lieu_Notice').$parent.$el).hide();
    $(fd.field('RPaymentsLieuNotice').$parent.$el).hide();
    }
}

// Calling function when Destination on Leave value changes
fd.field('Leaving_Reason').$on('change',showHidePILON);
showHidePILON();

Here is what Console is saying:

image
image973×239 12 KB

I can't see what I'm doing wrong. The field names are correct as well.

6

Hello @DryChips,

Is the Leaving_Reason the multiple choice lookup field? If so, the field value is an array of objects and you need to loop through each object to check its value:

fd.field('LookupMultiChoice').value.forEach(function(i){
    if(i.LookupValue == 'Item1' || i.LookupValue == 'Item2'){
        alert('true')
    }
})
7

Hi Margarita,

What do you mean by multiple choice lookup? Do you mean in the sense that I can select more than one option in the lookup field? If so, I haven't set this up that way.

The field is a lookup field and has different options in the drop-down. We have four different types of "Dismissals". If the user selects any of the type of the dismissals then I want the hidden field to show.

I can't test the code now until Monday to it being a public holiday in the UK but I will test it and let you know what happens.

8

@DryChips,

The error indicates that the field value does not have the LookupValue property. That could be because:

  • field name in the code is invalid
  • the field is not fully initialized, you need to update the code:
fd.field('Field1').ready(function() {
 showHidePILON()
});
  • field type is not a single choice lookup
  • field value changes pragmatically

Please check all of the above.

The valid syntax for or operator is the following:

var fValue = fd.field('Field1').value;

if(fValue === 'item2' || fValue === 'item3'){
    alert('true');
}
1 Like
9

Hi Margarita,

I have tested this and nothing seems to have worked.

Here is the code:

//This code will show/hide the 'Payments Made in Lieu of Notice' field
function showHidePILON(){
var fValue = fd.field("Leaving_Reason").value;
    if (fValue === "Dismissal - Capability" || fValue === "Dismissal - Conduct" 
        || fValue === "Dismissal - Other Substantial Reason" || fValue === "Dismissal - Statutory Reason"){
        //show PILON field
        $(fd.field('Payments_Made_In_Lieu_Notice').$parent.$el).show();
        $(fd.field('RPaymentsLieuNotice').$parent.$el).show();
    }
    else{
        $(fd.field('Payments_Made_In_Lieu_Notice').$parent.$el).hide();
        $(fd.field('RPaymentsLieuNotice').$parent.$el).hide();
    }
}

fd.field("Leaving_Reason").ready(function(){
// Calling function when Destination on Leave value changes
field('Leaving_Reason').$on('change',showHidePILON);
});

Here is how the fields are displayed on the form:

image
image808×114 5.22 KB

The reason why the list of reasons are displayed in a lookup field is due to the list of reasons updating quite frequently. The plan is to link the SharePoint list to a SQL table so it's updated and refresh automatically instead of manually updating the list.

I have another code that is doing another job related to the leaving Reason field (auto-populating a field) and that's still functioning.

10

@DryChips,

When you change the Lookup field value programmatically, its value is an integer. Use the code below to re-load field value:

    fd.field('Lookup').$on('change', function(value) {
        if (typeof value === 'number') {
            fd.field('Lookup').reloadValue().then(function() {
                    console.log(fd.field('Lookup').value.LookupValue);
                });
        }
    })
11

Hiya, sorry, I don't understand this syntax.

Please can you explain what this code does?

12

@DryChips,

When you populate the Lookup field using the code, the field value is an integer, the item ID. To load the display text and other information, you need to reload field data.

The code checks if the field value is an integer and loads all data for the selected option:

    fd.field('Lookup').$on('change', function(value) {
        //check that the field value is an integer
        if (typeof value === 'number') {
            //load dispaly value of the selected option
            fd.field('Lookup').reloadValue().then(function() {
                    //you can place your code here
                    console.log(fd.field('Lookup').value.LookupValue);
                });
        }
    })
1 Like
13

Okay, thank you for the clarification. :slight_smile:

1 Like
14

Hi @mnikitina

I am trying to hind a disable a lookup field if the first lookup field has not been selected yet, but now luck. Can you please advise as it is not disabling the second lookup at all. Please see example of my code below

fd.spRendered(function(){
fd.control('Payroll_Area_2').ready().then(function(control) {
function disableLookupField() {
if (fd.field('Payroll_Area_2').value.LookupValue == '')
fd.field('Name').disabled = true;
else {
fd.field('Name').disabled = false;
}
}

// Calling disableLookupField when the Payroll Area lookup field has a value or changes
fd.field('Payroll_Area_2').$on('change',disableLookupField);

// Calling disableLookupField on form loading
disableLookupField();

});
})

15

Find the solution in this post: