The Read-Only Fields Tridion GUI Extension

A much requested feature we at Tridion have always heard customers asking for is to be able to make component fields disabled for the end user when they are entering content.

This could be due to several reasons, one example could be that the content shouldn’t be manually typed into the field but rather be chosen from a 3rd party source (like a CRM database), for this a custom URL can be used.
A custom URL window is a neat feature in Tridion allowing the developers of the solution to build an external form/app/html page that will help the editors enter the right information into a field.

You can also think of a scenario where fields will become disabled or enabled based on the content being entered into other fields, giving the component edit form a more wizard-like feel.

The extension I created doesn’t have any such specific business logic but it does give a good basis to achieve it if needed.

The extension itself covers all types of fields; text, rich text, numeric, date, links and embedded.

Set up

To use the extension you will first need to download my jQuery extension which I introduced in a previous post: Using jQuery for Tridion GUI Extensions (the link to download is at the bottom of the article).

That article also explains how to install extensions using the TcmExtensionInstaller utility.

You’ll find the link to download the read-only extension itself at the bottom of this article.

By default the extension will look for fields that have their descriptions suffixed with “[readonly]”. I’ll discuss how you can change this to something else shortly.

Examples

Once you have set up the field(s) you want to have disabled in the schema you’re pretty much done. The extension will take care of the rest.

Here are examples of how different types of fields look like when disabled:

Text fields

Rich text fields

Unfortunately, the GUI loads these inside a frame so its much more difficult to change the background color of the text area but as you can see, the buttons on top are disabled and it is not possible to enter any text into the field.

Component link fields

Embedded fields

Depending on your screen it might be difficult to see but the extension has placed a semi-transparent overlay on top of the embedded field to make it impossible for the user to fill in any of the nested fields.

Checkboxes, radio buttons and dropdown lists

This of course also works with Metadata fields

You have probably noticed that with all these examples, the “[readonly]” text added to each of the fields’ labels has been removed by the extension.

Configuration

The extension lets you configure a few aspects using a configuration object declared at the top of the extension js file.

Label configuration

To determine which suffix string the extension will look for in the fields’ label change the ‘ReadonlyLabel’ property.

Disabled color configuration

To determine which color to paint the disabled fields, change the ‘DisabledColor’ property.

Field types configuration

You can select which types of fields to disable regardless of the suffix added to the label. This can become even more handy if you choose to add some logic of your own to the extension.

Extension Code

Can be downloaded here.

(update 26/08/2010)

The extension is also officially available on SDL Tridion World