A simple way to hide fields in the Umbraco back end

There are some cases where you need to have one or more hidden properties on your document types. It might be a label property that takes its (calculated) value during publishing of a node, is used somewhere like a list view, and is better not to be seen in order not to confuse users, or it might be a property that you expect to be requested and/or used later but don't want to go into the trouble of adding it at that time (especially if the site has gone live).

For us, it's usually some "standard" document types that we're using in our Umbraco setups, like alternate titles for a node. We've got a whole bunch of them: A global one, a browser title, an "internal" title (used as content heading inside the page), an alternate title for menus, one for the footer, one for the breadcrumb and so on. All of them are optional, and there's code that decides what title to use depending on where it's used. The problem is that not all sites we create necessarily feature breadcrumbs or links in the footer, or even internal titles. Since we've got a "standard" document type containing these fields that we compose with our content pages, it would be tedious to have to adapt it every time by removing irrelevant fields. To tell you the truth, that's what we were actually doing until recently.

Wouldn't it be nicer, though, to just have some fields "disappear" but keep them where they are so that they can be used later if needed? For example, a web site today might not feature breadcrumbs, but who's to say that the client won't request this tomorrow? 

Unfortunately, Umbraco does not have a way to hide properties out of the box. But it's pretty simple to do so. All it takes is some Javascript and a way to inject this into the back-end. This article describes, among other things, a simple way you can inject JS and CSS into the back end: Tweaking Umbraco 7 Back Office. Based on this, we can take it a step further and have some dynamically-generated Javascript that will do what we need.

(Disclaimer: Please use this post as a reference point only. This was tested in Umbraco version 7.8.x and 7.10.x and is working on both, but it won't work in Umbraco 7.4.x for example, since there is no data-element attribute in the back-end for properties. We don't know how the back end's code will be tomorrow, and there's a chance this implementation may not work any more on upcoming Umbraco versions).

How to hide your properties

So, first things first. We need a simple way to tell Umbraco to hide properties in the back end by property alias. Doesn't get much simpler than a line inside the <appSettings> section in web.config:

This key contains a comma separated list of all property aliases we need to hide from the back end. Let's see how we can make Umbraco read this and hide the properties now.

As the article I referred to above states, you've got to create a package.manifest file inside your App_Plugins folder, preferrably in a subfolder for organizational purposes. I've named this folder HideProperties, so contents will be as follows

And you're done!

UPDATE FOR UMBRACO 8: If the above doesn't work, try replacing "div" in line 16 with "umb-property".

What this does is that it injects the two files into the back end on app startup. The second file (.ashx) will dynamically generate javascript to hide every field you have specified in web.config. 

For example, if I was to call this for the two properties mentioned above, its output would be:

Here's a sample of how the back-end would look like without hiding and with hiding those two properties.

Without hidden properties:

With hidden properties:

As you may already suspect, this is good only for non-mandatory properties. Moreover, since it's based on client-side elements, there's always the risk those might change with an Umbraco upgrade (as stated in the disclaimer above), but it's fairly simple to adapt the JS if this happens.

Happy coding!