# Curate a List of Items

Many controllers read a list of items and then manage their playout.

Examples include lists that are constantly updating such as chat messages or lists that are prepared such as a class list for a graduation.

A common need is to be able to parse a list, display it, and allow the user to pick items in the list and play them in.

This example reads random images from various artists and builds a list of them.

<figure><img src="https://2284285836-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FXkMvk0MrY3BcyplZ0pf7%2Fuploads%2FYRa5D2VffwrME3pDLiO5%2Fdownload-6.png?alt=media&#x26;token=d449c508-f56c-44a8-bc7d-5935fece03e9" alt=""><figcaption></figcaption></figure>

Take a look at the source code to see how it works.

Of particular interest:

#### Pre-Render <a href="#pre-render" id="pre-render"></a>

As each image is downloaded, a `scheduleAction` call is made to prepare that item so it will be ready to play whenever the user clicks the play button.

```javascript
scheduler.scheduleAction('render', inputName, '', {
  Name: jsonReply.author,
  Subtitle: jsonReply.url,
  Image: requestPicture.responseURL,
});
```

These renders will be cached in the project, so that they can be played in any order whenever they are needed.

#### Automatic Action <a href="#automatic-action" id="automatic-action"></a>

Each list item includes a “Play” button. Pressing this sends the “automatic” action to the `scheduler`. “automatic” is a natural choice for lists.

* If the title is not playing, “automatic” becomes “animateIn” and animates the Title in with the selected list item’s values.
* If the title is live with another list item, “automatic” becomes “update” and animates only the changes.
* If the title is live with the current list item, “automatic” becomes “animateOut” and animates the Title out.

```javascript
// When the user clicks play, use the automatic action
// which will animate in, animate out, or update,
// depending on Title play status and Variable values.
scheduler.scheduleAction('automatic', inputName, '', {
  Name: jsonReply.author,
  Subtitle: jsonReply.url,
  Image: requestPicture.responseURL,
});
```

This saves you from writing special state logic to track the status of the Titles and determine what action to take when the Play button is clicked.

#### Dynamic Input Definition <a href="#dynamic-input-definition" id="dynamic-input-definition"></a>

Although prior examples showed setting up variables in the XML configuration, they can also be set manually through the API using the `updateInputDefinition` command.

```javascript
// Redefine this input as having the three variables that we wish to use for this list.
scheduler.updateInputDefinition(ServiceHandler.inputName, {
  variables: {
    Name: { type: 'text', tags: 'name' },
    Subtitle: { type: 'text' },
    Image: { type: 'image' },
  },
});
```