Attributes Step: Visual Cheat Sheet

presentation

slug: reference-attributes-step-visual-cheat-sheet

Attributes Step: Visual Cheat Sheet

Type	Example DSL	Rendered Output
number	income: { type: number, label: Income, options: {format: dollar, decimal: 0} }	$45,000
date	dob: { type: date, label: Birth Date, options: {format: "m/d/Y"} }	12/25/1990
time	login: { type: time, label: Login Time, options: {format: "H:i:s"} }	14:35:02
progress	completion: { type: progress, options: {min:0,max:100} }	▓▓▓▓▓▓░░░ 45%
trafficlight	status: { type: trafficlight, options: {min:0,max:100,threshold1:0.33,threshold2:0.66,color1:red,color2:yellow,color3:green} }	🟥 / 🟨 / 🟩 depending on value
checkbox	subscribed: { type: checkbox }	☑ or ☐
rating	stars: { type: rating, options: {max:5, icon: star, color: gold} }	★★★☆☆
email	email: { type: email }	<a href="mailto:bob@example.com">bob@example.com</a>
phone	phone: { type: phone }	<a href="tel:+15551234567">+1 555 123 4567</a>
url	website: { type: url }	<a href="https://example.com">example.com</a>
markdown	notes: { type: markdown }	Rich text with bold, italic, lists
editorJSblocks	doc: { type: editorJSblocks }	Rendered HTML from Editor.js blocks
checklist (planned)	tasks: { type: checklist }	Array of on/off items (currently raw value)
members (planned)	team: { type: members }	List of people (currently raw value)
reference (planned)	project: { type: reference }	Lookup value from FK (currently raw value)
vote (planned)	vote: { type: vote }	👍👎 (currently raw value)
formula (planned)	calc: { type: formula }	Evaluated formula (currently raw value)
radio (planned)	option: { type: radio }	Radio button (currently raw value)
dataset (planned)	json_data: { type: dataset }	Table from JSON dataset (currently raw value)
default	notes: { }	Raw text value

---

Mini Example: Full Table DSL

- attributes:
    fields:
      user: { label: Name }
      income: { type: number, label: Income, options: {format: dollar, decimal: 0} }
      completion: { type: progress, options: {min:0,max:100} }
      status: { type: trafficlight, options: {min:0,max:100,threshold1:0.33,threshold2:0.66,color1:red,color2:yellow,color3:green} }
      subscribed: { type: checkbox }
      email: { type: email }
      website: { type: url }

This will render a table like:

Name	Income	Completion	Status	Subscribed	Email	Website
Bob	$45,000	▓▓▓▓▓▓░░░ 45%	🟨	☑	bob@example.com	example.com
Sam	$52,000	▓▓▓▓▓░░░░ 40%	🟥	☐	sam@example.com	sam.com