Fields, lists and tabs

rpgdesk.js connects the page’s data-… attributes by itself, including on elements that show up later (the items of a list, for example). A whole sheet can be made without JavaScript. The complete table is in HTML attributes.

The sheet below uses almost everything on this page: the portrait, the fields, the computed modifiers, the tabs, the inventory list and the GM tab. Switch the Role on the band in the corner to see what each person sees.

Generic D20Download the .htmlOpen in a new tab ↗

Test mode: the data stays in this browser only. The band in the corner switches the role (GM, sheet owner, another player) and shows the log of rolls.

The document and paths

Each sheet has a document: its fields and their values, kept in the room. Each field has a path:

• name, level, strength: standalone fields;
• attributes.strength, hp.current, hp.max: fields inside a group, separated by periods.

The naming rules:

• unaccented letters, numbers and _, starting with a letter or _;
• case does not matter: Strength and strength are the same field;
• up to 64 characters per name and 12 levels of groups;
• names that start with _rpgdesk belong to RPG Desk.

The verifier flags a wrong name before installing. See The verifier.

Fields: data-field

It goes on an <input>, <textarea> or <select>:

<label>Name <input data-field="name"></label>
<label>Level <input type="number" data-field="level" min="1"></label>
<label><input type="checkbox" data-field="inspired"> Inspired</label>
<label>Alignment
  <select data-field="alignment">
    <option>Lawful</option>
    <option>Neutral</option>
    <option>Chaotic</option>
  </select>
</label>
<label><input type="radio" name="size" value="small" data-field="size"> Small</label>
<label><input type="radio" name="size" value="medium" data-field="size"> Medium</label>
<textarea data-field="background" placeholder="Background"></textarea>

Field	What it saves
text, <textarea>	the text
type="number", type="range"	a number (empty deletes the field)
type="checkbox"	true or false
type="radio"	the checked one’s value (all with the same data-field)
<select>	the chosen option’s value
type="date", type="time", type="color"	the value, as text

• Text and numbers save as the person types; choices save right away.
• What someone else writes shows up right away. If you are typing in the same field, their change shows up when you leave the field.
• Whoever cannot write sees the field locked (the rd-readonly class goes on the field). data-readonly locks the field for everyone: good for showing a computed value in a field.

Texts: data-text

Shows a field’s value as text, in any element. It is the way to show a computed value:

<p>Modifier: <b data-text="str_mod"></b></p>

The value of str_mod comes from JavaScript, with doc.compute: see Computed fields.

Images: data-image

On an <img>, shows the image kept in the field. Clicking it opens RPG Desk’s image picker (from the computer or from the room’s images) for whoever can write:

<img class="portrait" data-image="portrait" alt="Character portrait">

Without an image, a silhouette shows up; a src of your own on the <img> replaces the silhouette. The field keeps the file’s identifier, not the image.

Lists: data-list

Inventory, spells, attacks: a list where each item has its own fields. The <template> inside it is the mold for each item:

<ul data-list="inventory">
  <template>
    <li class="rd-row">
      <input class="rd-grow" data-field="name" placeholder="Item">
      <input type="number" data-field="qty" min="0">
      <button data-roll="1d6 + {qty}" data-label="{name}">Roll</button>
      <button data-list-remove>×</button>
    </li>
  </template>
</ul>
<button data-list-add="inventory">+ Item</button>

• Inside the <template>, paths belong to the item: name is the item’s name, and {qty}, its quantity.
• data-list-add="inventory" adds an empty item at the end.
• data-list-remove, inside the <template>, removes that item.
• A list can have another list inside each item.

To add pre-filled items, reorder or count the items, use JavaScript: see Lists.

Tabs: data-tabs

A sheet is a single page. To split it into parts, use tabs:

<nav data-tabs="sheet">
  <button data-tab="main">Main</button>
  <button data-tab="spells">Spells</button>
</nav>
<section data-tab-panel="main">…</section>
<section data-tab-panel="spells">…</section>

• Only the chosen tab’s section shows up. The first tab starts open.
• The name in data-tabs ("sheet") separates one group of tabs from another, if the page has more than one.
• The chosen tab is remembered while the sheet is open, even if it moves to another space.

Who sees it: data-role

Value	Who sees the element
data-role="gm"	game masters only
data-role="owner"	the sheet’s owner and the game masters
data-role="player"	players only

data-role is just looks

data-role only hides the element on the screen: the data still reaches everyone. For a real secret (what players must not even receive), use private parts.

Elements created by JavaScript

rpgdesk.js connects by itself the elements that enter the page. If you build a piece of the page with innerHTML and it did not connect, call RPGDesk.bind(element).