Hide Ribbon Buttons in Nintex Responsive Form

The following post details how you can hide a Nintex form’s ribbon buttons when it is viewed in a browser, but the same workaround is respected by all versions of Muhimbi’s PDF Converter when converting Nintex forms to PDF. This means you can create clean and uncluttered PDFs from your forms when it comes time store the forms and replace them with new ones.

You can find more details about the capabilities of the PDF Converter here.

As a Nintex developer, when you create a new Nintex Form you will be presented with the option to create forms in ‘Responsive‘ or the ‘Classic‘ design experience.

The ‘Responsive‘ Designer provides great advantages such as out of box ‘Responsive Experience‘, ‘Themes‘, and easy to use ‘Rules’ pane, etc. On the other hand with Classic Form you get more control over the form, as it Supports custom CSS or JavaScript/jQuery, so for these, you’ll use The ‘Classic‘ design experience .

One important thing to note is, once you create a ‘Responsive’ form there is no direct way to Convert the form into a ‘Classic’ form. To revert to Classic, you need to recreate the Nintex Form.

Scenario:

In one of my recent projects, I was tasked with creating a number of Nintex forms. After evaluating the requirements of the Project, the Nintex ‘Responsive’ form was the perfect fit, so we created the forms and the forms were deployed to the end users. After a few days, the business decided that users should not have an option to edit the list item whilst in the form interface.

One of the options with ‘Classic’ forms, is to insert some CSS in the Custom CSS box of the Form Settings, however with Nintex ‘Responsive’ forms, this option has been removed..

After some research, I discovered that I had hit a Nintex Limitation – “Responsive forms do not allow for custom code to be added, while Nintex Classic forms do“.

Solution:

As we now know, Nintex removed the option to include CSS scripts in the ‘Responsive’ form, but for our requirement, we should now be able to hide ribbon elements in the responsive forms for SharePoint by following the instructions below:

Step 1: Add a ‘Label‘ control to your Form and “Double click to edit‘.

Step 2: The ‘Control Settings – Label‘ should open. Click the ‘Format Text‘ and click on ‘Edit Source‘.

Step 3: In the HTML Source Add the Custom CSS below.

To Hide the “Edit Button”:

<style type="text/css">#Ribbon\.ListForm\.Display\.Manage\.EditItem-Large{display:none;}</style>

To Hide “Edit Items Pane” :

<style type="text/css">#Ribbon\.ListForm\.Display\.Manage {display:none;}</style>

Tp Hide the “Actions Pane”:

<style type="text/css">#Ribbon\.ListForm\.Display\.Actions{display:none;}</style>

Disable “Print to PDF“:

<style>a[id^="Nintex.Forms.Print.Ribbon.Print."]{pointer-events: none; cursor: default; text-decoration: none; opacity: 0.3;}</style>

The “Nintex.Forms.Print.Ribbon.Print.” gives you the anchor tag with the image inside. You can disable all actions for it and make it semi-transparent just like Nintex does for all other disabled-buttons.

The CSS in the above image disables the “Edit Button”

Bonus CSS (Hide the Entire Ribbon Button only when printing with Muhimbi PDF Converter):

<style>@media print {#s4-ribbonrow { margin-top: -186px; } } </style>

If you notice in the above CSS. I have not used “display:none” because this would hide the ribbon when the form was viewed in a browser, but not when the form was printed.

When the form is reloaded emulating ‘print’ media type, then the s4-ribbonrow element gets a hardcoded “dispaly:block !important;” element style rendered into the HTML making any attempts to change it’s value futile.

As a workaround, we can push the ribbon out of sight by applying a negative margin.

Note: Muhimbi’s PDF Converter For SharePoint ships with a large number of Workflow Actions for SharePoint Designer, Nintex Workflow as well as K2. For details about using the PDF Converter in combination with Nintex workflow, see link and please note, The PDF Converter will respect your changes to hide the ribbon when converting the forms to PDF.