# Create Row

The Create Row step allows you to create a row in a table.

```javascript
{{ui.form.value}}
```

## Sending data as an object

By default, the expected format is an **object** that represents the row to be created. The object *keys* are the column names and the *values* are the values to be inserted.

```javascript
{
  name: "John",
  age: 30
}
```

This object will be sent to the server and converted to an `INSERT` statement, for example:

```sql
INSERT INTO users (name, age) VALUES ('John', 30)
```

{% hint style="info" %}
You can check the action's *Payload* tab to see the actual object sent to the server.
{% endhint %}

Unset fields will be presented as undefined and will not be used in the `INSERT` statement - the table defaults will be applied instead.

```javascript
{
  id: 23,
  created_at: "2022-10-21",
  // this value will not be sent to the server
  required_at: undefined,
}
```

You can always adjust the data before sending it.

### 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 will not be sent.
{% endhint %}

### Changing values

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

### Deleting unnecessary values

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

or:

```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(),
}
```

## Sending data field by field

You can also send the data field by field by clicking the **JS** button on the right of the *Configure Row* section. This way, you'll switch to the *UI mode* where you can specify each column separately.

```javascript
{{ui.input.value}}
```

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

* Specify default values:

```javascript
{{ui.input.value || new Date()}}
```

* Trim spaces:

```javascript
{{ui.input.value.trim()}}
```


---

# 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/create-row-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.