DataSheets Language

The DataSheets Language Properties

The following is merely a list of conceptual language properties. This is used as a idea dump and an issue tracker. New properties can be added for discussion. Many of these will then form part of the specification.

The DSS syntax will follow CSS. The Selectors and properties will form the basis of the language.

 
#table1 { 
  data: url(movies.json); 
}

As with CSS, selectors are used to 'splash' the DOM with data. The DSS language provides the developer with control over the process.

In DSS, you control the iterators, rows, columns, concatenation, formatting and other aspects, to splash data as you need it.

Properties

The current row. The position/cursor of the iterator. 
The first row (1) by default or len(Data) if backwards

informs the browser to get HTML from the URI and inject it. OR the node found by the selector is repeated or not. 
By default some elements are defaulted to either fixed or repeated.
Default: <p>is fixed, <tr>is repeated, <span> is fixed, <li> is repeated

aria

You can specify the aria role.

div {
   aria: "menu";
}

bind-events

Proposed DOM events.

• onDataLoaded
• onDataError
• onDataRowBind
• onDataBindComplete

content

With content you can add text to the element

div {
 content: 'Hello World';
}

content-type

Specified the content-type for the value.

div {
 data: url('http://example.com/data/movies') 'movies movie';
 content-type: 'application/xml';
}

discussion

• [Jonathan] if we used content-type: 'text/html', can we now inject HTML?

data

A shorthand property. [url] [set]

div {
 data: url(movies.json) movies[0].title;
}

data-schema

A URL to the data schema.

• XSD
• RDF Schema
• JSON Schema

discussion

• [Jonathan] We should probably concentrate on one or two core technologies to support first

id

The data field, which serves as a lookup id to another datasource

filter

A filter looks at the row data and based on the value determines whether the style applies to it.

table tr td:nth-of-type(2){
  filter: empty;
  content: 'n/a';
}

format

The data can be formatted using this format property.

[type] | [none | lowercase | uppercase | capitalize]

Valid types (see type)

Values can be transformed using the following commands

• lowercase
• uppercase
• capitalize
• trim

format-joiner

Joins values by the specified joiner.

The following example joins LastName and FirstName.

div {
 set 'LastName, FirstName';
 format-joiner: ',';
}

The output:

Doe, John

The following joins three values ensuring a space between and ensures values do not have spaces around them.

div {
 set 'Title, FirstName, LastName';
 format-joiner: ' ';
 format: trim capitalize;
}

format-encoding

format-length

A number to reduce the length of data. Length in chars.

div {
 data: url('http://example.com/data/movies') 'movies movie';
 format-length:20;
}

format-prefix

You can prefix the value.

div {
  format-prefix: 'Dear ';
  set: 'FirstName';
}

format-suffix

You can suffix the value

div {
  format-suffix: '*';
  filter: 'Title=developer';
}

iterator

Controls the iteration of the data.

[‘iterator-step’ ‘iterator-direction’ ] | none

The default is [step 1 forwards]. Move cursor 1 step in a forward direction. You can alter this and render alternative rows. Specifying 'none', stops the iterator. Setting current row to 2, would slash row 2. You can control the start of the cursor with row;

The following starts at row 10, and moves the cursor forward in increments of 2 until the end.

table tr{
  row: 10;
  iterator: 2 forwards; 
}

iterator-step

This property controls the iterator/cursor. You can specify the step value of the iterator. The default is 1.

table tr{
  row: 1;
  iterator-step: 2;
}

iterator-direction

The iterator moves forwards by default, the iterator-direction value of forwards.

table tr{
  iterator-direction: forwards; 
}

Label

The property specifies a label for the data. A label is a metadata property that corresponds to the namespace provides. If no namespace is provided then the URL of the page itself is used for the namespace. This will ensure that the data is defined for the URL. When data is meant to conform to a global standard, the correct namespace should be used.

Lookup

max-rows

Specifies the maximum number of rows the iterator should move through.

The following example would start at row 11 and move to row 20.

table tr{
  row: 11;
  max-rows:10;
}

namespace

The namespace of the data. This property is useful for when consumed data does not declare metadata, namespaces or other identifying qualities. You can specify the data namespace to which the data conforms. Used in conjunction with the Label property, it can declare metadata for the values.

div span.creator {
  set: "author";
  namespace: url(http://domain.com/namespace);
  label: author;
}

set

Used to set the data to the element.

set: "movie.releasedate";

target

Sets the target of the value.

table tr {
  filter: 'Title=developer';
  target: class;
  set: '.developerClass';
}

template

The template is a shorthand property used to either describe the element's template type. It can also specify whether it uses the HTML found by the selector, or whether the HTML found by the selector is the parent of HTML found at the URL.

The following example, will change the tr which is by default a repeated element, into a fixed element. The iterator may not duplicate this row and repeat for each row.

table tr{
  template: fixed;
}

The following example shows a div that is usually a fixed template, changed to a repeated element.

div {
  template: repeated;
}

type

Specifies the value type. This can be exploited, especially if we create special formatters for types.

[string][number][currency][date][time][datetime]

row

Sets the position/cursor of the iterator. The first row (1) by default or len(Data) if backwards.

EXAMPLE

HTML
   <div id="movielist">
       <h2></h2>
       <span></span>
       <p></p>
   </div>
CSS
#movielist{
    border-bottom:1px solid #ccc;
}
h2{
    font-size:1.5em:
}
DSS
#movielist{
    data: url(/api/movies) result.data;
}
#movielist h2{
    set: "movie.title";
}
#movielist span
{
    set: "movie.releasedate";
}
#movielist p
{
    set: "movie.synopsis";
}