How to change the layout of fields on a page

Owned by Jessi Weithman
Apr 18, 2024
3 min read

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

Task Description

This document highlights how to change the layout of fields on CollectionSpace's web pages.

This involves updating appropriate templates (editable and/or read-only) for a specific procedure.

Prerequisites

This work requires:

  • Knowledge of how to edit text files.
  • Familiarity with reading and editing 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.)
  • Read about how to make configuration changes in the User Interface (UI) layer.

Layers involved

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

  • User Interface (UI)

Procedure

In order to change the change the layout of fields for some type of procedure you would need to modify record specific template file(s).

  • Find your tenant folder - the folder in which you make UI configuration changes for your organization:

    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 organization, inside the src/main/webapp/tenants folder.
  • Within your tenant folder, find the appropriate template file (editable or/and read-only) for the type of the procedure you want to change the layout for. It should be located in the:
    • html/pages/{PROCEDURE TYPE}Template.html for editable templates

      PROCEDURE TYPE is the type of the procedure you want to update the layout for.

  • If this file doesn't exist in your tenant folder, copy this file there:
    • From within the UI's defaults directory, which should be either next to or one level up from your tenant folder. Copy the necessary template into your tenant's specific html/pages directory (create the folders if they are missing).
    • Make sure that your folder structure is correct and that all necessary files were copied over. 
          {your tenant folder}
        html
            pages
                {PROCEDURE TYPE\}Template.html
  • Edit the appropriate HTML template file in your favorite text or HTML editor.
  • In order to identify the appropriate blocks of markup to edit or move in pages' HTML markup, you might want to use one of the web developer tools available your browser (Chrome and Safari have one built in, while Firefox has a Firebug add-on). After the extension is installed you can right click on the field and click on "Inspect element" (or equivalent) to find the location of the field you want to move.
  • You can copy/cut and paste any of the existing blocks that contain input fields, drop downs, autocomplete widgets, repeatable widgets etc and place them anywhere else within the same template. For example you can move block's such as: 
    <div class="info-pair">
    <div class="header">
        <div class="label csc-collection-object-numberOfObjects-label"></div>
    </div>
    <div class="content">
        <input type="text" class="input-numeric-medium csc-object-identification-number-objects"/>
    </div>
</div>
    to any other place within the template to modify the layout or order of fields.

    Tip

    Make sure that when you move things around you move both: the appropriate field and the corresponding label for that field.

  • Copy (deploy) your tenant folder, which includes the HTML template file you have just edited, to the CollectionSpace server. See Configuring CollectionSpace's User Interface (UI) Layer - An Overview for details on how to deploy your changes.
  • Test your changes.

Test

After following the procedure above, use your favorite web browser for the following steps:

  • If you are not already logged into your museum (tenant) on your CollectionSpace system:
  • Navigate to the record editor page for the record you modified the layout and verify that the field or groups of fields you edited has the expected position.

If it doesn't work

If the field is not placed where it is supposed to be make sure:

  • You've cleared your browser caches.
  • You've navigated to the relevant page in your web browser to see your changes.
  • You've edited the correct file.
  • You've copied (deployed) the changes in your tenant folder to your running CollectionSpace server.

See Also

Please see the following links as they might be relevant to this documentation page.