Function Editor

Introduction

In Wized all dynamic fields are powered by functions. A dynamic field is any field that can change based on user input or other factors. For example, the following fields are dynamic:

The text of an element that is populated from an API response.
The visibility of an element that is based on a user's input.
The body of a request that is populated from the user's selections.

What's a Function?

A function is a piece of code that takes some input and returns some output. For example, the following function takes a number parameter as input and returns the number multiplied by 2:

(number) => {
  return number * 2;
};

In the case of Wized all dynamic fields are powered by a function that takes predefined parameters and expects an output. For example, the following function is used to dynamically populate the user's name in a text element:

(c, f, i, n, r, v, e, t) => {
  return r.load_user.data.name;
};

The Function Field

Function fields look like this in the configuration panels:

When clicking on a function field box, the Function Editor panel will open providing you a full code editor experience:

Autocompletion

The Function Editor provides autocompletion for all parameters. This means that when you start typing a parameter, a list of available values will be shown. For example, when typing v. a list with all available variables will be shown:

If you want to manually open the autocompletion list, you can press Ctrl + Space on your keyboard.

Keyboard Shortcuts

The Function Editor uses VS Code's editor under the hood, which provides a lot of useful keyboard shortcuts. Here are some of the most useful ones:

Shortcut	Description
`Ctrl` + `X`	Cut line (empty selection)
`Ctrl` + `C`	Copy line (empty selection)
`Alt` + `↑ / ↓`	Move line up/down
`Shift` + `Alt` + `↓ / ↑`	Copy line up/down
`Ctrl` + `Shift` + `K`	Delete line
`Ctrl` + `Enter`	Insert line below
`Ctrl` + `Shift` + `Enter`	Insert line above
`Ctrl` + `Shift` + `\`	Jump to matching bracket
`Ctrl` + `] / [`	Indent/outdent line
`Home / End`	Go to beginning/end of line
`Ctrl` + `Home`	Go to beginning of file
`Ctrl` + `End`	Go to end of file
`Ctrl` + `↑ / ↓`	Scroll line up/down
`Alt` + `PgUp / PgDn`	Scroll page up/down
`Ctrl` + `G`	Go to Line...
`Ctrl` + `F`	Find
`Ctrl` + `H`	Replace
`Ctrl` + `D`	Add selection to next find
`Alt` + `Click`	Insert additional cursor
`Ctrl` + `U`	Undo last cursor operation
`F2`	Rename variable

Function Editor ​

Introduction ​

What's a Function? ​

The Function Field ​

Autocompletion ​