Content Comparison

...

• 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:

  Code Block
  {your tenant folder} html components pages

• 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.

...

• 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:

    defaults html pages LoaninTemplate.html

    Code Block

    and you'd copy that Loan In template file to the corresponding location within your tenant folder:

    Code Block
    {your tenant folder} html pages LoaninTemplate.html

• 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':

  Code Block
  <div class="info-column2-50 fl-force-right"> <div class="info-pair"> <div class="header"> <div class="label csc-loanin-loanInNote-label"></div> </div> <div class="content"> <textarea rows="4" cols="30" class="input-textarea csc-loanIn-loanInNote" /> </div> </div> </div>

• 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):

  <div class="info-column2-50 fl-force-right"> <div class="info-pair" style="display:none;"> <div class="header"> <div class="label csc-loanin-loanInNote-label"></div> </div> <div class="content"> <textarea rows="4" cols="30" class="input-textarea csc-loanIn-loanInNote" /> </div> </div> </div>

  Code Block

• 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.

...