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.
| Table of Contents | ||||
|---|---|---|---|---|
|
| Tip | ||
|---|---|---|
| ||
You will substitute actual procedure and field names within the |
Single line text field
Example single line text field
Example markup in HTML template file
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
| Code Block |
|---|
<field id="{fieldid}"></field>
|
Multi-line text field
Example multi-line text field
Example markup in HTML template file
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
| Code Block |
|---|
<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
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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)
| Wiki Markup |
|---|
{multi-excerpt:name=term-list-code-configstyle}
{code}
<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>
{code}
{multi-excerpt} |
Example entry in Configuration file: Term list (configured via UI)
| Wiki Markup |
|---|
{multi-excerpt:name=term-list-code-dbstyle}
{code}
<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>
{code}
{multi-excerpt} |
Date Picker field
Example date picker field
Example markup in HTML template file
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
| Code Block |
|---|
<field id="{fieldid}" ui-type="date"></field>
|
Number Pattern Chooser field
Example number pattern chooser field
Example markup in HTML template file
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
| Code Block |
|---|
<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
| Code Block | ||||
|---|---|---|---|---|
| ||||
<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
| Code Block |
|---|
<field id="objectFilter" datatype="boolean" section="sdmom"> <default>false</default> </field> |