Dropdown

^[id: placeholder ]{ array_of_options }

Important

You must pass options into the dropdown as an array. To create an array, you can split a string on commas (csv) or new lines (lines). You can also map over an array of objects (map ). You can learn more in Fig's Scripting Language e.g.

• { "a,b,c" csv }

• { "a\nb\nc" lines }

• { [ ls ] sh lines}

  • Run the shell command ls

  • Parse the output by new lines

• { [ aws ec2 describe-regions ] sh json "Regions" prop [ "RegionName" prop ] map }

  • run shell command aws ec2 describe-regions

  • JSON.parse the output

  • get the "Regions" property of the object (which is an array of objects)

  • Map over the array and create new array of the "RegionName" prop of each object

Examples

• This is a big example. Look at the gif down the bottom

• Specifically note the functions that between the curly braces. You can learn more in Scripting Language

• Also note the "plans" object at the top (defined in data). This was used as a javascript element in the mustache braces at the bottom

```data
{
	"plans": {
		"hobby-dev": { "price" : 0},
		"hobby-basic": { "price" : 7},
		"standard-0": {"price": 50}

	}
	
}
```

<!-- NOTE: An array is a string that is split on commas using the csv function -->

Choose an animal
^[animal: Your chosen animal]{ "dog,cat,lizard" csv }
You chose **{{animal}}**  


Show IDs of all Docker Images
^[docker_image: abc_123 ]{ [ docker images -aq ] sh lines }
`docker run {{ docker_image }}`


Select AWS Region
aws ec2 describe-regions
^[aws_region: Region]{ [ aws ec2 describe-regions ] sh json "Regions" prop [ "RegionName" prop ] map }
You selected: **{{aws_region}}**


<!-- Loop through an array of JSON objects and get the name prop from each -->
Heroku App Name
^[app_name: dummy_name]{ [ heroku apps --json ] sh json [ "name" prop ] map }
{{ app_name }}


Add Postgresql to Heroku

^[plan: hobby-dev ]{ "hobby-dev,hobby-basic,standard-0" csv }

```
heroku addons:create heroku-postgresql:{{plan}}
```

**{{plan}}** costs **${{plans[plan].price}}**  per month.