Conditionally hide toolbar and side navigation on Display Form

Forms
1

Hello,
Need a little help with this one. Our requirement is: when a Y/N field changes to Yes, on the Display Form we need to:

  • Hide the toolbar
  • Hide the left-side navigation

If that Y/N later changes back to No, need to restore the viewing of the toolbar and navigation on the Display Form.

Thanks in advance

2

Hello @Pandra,
I'm not sure if you want to hide parts of your form or SharePoint elements located outside of your form. Can you please take a screenshot of your form and highlight the areas you want to conditionally hide?

3

Hello Nikitat
Not able to share a screenshot, but let's not focus on hiding the left navigation. We can address that separately. If you can assist with conditionally hiding just the EDIT and CLOSE buttons (and keeping the PDF icon available) based on the value of a Y/N field, that would be great. thanks!

4

Sure, we have a whole page about managing the form toolbar through JavaScript:
Managing SharePoint form’s toolbar with JavaScript in Plumsail Forms

For your case, something like this should work:

fd.spRendered(() => {
    const choiceField = fd.field('Choice1'); // Replace Choice1 with the SharePoint field name
    const toolbarButtons = fd.toolbar.buttons;
    const pdfButton = fd.toolbar.buttons.find((el) => el.id === 'PDF');
    
    choiceField.$on('change', (value) => {
        if (value === 'Yes') {
            fd.toolbar.buttons = [pdfButton];
        } else {
            fd.toolbar.buttons = toolbarButtons;
        }
    });
})

To learn more about custom JavaScript in Plumsail Forms, I recommend checking the JavaScript section of our docs.

5

This is perfect, thank you for your assistance