# Save to State

With the Save to State action, you can save temporary values to the state. \
This is useful when, for example, you want to use the same value in multiple steps of your workflow.

To configure the action, first you need to create a variable to store the value you want to save or select one from the *Variable* dropdown if you've created it before. When creating a variable, make sure to select the proper variable type.\
Then, you need to pass the data you want to save in the *New value* field. The saved value will be  available as `{{state.<key>}}` in all actions and components.

<figure><img src="/files/TDG6E48Pm0TAPau0Zevq" alt=""><figcaption></figcaption></figure>

## Examples

### Saving the result of the previous step

```javascript
{{data}}
```

You can always adjust the data before saving it.

### Saving values with JS Code action

```javascript
state.varName = 'newValue';

// or using setValue method
state.setValue('varName', 'newValue');
```

### Reading state values

```javascript
const value = state.getValue('varName');
```

### Resetting variables

#### Reset a variable to the initial value

```javascript
state.resetValue('varName');
```

#### Reset all variables

```javascript
// reset all variables, page and app state
state.resetValues();

// reset all page variables
state.resetValues('page');

// reset all app (global) variables
state.resetValues('app');
```

### Adding additional values

```javascript
const values = {{ui.form.value}};

return {
  ...values,
  created_at: new Date(),
}
```

{% hint style="warning" %}
The `created_at` column must exist in the table schema, otherwise it won't be sent.
{% endhint %}

### Changing values

```javascript
const values = {{ui.form.value}};
return {
  ...values,
  name: values.name.toUpperCase(),
}
```

### Deleting unwanted values

```javascript
const values = {{ui.form.value}};
delete values.age;
return values;
```

alternatively:

```javascript
const values = {{ui.form.value}};
const { created_at, ...rest } = values;
return rest;
```

### Joining array values

```javascript
const values = {{ui.form.value}};
return {
  ...values,
  tags: values.tags.join(','),
}
```

### Using default values

```javascript
const values = {{ui.form.value}};
return {
  ...values,
  // if the value is not set, use the default value
  created_at: values.created_at || new Date(),
}
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.uibakery.io/reference/working-with-actions/save-to-state-action.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.