How to set the default toggle to closed for a section or panel

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.

This document, while broadly accurate, needs to be updated to match current documentation standards.

If there are sections or panels that you do not use very often, it might be desirable to have these closed by default.

All records in CollectionSpace, as well as the panels in the sidebar are all toggleable, meaning they can be collapsed into a thin bar with the contents hidden from view. Another click on the bar will again expand the panel/section and expose the contents. This document describes how to make a section or panel closed by default, so that a user will see its closed state when loading a page.

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 you plan on never using the fields, there are two alternatives:

Hiding the field (or group of fields) means that the field is never displayed to the user and hence never editable. This is done via CSS, and the procedure for doing so is very simple and it is easy to roll back. The downside is that it is slightly less efficient than removing fields entirely.
Deleting a field has the same effect on the User Interface as hiding the field, but this solution is slightly more involved and slightly more efficient. Furthermore it is harder to roll back than hiding the field.

Task Description

Some panels and sections have a small triangle icon, indicating that the user is allowed to hide or show the contents by a click on the panel/section header. An 'open' toggleable panel and section are shown below:

Clicking the panel/section header will collapse it, hiding the content, as shown below:

By default all panels are open. This document describes how to change any specific panel(s) or section(s) to be closed by default, when opening a record. (A single click on the panel/section header will open it again.)

If you never use a section or field, you might instead want to hide it, making it completely unavailable to the user. Hiding sections or fields is described further in How to hide a field or group of fields.

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

Do this just once:

Find your tenant folder - the folder in which you make UI configuration changes for your museum:
Tip

If you can't find your tenant folder, or need a refresher about how you set up this folder, see Prerequisites, above.
- If you are using the UI source code tree, your tenant folder is a folder named for your museum, inside the src/main/webapp/tenants folder.
Within your tenant folder, find the HTML file that holds the section or panel that you need to edit. Some examples:
- If you want to toggle a section header of Loan In records: html/pages/LoaninTemplate.html
- If you want to toggle the sidebar's Terms Used panel: html/components/SidebarTemplate.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 up a couple of levels from your tenant folder.
- Within your tenant folder, create a folder structure that corresponds to the one in the defaults folder that contains the HTML file.
- Copy the HTML file from its location within the defaults folder into the corresponding location within your tenant folder.
- As an example, the folder structure in the defaults folder for a Loan In template would be:
```
  defaults
    html
      pages
```
  and you'd copy the Loan In template to the corresponding location within your tenant folder:
```
  {your tenant folder}
    html
      pages
```

And then:

Open the html file containing the panel or section that you want to set as closed
Locate the <div> tag of the header of the panel or section that you want to toggle. This can generally be located based on the classes of the div tag. For example, if you want to set the "Loans In Information" header of Loan In Records to be toggled closed by default, locate this:
```
	<div class="fl-container-flex fl-fix information-group">			
           <div class="csc-recordEditor-header fl-container-flex header toggle csc-loanin-loaninInformation-label"></div>
	   <div class="csc-recordEditor-togglable fl-container-flex fl-fix content main">	
```
Notice in particular the toggle class of the middle div box and the csc-recordEditor-togglable class of the last div box
The div with toggle is the actual header that can be clicked to toggle the panel or section - the following div (with toggleable class) is the one that will be toggled

To have the panel or section closed by default, add a class cs-togglable-collapsed to the div box that has the toggle class and style="display:none;" to the div box that is being toggled. In the example of Loan In Information, this would look like:

	<div class="fl-container-flex fl-fix information-group">			
           <div class="csc-recordEditor-header fl-container-flex header toggle csc-loanin-loaninInformation-label cs-togglable-collapsed"></div>
	   <div class="csc-recordEditor-togglable fl-container-flex fl-fix content main" style="display:none;">

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

Summary

This document described how to set toggleable sections and panels to be closed by default. This will continue to make the fields they contain easily available, via a single click. However, if you are not planning on using the fields at all, you might prefer to:

Hide the fields entirely: How to hide a field or group of fields
Remove the fields: How to remove fields