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. Quick Overview
  3. Quick Start
  4. Tutorial
    1. Simple blog
    2. Seattle
  5. Concepts
    1. Query browser
    2. Datomic stage
    3. Views
    4. Links
    5. Transactions
    6. Context
  6. Guides
    1. Transactions
    2. Dependent queries
    3. Iframes
    4. Select options
    5. hyperfiddle.ui
    6. Markdown
    7. Migrations
  7. Reference
    1. Data model
    2. Link editor
    3. hyperfiddle.ui
    4. hypercrud.browser.context
    5. clojure.spec integration
  8. Triage
    1. hyperfiddle.jar
    2. I/O Runtime