Prompts

Overview

To prompt for an input, surround the prompt with tildes ~~~What is your name?~~~. This will prompt the user with What is your name? and replace the prompt with what they enter. Prompts can be in your speedrun block and in a template.

Example

This:

#copy.raw.noPrompts
```
#copy
Hello ~~~What is your name?~~~
```

Produces this, which will prompt you for your name, then copy your name to the clipboard:

#copy
Hello ~~~What is your name?~~~

Assigning a prompt to a variable

You can optionally assign a prompt to a variable. To do this, prefix the prompt name with variableName=. For example ~~~name=What is your name?~~~, will replace the prompt with what you enter and set the variable name to it. It does some hoisting on the variable so it can be used before (or after) it is defined.

Example

This:

#copy.raw.noPrompts
```
#copy
If I wanted to get your attention I'd say ${name.toUpperCase()}!!!!
Otherwise I'd simply call you ~~~name=What is your name?~~~
```

Produces this, which will prompt you for your name, assign it to a variable and make it uppercase:

#copy
If I wanted to get your attention I'd say ${name.toUpperCase()}!!!!
Otherwise I'd simply call you ~~~name=What is your name?~~~

Prompt Options

To change the prompt type, set default values, transforms and other options enter json after the prompt name. ~~~What is your name? {"default":"${user}"}~~~

type

Changes the type of input. It can be set to checkbox, textarea, password, select or text.

default	valid values
"text"	"checkbox" | "textarea" | "text" | "password" | "select"

Setting the type to password makes it so the value is not persisted in local storage.

Note

select requires you also set the options parameter below

label

Put a label below the input to describe it. Supports some html tags for rich formatting including a,b,i,u and st.

default	valid values
undefined	Any string i.e. "Enter a valid <a href='https://docs.aws.amazon.com/accounts/latest/reference/welcome-first-time-user.html'>AWS Account</a> number"

options

Set the valid options in the select. type must be set to select. Options supports both maps and arrays of options.

default	valid values
undefined	["option1","option2",...] | {"option1":"value1","option2":"value2"}

Note

template literal ${} content is allowed in both options and values. It can even reference an array or map in your configuration.

placeholder

Set the placeholder text for an input of type text or textarea

default	valid values
undefined	Any string i.e. Your account number

suppress

If set to true, it will replace the prompt with an empty string instead of the value the user entered. If it is on a line of its own, it will omit the line from the output.

default	valid values
false	true | false

transform

Apply JavaScript code to input before replacing or assigning text content. The value entered by the user is referenced as value.

default	valid values
undefined	i.e. "value.toUpperCase()" or "stripNewLines(value)"

Note

The value of is treated as a template literal, no need to wrap it with ${}. The output of a transform is always a String, to change the type use cast below.

cast

The return value of a prompt is always a String, if you are assigning it to a variable, it is possible to cast it to another type that is easier to work with. Transforms are applied before casts.

default	valid values
undefined	"json" | "Number" | "Boolean" | "dayjs" | "dayjs.utc"

cast	implementation
json	parseJSON(value)
Number	Number(value)
Boolean	String(value).toLowerCase() == "true"
dayjs	dayjs(isNumeric(value) ? _.toNumber(value)*1000 : value)
dayjs.utc	dayjs.utc(isNumeric(value) ? _.toNumber(value)*1000 : value)

Input Validation

You can prevent user from submitting until all inputs are valid. Invalid inputs are outlined in red. The following validations are supported: required, pattern, minlength, maxlength. Add the key to your prompt options to use, i.e. ~~~Required Text {required:true}~~~

key	purpose	valid values
required	Require input for this prompt	true|false
pattern	Require input matches a regex	regex as a string i.e. "\\w{4}"
minlength	Require input has min length	A number i.e. 4
maxlength	Require input has a max length	A number i.e. 10

Setting Title of Prompts

By default the title of the modal for prompting the user is Input, if you'd like to change the title, set the variable inputTitle somewhere in your srConfig hierarchy. For example, this will change the prompt to Enter your name

```
#copy {inputTitle: 'Enter your name'}
My name is: ~~~Name~~~
```

Results in:

#copy {inputTitle: 'Enter your name'}
My name is: ~~~Name~~~