Dialob Client Style Guide

This describes DOM structure and CSS classes used in default implmenetation of Dialob client. General structure of the application is following:

Dialog
- Page
  - Group
  - Item
  - Item
  - Group
  - Item
  - Item
- Navigation controls

Dialog structure

Main questionnaire structure.

<div class="dialob-questionnaire">
  <span class="dialob-questionnaire-title">Dialog title</span>
  <div class="dialob-page">
    <span class="dialob-page-title">Page title</span>
    <!-- Groups here... -->
  </div>
</div>

Group structure

Group structure. dialob-description block is optional and present only if description is defined.

Outer div has dialob-group style class and any custom style classes defined in Composer.

<div class="dialob-group ">
  <span class="dialob-group-title">Group title</span>
  <div class="dialob-description">
    <div>
      <p>This is group description,</p>
      <p>It is <strong>rich</strong><em>text...</em></p>
    </div>
  </div>
  <!-- Items here  -->
</div>

Survey group

Survey group is a special group for displaying survey-type lists of questions with multiple options. Options are shared by survey questions and are defined on group level.

Survey groups can be rendered horizontal, with questions arranged as rows (default) or vertical, with questions arranged as columns.

Horizontal:

Vertical:

Compared to simple group, survey group has dialob-survey and survey style classes present on its outer div. Questions are arranged inside dialob-survey-continer div which has either dialob-survey-horizontal or dialob-survey-vertical style classes depending on the configuration. The DOM structure is the same for both cases inside the survey container. Option labels are contained within dialob-survey-header container div and have dialob-survey-header-label class. Questions are contained within dialob-survey-question div, having labels in dialob-survey-question-label and option inputs in dialob-survey-option_div_s.

<div class="dialob-group dialob-survey survey">
  <span class="dialob-group-title">Survey Group</span>
  <div class="dialob-survey-container dialob-survey-horizontal">
    <div class="dialob-survey-header">
      <div class="dialob-survey-header-spacer"></div>
      <div class="dialob-survey-header-label">First option</div>
    </div>
    <div class="dialob-survey-question">
      <div class="dialob-survey-question-label">
        <label for="question7" class="">First survey question</label>
      </div>
      <div class="dialob-survey-option">
        <input type="radio" name="question7" value="a">
      </div>
    </div>
  </div>
</div>

Multi-row group

Multi-row group can have zero or more rows of questions with possibility to add and remove rows.

Outer div has all usual group style classes present plus dialob-rowgroup. For every row, it has additional div with dialob-rowgroup-row class. Inside of row blocks, items have the same DOM structure as usual. At the end of row block there is a button with dialob-rowgroup-remove and dialob-icon-remove classes for removing this row from group. At the end of the row group, there is a button with dialob-rowgroup-add dialob-icon-add style classes for adding a new row to row group.

<div class="dialob-group dialob-rowgroup ">
  <span class="dialob-group-title">Multi row group</span>
  <div class="dialob-rowgroup-row">
    <!-- Column items -->
    <button class="dialob-rowgroup-remove dialob-icon-remove"></button>
  </div>
  <div class="dialob-rowgroup-row">
    <!-- Column items -->
    <button class="dialob-rowgroup-remove dialob-icon-remove"></button>
  </div>
  <button class="dialob-rowgroup-add dialob-icon-add"></button>
</div>

General item structure

Item structure is dependent on the item type. This is general structure that is followed by most of the items.

Possible class names for item's outer div:

dialob-item always present
dialob-itemtype-<type> One of item type specific classes, possible values:
- dialob-itemtype-text For text and choice items
- dialob-itemtype-number For number items
- dialob-itemtype-decimal For decimal items
- dialob-itemtype-date For date items
- dialob-itemtype-time For time items
- dialob-itemtype-boolean For boolean items
- dialob-itemtype-array For multi-choice items
- dialob-itemtype-note For note items
dialob-item-errors Item has validation errors, or is required, but not asnwered
dialob-item-valid Item is answered, and valid
dialob-item-answered Item is answered
Any custom style classes defined in Composer

dialob-description block is optional and present only if description is defined.

Input control has generated unique id and name js matching item ID. <label> is linked for the input control.

In case of unanswered mandatory items, <label> has dialob-icon-required style class present.

In case any validation errors, dialob-errors block is present with one or more error messages with dialob-error and dialob-icon-error style classes.

Normal case

<div class="dialob-item dialob-itemtype-text">
  <label for="dialob-control-question1" class="">Question title</label>
  <div class="dialob-description">
    <div>
      <p>This is question description</p>
      <p>Also<strong>rich</strong><em>text.</em></p>
    </div>
  </div>
  <input type="text" id="dialob-control-question1" name="question1">
</div>

Required case

<div class="dialob-item dialob-itemtype-text  dialob-item-errors">
  <label for="dialob-control-question2" class="dialob-icon-required">Mandatory question</label>
  <input type="text" id="dialob-control-question2" name="question2">
</div>

Validation errors

<div class="dialob-item dialob-itemtype-text  dialob-item-errors">
  <label for="dialob-control-question3" class="">Question with validation errors</label>
  <input type="text" id="dialob-control-question3" name="question3">
  <div class="dialob-errors">
    <span class="dialob-error dialob-icon-error">A validation message</span>
    <span class="dialob-error dialob-icon-error">Another validation message</span>
  </div>
</div>

Specific item types

Simple entry items

Simple entry items are using corresponding HTML entry elements as input controls:

text
- <input type="text" />
textbox
- <textarea></textarea>
decimal
- <input type="number" />
number
- <input type="number" />
time
- <input type="time" />
date
- <input type="date" />

Boolean

As Normal checkbox doesn't make distinction between not set and false states, a custom component is used with a structure as shown.

Yes / No elements will have dialob-tristate-active style class present, if selected.

<div class="dialob-item dialob-itemtype-boolean ">
  <label for="dialob-control-question14" class="">Boolean</label>
  <div id="dialob-control-question14">
    <div class="dialob-tristate-control" tabindex="0">
      <span class="dialob-tristate-true">Yes</span>
      <span class="dialob-tristate-false">No</span><
    /div>
  </div>
</div>

Choice

For choice type, HTML select / option dropdown control is used.

<div class="dialob-item dialob-itemtype-text ">
  <label for="dialob-control-question15" class="">Choice</label>
  <select id="dialob-control-question15" name="question15">
    <option value="a">First option</option>
    <option value="b">Second option</option>
  </select>
</div>

Multi-choice

For multi-choice items, a list of checkboxes is used with a DOM structure as shown. <input>'s will have also dialob-checkbox-checked style class added if the choice is checked.

<div class="dialob-item dialob-itemtype-array ">
  <label for="question151" class="">Multi-choice</label>
  <span class="dialob-multichoice-option">
    <input type="checkbox" id="question151[a]" class="dialob-checkbox" value="false">
    <label for="question151[a]">First option</label>
  </span>
  <span class="dialob-multichoice-option">
    <input type="checkbox" id="question151[b]" class="dialob-checkbox" value="false">
    <label for="question151[b]">Second option</label>
  </span>
</div>

Note

Note is rendered as a rich-text block from markdown source. No user interaction.

<div class="dialob-item dialob-itemtype-note ">
  <div>
    <p>This Is Note</p>
    </p>
  </div>
</div>

Style Guide