Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 2 Current »

CollectionSpace data input field types

CollectionSpace supports a wide variety of HTML data input field types. These include text, textarea, select (drop-down) and date picker fields, among others.

You can add data input fields within CollectionSpace's HTML template files. The following examples demonstrate the patterns that you can use for adding a new field to a record page or to change an existing field's data type.

Along with each example of HTML markup below, you can also view an example of the corresponding entry that you will need to add to an XML-based configuration file (see Unified CollectionSpace Config) as a declaration for that field.  Also see cspace-config Fields for a list of attributes that can be applied to each field declaration.

Note

You will substitute actual procedure and field names within the class="" attributes displayed below, wherever those values are represented by 'placeholder' values such as {recordid}-{fieldid}.

Single line text field

Example single line text field

Example markup in HTML template file

<div class="info-pair">
   <div class="header">
      <div class="label">Field label</div>
   </div>
   <div class="content">
      <input type="text" class="csc-{recordid}-{fieldid}" />
   </div>
</div>

Example entry in Configuration file

<field id="{fieldid}"></field>

Multi-line text field

Example multi-line text field

Example markup in HTML template file

<div class="info-pair">
   <div class="header">
      <div class="label">Field label</div>
   </div>
   <div class="content">
      <textarea class="input-textarea csc-{recordid}-{fieldid}" />
   </div>
</div>

Example entry in Configuration file

<field id="{fieldid}"></field>

Term List

Example select field

There are two types of Term Lists - for more information, see: An overview of term lists

Example markup in HTML template file

<div class="info-pair-select">
   <div class="header">
      <div class="label">Field label</div>
   </div>
   <div class="content">
      <select class="input-select csc-{recordid}-{fieldid}" />
   </div>
</div>

Example entry in Configuration file: Static term list (configured via config file)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Unknown macro: {multi-excerpt} 
<field id="{fieldid}">
<options>
    <option id="" default="yes">Please select a value</option>
    <option id="deaccession">Deaccession</option>
    <option id="disposal">Disposal</option>
    <option id="returnofloan">Return of Loan</option>
</options>
</field>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Example entry in Configuration file: Term list (configured via UI)

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Unknown macro: {multi-excerpt} 
<field id="{fieldid}" autocomplete="vocab-languages" ui-type="enum">
  <enum>
    <default>urn:cspace:core.collectionspace.org:vocabularies:name(languages):item:name(eng)'English'</default>
  </enum>
</field>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Date Picker field

Example date picker field

Example markup in HTML template file

<div class="info-pair-date">
   <div class="header">
      <div class="label">Field label</div>
   </div>
   <div class="content">
      <input type="text" class="fl-force-left input-date csc-{recordid}-{fieldid} csc-calendar-date" />
       <a href="#_bottom" class="csc-calendar-button fl-table-cell fl-force-left cs-calendar-button" >
       <img src="../images/cal.png" alt="calendar"  height="17" width="16" /></a>
       <div class="csc-date-picker cs-date-picker"></div>
   </div>
</div>

Example entry in Configuration file

<field id="{fieldid}" ui-type="date"></field>

Number Pattern Chooser field

Example number pattern chooser field

Example markup in HTML template file

<div class="info-pair">
   <div class="label">Field label</div>
   <div class="content csc-{recordid}-{fieldid}-patternChooserContainer">
      <input type="text" class="input-numeric-long csc-{recordid}-{fieldid} pattern-chooser-input" />
   </div>
</div>

Example entry in Configuration file

<field id="{fieldid}" chooser="yes" seperate_ui_container="true">
    <options>
        <option id="intake" sample="IN2009.1.1">Intake</option>
        <option id="accession" sample="2009.1.1">Accession</option>
        <option id="loanin" sample="LI2009.1.1">Loans In</option>
    </options>
</field>

Boolean (Checkbox) field

Example boolean/checkbox field

Example markup in HTML template file

<div class="info-pair">
  <div class="header">
    <div class="label csc-collection-object-objectFilter-label"/></div>
  </div>
  <div class="content">
    <input class="input-select csc-collection-object-objectFilter" type="checkbox"/>
  </div>
</div>

Example entry in Configuration file

<field id="objectFilter" datatype="boolean" section="sdmom">
  <default>false</default>
</field>
  • No labels