Auto data session 3 (do not merge)

[joelanman]

This version of automatically storing and showing data across pages does not rely on macros, but instead using the checked function directly (see examples below). I'm not sure it's as user-friendly as the version with macros, but it may take a while to finalise our approach to macros.

Usage

This will make the kit automatically store all data from forms, for use later in your prototype.

For example if you have an input like this:

<input name="firstName">

You can put this on the next page, or any other page:

<p>Hello {{firstName}}</p>

Population

To populate a text field with the value a user entered is simple:

<input name="firstName" value="{{firstName}}">

To set radios or checkboxes use this:

{{ checked(name, value) }}

Using the name and value of the input. For example:

<input type="radio" name="over18" value="Yes" {{checked("over18","Yes")}}>

<input type="checkbox" name="sendSpam" value="No" {{checked("sendSpam","No")}}>

[edwardhorsford]

Would it be better for this to live in its own file? eg prototype-kit-js.js or something? scripts.html doesn't feel right.

[htmlandbacon]

Did a test on this, and it is working 👍🏻

[edwardhorsford]

Would be good for this to include 'change' links.

Is it worth having a further page in the tutorial that shows how you can use the data to enable pre-checked answers - I'm not sure the capability would be obvious to users.

[edwardhorsford]

If you have more than one checkbox selected, they are output without a space between them.

[joelanman]

yeh its just the default representation of an array. We could add a filter like:

features: a,b,c
features | formatList: a, b and c

[edwardhorsford]

This addGlobal function seems rather spaced out compared to the rest of the stuff in this page - does it need so many linebreaks?

[joelanman]

I've removed some whitespace

[edwardhorsford]

Looking good! This PR (a long time coming) brings a load of benefits. Thanks for all your hard work on it.

A few comments:

• In your worked examples would be good to demonstrate / communicate that you can use it for preselecting answers. I know the pages have it, but i'm not sure it's obvious you can use the data like that (for a new user).
• I know it's mentioned in the first page, but it would be good if a later part of the tutorial mentions clearing data - potentially with a screenshot of the link
• Would be good to mention what to name your variable if you don't want data stored.

The last two could potentially be done on a further tutorial page?

[joelanman]

One issue I know of is this doesn't support populating select tags (though storing the data will work fine). Do we care about that? Our guidance is not to use them, though there may be some cases where it's unavoidable (legacy reasons for example)

[edwardhorsford]

@joelanman presumably it would be theoretically possible to support select tags? if so I think it would be ok to launch this pr but raise an issue to extend it to select tags.

[joelanman]

yeh it wouldn't be hard at all, similar to checked but returning "selected" or ""

[joelanman]

closing in favour of #340