std:ui:choose

This template renders a simple list of option for the user to choose from. Each option is rendered as a large type link with optional smaller explanatory text below. Each choice has a large click target.

Use this when you want a user to choose from two or more options, and clicking through does not perform any actions. For choices where an action is taken, the std:ui:confirm template may be more appropriate as the actions use POST requests.

Obtain a Template object with P.template("std:ui:choose"), or use the template:std:ui:choose() template function.

View

key options

An array of options, each of which is rendered as a form button. It has keys:

action The URL for the href attribute of the link.
label The main text for this choice.
notes (Optional) A longer line of explanatory text for this option.
highlight (Optional) If true, the choice is highlighted.
indicator (Optional) What kind of indicator to display next to the item (see below).

Indicators

The "indicator" key may have one of these values:

"standard" Simple indicator with no particular meaning.
"primary" Primary or expected action
"secondary" Secondary action
"terminal" Action which terminates a process
"forward" Forward arrow
"back" Back arrow
"primary-forward" Primary with forward arrow
"secondary-forward" Secondary with forward arrow
"primary-back" Primary with back arrow
"secondary-back" Secondary with back arrow

Example

    P.respond("GET", "/do/example/choose", [
    ], function(E) {
        E.render({
            pageTitle: "What kind of fruit do you prefer?",
            options: [
                {
                    action: "/do/example/choose?fruit=apples",
                    label: "Apples",
                    indicator: "primary"
                    notes: "All our apples are locally grown."
                },
                {
                    action: "/do/example/choose?fruit=oranges",
                    label: "Oranges",
                    indicator: "secondary"
                }
            ]
        }, "std:ui:choose");
    });