Hide Button based on SP Text Field

Forms
1

Hi there,

I hope this is an easy one. I have tried but my JS code is not working.

I have a button that I only want to appear when a sharepoint text field = "No" If it is "Yes" the button needs to be hidden.

Appreciate the help.

2

Just to be clear the SP field is a Text field not a Yes/No field. And I only want my button to be visible when text inside the SP Text field = "Yes"

3

Hello @mhannaway,

You can show/hide control dynamically using the code:

function showHideButton() {
   if(fd.field('Field1').value === 'Yes') {
   //show control
   fd.control('Button1').hidden = false;
  }
  else {
   //hide control
   fd.control('Button1').hidden = true;
  }
}

//call function on form load
showHideButton();

//call function on field change
fd.field('Field1').$on('change', showHideButton)
4

Thanks @mnikitina

For some strange reason it isnt working. I am pasting the below code into the JS editor. If the field 'HiringManagerApprovalButton' is a 'No' I want the button to show. Does the SP field have to show in the form for it to work?

function showHideButton() {
if(fd.field('HiringManagerApprovalButton').value === 'No') {
//show control
fd.control('Button2').hidden = false;
}
else {
//hide control
fd.control('Button2').hidden = true;
}
}

//call function on form load
showHideButton();

//call function on field change
fd.field('HiringManagerApprovalButton').$on('change', showHideButton)

5

@mhannaway,

If you are using forms for SharePoint Online, you must place the code inside the spRendered() event like so:

fd.spRendered(function(vue) {
    function showHideButton() {
        if (fd.field('HiringManagerApprovalButton').value === 'No') {
            //show control
            fd.control('Button2').hidden = false;
        } else {
            //hide control
            fd.control('Button2').hidden = true;
        }
    }

    //call function on form load
    showHideButton();

    //call function on field change
    fd.field('HiringManagerApprovalButton').$on('change', showHideButton)
});
6

Thank you for clarifying. Im sorry @mnikitina I'm relatively new to code and trying my best to learn. Attached is a screenshot of what I pasted, but it still wont work. I tried pasting it above as well as below all my other code in JS editor and it wouldnt work.

image

7

@mhannaway,

Not a problem, we all started somewhere.

Please share the screenshot of all errors from the browser console(F12) that you get on form load and when changing the field value.

image
image872×295 27.9 KB

8

Thanks @mnikitina

See screenshot of error below. Not sure what the other failed to load resource errors are but the error in relation to the show hide button is showing.

image

9

@mhannaway,

Thank you!

Most likely the field name in the code is invalid. You need to double check the field internal name and update it. You can find the internal name in the designer:
image

1 Like
10

Thanks @mnikitina

Turns out the SP field had to be in the form itself. So added the field and just hid it and it worked.

Thank you so much.

1 Like