Support and Documentation

Populating the preview with mock data

Mocking data is an important tool in theme development. Mock data provides your development environment with simulated real-life data (such as names, dates, text, and images) so you can evaluate your templates' layout and styling.

Data files come with helpers that generate random mock data, saving you the time of creating your own or connecting to a back end to inject data into the template. The randomization also tests your templates' robustness, allowing for evaluations with longer and shorter text strings and larger or smaller images.

. See also:
Value helpers

Value helpers provide mock data in the theme preview. For example, suppose you have a template with the following markup:

{{#with "reporter"}}
    <div class="reporter">
        <p>{{this}}</p>
    </div>
{{/with}}

You can use a value helper in the data file to generate a random name.

{
  "_template": "path/to/template.hbs",
  "reporter": "{{name}}
}

At runtime, Brightspot evaluates the helper and generates the following HTML:

<div class="Article-reporter">
    <p>Alfalfa Mail</p>
</div>

The following sections describe the available value helpers.

. See also:
date

Generates a random date.

Syntax

Form

Result

{{date}}

Returns date as July 4, 1776

{{date('unformatted')}}

Returns date as Tue Jul 04 1776 07:31:28 GMT-0400 (EDT).

{{date('short')}}

Returns date as 7/4/1776.

{{date('iso')}}

Returns date as 1776-7-4.

Example

{
   "dateBorn": "{{date('iso')}}"
}
hexColor

Generates a random hex color.

Syntax

Form

Result

{{hexColor}}

Returns a random RGB color in lower-case hexadecimal, such as #0c4d6a.

{{hexColor(luminosity)}}

Returns the lower-case hexadecimal color corresponding to the provided luminosity (0 ≤ luminosity ≤ 100).

Example

{
  "textColor": "{{hexColor(45)}}"
}
html

Renders value as HTML rather than a string literal.

Syntax

Form

Result

{{html(text)}}

Returns text formatted by HTML tags, such as <strong>.

Example

{
  "response" : "{{html('<strong>Yay!</strong> That action was a complete success.')}}"
}
image

Returns the URL for use in an HTML <img src="url"> tag.

Syntax

Form

Result

{{image(width,height)}}

Returns the path to a mock image with the passed width and height. Brightspot stores the mock image in <project-root>/_build/placeholder-image/.

Example

{
  "headShot": "{{image(100, 500)}}"
}

You implement this value helper in the template as follows:

<img src="{{headShot}}" >
. See also:
name

Generates a random name.

Syntax

Form

Result

{{name}}

Returns a mock first and last name.

Example

{
  "authorName": "{{name}}"
}
number

Generates a random number.

Syntax

Form

Result

{{number(value)}}

Returns the passed value.

{{number[lower,upper]}}

Returns a random number between lower and upper.

All arguments and returned values are integers.

Example

{
  "age": "{{number([1,100])}}"
}
paragraphs

Generates mock paragraphs.

Syntax

Form

Result

{{paragraphs(paragraphCount, sentenceCount, wordCount)}}

Returns the passed number of paragraphs, each containing the passed number of sentences. Each sentence contains the passed number of words. Some words may be a two-word name.

Example

The following snippet generates three HTML <p> tags with four sentences in each. Each sentence has five random words.

{
  "articleBody": "{{paragraphs(3,4,5)}}"
}

Because this helper provides the <p> tags, you don't need to include them in the template.

sentences

Generates mock sentences.

Syntax

Form

Result

{{sentences(sentenceCount, wordCount)}}

Returns the passed number of sentences, each containing the passed number of words. Some words may be a two-word name.

Example

The following snippet generates three sentences with seven words each.

{
  "byLine": "{{sentences(3,7)}}"
}
var

Returns the value of a variable defined in the vars object in your theme's _config.json file.

Syntax

Form

Result

{{var('keyname')}}

Returns the value for the passed keyname. If the passed key does not exist in _config.json, returns blank.

This value helper is available for use within a data file only; you cannot use it in a template.

Example

Suppose you have a file _config.json with the following vars object:

{
  "vars": {
    "color": "blue"
  }
}

You can retrieve the color using var.

{
    "headline": "The sky is {{var('color')}} today."
}
words

Generates mock words. Some words may be a two-word name.

Syntax

Form

Result

{{words(wordCount)}}

Returns the passed number of words.

{{words([lower,upper])}}

Returns a random number of words between lower (≥ 4) and upper (≤ 13).

Example

The following snippet generates 10 words.

{
  "headline": "{{words(10)}}"
}