Tutorial: Select options

Warning, this is from 2018 Q2 and everything is different now

Task

  1. Add a field for gender
  2. Give it a pick list
  3. Set the valid choices
  4. Select your gender
Model select options
Explanation
  • :link/rel is semantic like HTML, and is meant to be a semantic hint to the view renderer. In this case :link/rel :options tells the default controls to render a HTML :select.
  • :link/path in HTML parlance is the link's position in the document tree. (We're about to replace this with something more semantic)
Breakdown
  • Make a new attribute: :reg/gender :ref :one
  • Add it to your form's pull
  • Make a new :fiddle/link, :link/rel :genders
  • Point it at a new fiddle :reg/genders for the pick list query
  • Position the link with :link/path :body 0 :reg/gender
  • Set :link/render-inline? true
  • alt-middle-click the embedded fiddle to inspect its source
  • Change the query to:
    • :where [?e :db/ident ?v] [(namespace ?v) ?ns] [(ground "gender") ?ns]
  • Add a column to the table – :db/ident (change the query again)
    • :find (pull [:db/id :db/ident])
  • Use the table to model the choices: :db/ident :gender/male and :gender/female
  • Change the :link/rel from :genders to :options
  • Use the picker to select your gender

Homework

  1. Model :reg/shirt-sizeas a picklist with these values:
    • :shirt-size/mens-large :shirt-size/mens-medium :shirt-size/mens-small
    • :shirt-size/womans-large :shirt-size/womens-medium :shirt-size/womans-small
picklist homework answers
Breakdown
  1. Add schema attribute :reg/shirt-size :ref :one and use it on your form
  2. Give your form a new link: :rel :shirt-sizes
    • :link/path :body 0 :reg/shirt-size, :link/render-inline? true
  3. Set the query :where (copy and modify the gender options query),
  4. Add column :db/ident and insert the shirt-size choices
  5. Turn :shirt-size field into a picklist with :rel :options (:rel is not unique, it is just a semantic hint)
  1. Getting Started
  2. Overview
  3. Tutorial
    1. Simple blog
    2. Seattle
  4. Concepts
    1. Design
    2. Technology Vision
    3. I/O Runtime
    4. Transactions
    5. Foreign integrations
    6. ctx
  5. Guides
    1. hyperfiddle.ui
    2. Select options
  6. Triage
    1. Architecture braindump
    2. Technical braindumps
    3. hyperfiddle.jar