Overview

In this chapter we will explore four patterns for making data selection easier:

Large Hierarchical Selection

Intent

To choose from a large set of finite possible concepts.

Motivation

When categorizing resources the number of categorizes is often too large for a flat list and requires the ability to browse through possible concepts.

Applicability

Use for object relationships that have a large set of finite possible objects.

Implementation

Create a single top concept with skos:narrower and skos:related of the hierarchical concepts that are valid objects for this relationship. The user will be able to navigate among the concepts using broader and narrower relationships. When the user navigates to the concept they want they can click the select button.

Sample Code

<div id="medium" dropzone="link string:text/uri-list" class="control-group"
    ondrop="return calli.insertResource(event)">
 <label class="control-label">Medium <a href="/scheme/medimus/top" title="Browse Mediums"
     onclick="return calli.selectResource(event)" class="ui-icon ui-icon-folder-open" /></label>
  <div rel="dcterms:medium" class="controls">
   <span resource="?medium" typeof="skos:Concept" class="ui-state-highlight ui-corner-all">
     <span property="skos:prefLabel" />
     <a href="{?medium}" title="Remove relationship" onclick="return calli.removeResource(event)" class="ui-icon ui-icon-close" />
   </span>
 </div>
</div>

Limited Selection

Intent

To provide the user with a small set of possible relations to choose from.

Motivation

Some relationships are limited to small set of target objects, that are curated separately. For this it is important to provide the user with a list of possible selections inline.

Applicability

Use when the number of possible target objects in a relationship is limited and can be shown to the user all together.

Implementation

Create a folder containing the concepts that should be presented to the user. Use the calli:hasComponent relationship from the folder to the concepts to build to list.

Within an edit template page, add one of the following markup patterns.

Sample Code

Horizontal radio buttons are best used when the relationship is functional (only one object) and the concepts can be listed in a single line.

<div xmlns:dcterms="http://purl.org/dc/terms/" class="control-group">
  <label for="medium" class="control-label">Medium</label>
  <div id="medium" class="controls">
    <label class="inline radio" rel="dcterms:medium" resource="?concept">
      <input type="radio" name="medium" checked="checked" />
      <span rev="calli:hasComponent" resource="/scheme/mediums/" property="skos:prefLabel" />
    </label>
  </div>
</div>

Horizontal checkboxes are best used when the relationship is non-functional (can have multiple objects) and the concepts can be listed in a single line.

<div xmlns:dcterms="http://purl.org/dc/terms/" class="control-group">
  <label for="medium" class="control-label">Medium</label>
  <div id="medium" class="controls">
    <label class="inline checkbox" rel="dcterms:medium" resource="?concept">
      <input type="checkbox" name="medium" checked="checked" />
      <span rev="calli:hasComponent" resource="/scheme/mediums/" property="skos:prefLabel" />
    </label>
  </div>
</div>

Vertical checkboxes is best used when the relationship is non-functional (can have multiple objects) and all concepts should visible to the user at once.

<div xmlns:dcterms="http://purl.org/dc/terms/" class="control-group">
  <label for="medium" class="control-label">Medium</label>
  <div id="medium" class="controls">
    <label class="checkbox" rel="dcterms:medium" resource="?concept">
      <input type="checkbox" name="medium" checked="checked" />
      <span rev="calli:hasComponent" resource="/scheme/mediums/" property="skos:prefLabel" />
    </label>
  </div>
</div>

Range Relationships

Intent

Allow the user to lookup or create resources by type.

Motivation

Many relationships between resources are open ended, requiring only particular resource types. The user may link to a large possible set of objects or create a new one.

Applicability

Use for object relationships that have a open ended set of possible objects.

Implementation

Use the function calli.createResource(event) and point to a class with a create template that the user can use to create an object resource. The attribute typeof restricts the inline lookup to resources of that type.

Sample Code

<div id="knows" dropzone="link string:text/uri-list" class="control-group"
    ondrop="return calli.insertResource(event)">
  <label class="control-label">Knows <a href="/schema/Person?create" title="Create"
      onclick="return calli.createResource(event)" class="ui-icon ui-icon-newwin" /></label>
  <div rel="foaf:knows" class="vbox controls">
    <span resource="?knows" typeof="foaf:Person" class="ui-state-highlight ui-corner-all">
      <span property="foaf:name" />
      <a href="{?knows}" title="Remove relationship" onclick="return calli.removeResource(event)" class="ui-icon ui-icon-close" />
    </span>
  </div>
</div>

Scroll Through Selection

Intent

To provide the user with a limited set of possible relations to choose from.

Motivation

Some relationships are limited to a set of target objects, that are curated separately. For this it is important to provide the user with a list of possible selections to choose from.

Applicability

Use when the number of possible target objects in a relationship is limited and small enough that the user can scroll quickly through all of them.

Implementation

Create a folder containing the enumerated concepts that should be presented to the user. Use the calli:hasComponent relationship from the folder to the concepts to link all possible relationships. The selected="selected" attribute in the option tag is required.

Within a edit template page, add one of the following markup patterns.

Sample Code

Drop down list is best used when the relationship is functional (only one object) and the list of concepts should be hidden by default.

<div xmlns:dcterms="http://purl.org/dc/terms/" class="control-group">
  <label for="medium" class="control-label">Medium</label>
  <div class="controls">
    <select id="medium" rel="dcterms:medium">
      <option selected="selected" about="?concept" rev="calli:hasComponent" resource="/scheme/mediums/" property="skos:prefLabel" />
    </select>
  </div>
</div>

Select box is best used when the relationship is non-functional (can have multiple objects) and the user should be able to scroll through the list of concepts.

<div xmlns:dcterms="http://purl.org/dc/terms/" class="control-group">
  <label for="medium" class="control-label">Medium</label>
  <div class="controls">
    <select id="medium" multiple="multiple" rel="dcterms:medium">
      <option selected="selected" about="?concept" rev="calli:hasComponent" resource="/scheme/mediums/" property="skos:prefLabel" />
    </select>
  </div>
</div>