How to hide a field or group of fields

Not Yet Updated for v5.0

The documentation on this page has NOT yet been updated to describe what's changed in the v5.0 release of CollectionSpace.

Fields or groups of fields may easily be hidden in the CollectionSpace User Interface (UI) by adding a CSS display:none style declaration. This procedure is also very simple and easy to roll back: simply remove the CSS declaration.

Alternatives for not showing a field

There are alternative ways of not showing fields or groups of fields.

Having toggleable sections and panels closed by default should be used if you do not wish to display fields by default, but still want to allow editing of the fields and saving of the data in them.

If what you want to hide is toggleable (like the sections of records or panels in the sidebar), there is the option of having the section/panel collapsed by default. This takes up very little space, but still allows the user to edit and view the fields when required.
Deleting a field has the same effect on the UI as hiding the field via CSS, but this solution is slightly more involved and slightly more efficient. It is harder to roll back than hiding the field.

Task Description

Hiding a field using CSS is a very simple procedure. It involves locating the section of HTML markup containing the field or fields that you want to hide and adding a inline CSS style (or class) to it. The effect is that this markup will no longer displayed in the UI, and consequently users are unable to see and edit the fields contained within it.

If you want to once again display the fields, simply removing the CSS style (or class) will make them visible again.

Prerequisites

This work requires:

Knowledge of how to edit text files.
Familiarity with reading HTML markup.

In addition, if you have not already done so:

Create a tenant for your museum. (A tenant is a space or partition on a CollectionSpace system for your museum or collection, within which you'll make most or all of your configuration changes.)
- Creating your new tenant
Read about how to make configuration changes in the User Interface (UI) layer.
- Configuring CollectionSpace's User Interface (UI) Layer - An Overview

Layers involved

To carry out this task, you will need to make changes in the following CollectionSpace layer(s):

User Interface (UI)

Procedure

Find your tenant folder

Click here to read these instructions (included in many documents on this site) ...

Unknown macro: {multi-excerpt-include}

(Or instead see Finding your tenant folder.)

Copy HTML pages into your tenant folder and modify them to hide fields

Before you begin, see Special cases and words of warning.

If it isn't already present, make an html folder within your tenant folder.
If it isn't already present, make a components folder within that html folder.
If it isn't already present, make a pages folder within that html folder.
Afterwards, you will then have this folder structure:
```
 
```

From within src/main/webapp/defaults/html and its sub-folders, components and pages, copy one or more of the relevant HTML files - the file(s) within which you want to hide fields - from that defaults folder into the matching (corresponding) location within your tenant's folder.
Within your tenant folder, find the HTML file that holds the field or group of fields that you want to hide.
Edit that file in a text editor.
Locate the HTML tag of the field or group of fields you want to hide. You can often locate it based on the name or classes of the tag.
Add a style="display:none;" attribute string to the tag you want to hide. This will cause everything inside that tag to be hidden on that page.

See the example below for a detailed walkthrough of hiding the Loan In Note field on the Loan In record page.

Copy your changes to the CollectionSpace server

Click here to read these instructions (included in many documents on this site) ...

Unknown macro: {multi-excerpt-include}

(Or instead see Configuring CollectionSpace's User Interface (UI) Layer - An Overview.)

Test

After making the changes described above, you can test them by either:

Rebuilding UI layer and restarting the cspace server
Checking it by browsing to the edited page on your local filesystem
For more information about either option, see: How to test changes in the UI layer

Example

This is a step-by-step example of hiding the Loan In Note field on the Loan In record.

In your tenant folder, find the HTML template file for the Loan In record: html/pages/LoaninTemplate.html
If this file doesn't already exist in your tenant folder, copy this file there:
- Find the UI's defaults directory. This directory should be one level up from your tenant folder.
- Copy that HTML template file from its location within the defaults folder into the corresponding location within your tenant folder.
- As an example, the Loan In template file would be found in:
```
 
```
  and you'd copy that Loan In template file to the corresponding location within your tenant folder:
```
 
```

Edit the copy of the LoaninTemplate.html file, in your tenant folder, in a text editor.
Locate the HTML tag of the field or group of fields you want to hide. This can generally be located based on the name or classes of the tag. For example, if you want to hide the "Loan In Note" field and its label, find the following block of HTML markup containing the text 'loanInNote':
```
 
```
Now simply add a style="display:none;" attribute to the tag you want to hide. (Often, when hiding a single field, you'll want to apply this attribute to the <div class="info-pair" ...> tag. This is a <div> tag that contains a pair of child <div> tags: one for the text label near the field, and one for the field itself.) In the above example, that style="display:none;" attribute has been added to the block of HTML markup above, so that it now looks like the following (see the second line below):
```
 
```
Adding a style="display:none" attribute will generally hide all child elements too. Exceptions may include if a child element has a specific style="display" override or if there is DOM manipulation made by a JavaScript script.
It might not always be obvious exactly what tag to hide, and furthermore, hiding tags might sometime mess up the layout. Since hiding fields is strictly a layout issue, as far as CollectionSpace is concerned, learning by trial and error what elements to hide shouldn't have any consequences.

Tip

An alternative to adding the inline CSS declaration is to use something a bit more flexible. Rather than adding the style="display:hidden; declaration to every field you want hidden in the HTML file, you could instead add a custom CSS class, say class="hiddenField", to every field you want to hide. Next, you could add this custom CSS class to your tenant's cspace.css file (which is located within the css folder within your tenant folder, or can be copied there from the defaults folder) and declare this rule:

This rule will then apply to every field whose tag has the hiddenField class.

Special cases and words of warning

Some fields in Collection Space, in the Application or Service layers, may be required fields: that is, they may be required to have a non-empty value (or a particular value) before being created or updated. In these cases, it may be difficult to hide them, until and unless you disable the validation code that makes these fields required. For instance, the fields that store identification numbers for records are, by default, required fields in many of CollectionSpace's record types.

Required fields are nearly always marked in the UI with a red asterisk ("*"). If the fields you want to hide aren't marked that way, you likely can proceed in safety. However, if you want to definitively identify whether a field of any record type in the Services layer has a required value, you can download the Services layer source code tree (or browse it online) and view the ValidatorHandler class for the service that handles that record type. For instance, inspecting the CollectionObjectValidatorHandler.java file in the Services layer will show you that, for Cataloging (CollectionObject) records, the Object Number field is a required field, one which must contain a value when creating and updating records.

Hiding fields might affect the page layout. This depends entirely on what tags you hide, including their position relative to other elements on the page. While sometimes you can avoid layout changes by hiding a different tag that still hides the field without messing up the layout, at other times you might need to modify the layout - usually by moving around blocks of HTML markup for various fields - after hiding fields.
Fields used on the advanced search page must also be hidden. The advanced search page is configured separately, so if you hide a field in the record display you will probably also want to hide the corresponding field on the advanced search page. The template for the advanced search page is stored in the html/components directory with a prefix of SearchFieldsTemplate. Copy the corresponding template file to { your tenant folder }/html/components directory and edit as described above.

Summary

This procedure has demonstrated how to hide a field or group of fields from view using either the inline CSS selector display. As described in the top of this page, there are alternative ways of not showing fields which might be better suitable for what you want:

Closing toggleable section or panels by default: How to set the default toggle to closed for a section or panel
Removing fields entirely: How to remove fields

In addition, the following may also be related when hiding certain fields:

Enabling or disabling required fields: How to validate data entered into fields