# On click action

On every layout you can add `onClick` action. `onClick` property accepts array of actions each action can optionally define condition.

### Example

```javascript
{
  type: 'button',
  title: 'Click me',
  onClick: [
    { submit: true }
  ]
}
```

### Abort

Aborts the current action, or if the action is a part of a chain of actions the whole chain will be interrupted.

```javascript
onClick: {
  condition: {
    $eval: 'return $val.isSomething'
  },
  abort: true
}
```

### Custom action

You can execute custom JavaScript code.

```javascript
onClick: {
  $eval: 'alert("Hello world!")'
}
```

### Emit

Emit event to outside application.

```javascript
onClick: {
  emit: {
    event: 'my-event',
    value: { key: 'my.field.in.schema' }
  }
}
```

| Parameters | Type                  | Description                                                              |
| ---------- | --------------------- | ------------------------------------------------------------------------ |
| event      | `string`              |                                                                          |
| value      | `JsfValueOptionsType` | Check [Value Options](/jsf/interfaces/value-options.md) for description. |

When application is creating JSF component it must register `onFormEvent` input for emit to work.

{% tabs %}
{% tab title="Template" %}

```markup
<jsf-page [onFormEvent]="onEmit"></jsf-page>
```

{% endtab %}

{% tab title="Component" %}

```typescript
import { Bind } from '@kalmia/jsf-common-es2015';

@Bind()
async onEmit(x: JsfFormEventInterface): Promise<any> {
 // x.event = 'my-event'
}
```

{% endtab %}
{% endtabs %}

### Set value

Sets value to form.

```javascript
{
  setValue: {
    path : 'my.field.in.schema',
    value: 123
  }
}
```

| Parameters    | Type                                                                                           | Description                 |
| ------------- | ---------------------------------------------------------------------------------------------- | --------------------------- |
| path          | `string`                                                                                       | If not set it sets to root. |
| value         | `JsfValueOptionsType` check [Value Options](/jsf/interfaces/value-options.md) for description. |                             |
| noResolve     | `boolean` (optional)                                                                           |                             |
| noValueChange | `boolean` (optional)                                                                           |                             |

### Patch value

Similar to `setValue` but it patches value to form (preserving not defined existing properties).

```javascript
{
  patchValue: {
    path : 'my.field.in.schema',
    value: 123
  }
}
```

| Parameters    | Type                                                                                           | Description                 |
| ------------- | ---------------------------------------------------------------------------------------------- | --------------------------- |
| path          | `string`                                                                                       | If not set it sets to root. |
| value         | `JsfValueOptionsType` check [Value Options](/jsf/interfaces/value-options.md) for description. |                             |
| noResolve     | `boolean` (optional)                                                                           |                             |
| noValueChange | `boolean` (optional)                                                                           |                             |

### Validate

Validate form. This will trigger a full form validation and will then display errors in the entire form. If the form is invalid this will abort the event chain!

{% hint style="danger" %}
Not supported right now. Form is already validating itself at every change.
{% endhint %}

### Submit

{% hint style="danger" %}
Not supported right now.
{% endhint %}

### Add item to array

Add item to array at given path.

```javascript
arrayItemAdd: {
  path : 'users',
  mode : 'patch',
  value: {
    $eval:
      `return {
        username: 'John',
        email: 'john@example.com'
      };
      `
  }
}
```

| Parameters | Type                | Description |
| ---------- | ------------------- | ----------- |
| path       | `string`            |             |
| value      | `{ $eval: string }` |             |
| mode       | `"set" \| "patch"`  |             |

{% hint style="info" %}
We plan to change value interface into `JsfValueOptionsType` check [Value Options](/jsf/interfaces/value-options.md) for description.
{% endhint %}

### Remove item from array

Remove item from array at given path.

```javascript
arrayItemRemove: {
  path: 'users',
  index: {
    $eval: `return $getItemIndex('users[]')`
  }
}
```

| Parameters | Type                | Description |
| ---------- | ------------------- | ----------- |
| path       | `string`            |             |
| index      | `{ $eval: string }` |             |

### Navigate to

```javascript
navigateTo: {
  path: {
    $eval: `return '/users/form/' + $val._id + '/edit'`
  },
  query: {
    $eval: `return { name: $val.name }`
  }
}
```

| Parameters          | Type                                                               | Description |
| ------------------- | ------------------------------------------------------------------ | ----------- |
| reload              | `boolean`                                                          |             |
| path                | `{ $eval: string }`                                                |             |
| query               | `{ $eval: string }`                                                |             |
| queryParamsHandling | `'merge' \| 'preserve' \| ''`                                      |             |
| relative            | `boolean`                                                          |             |
| openInNewWindow     | `boolean`                                                          |             |
| transferFormValue   | `{ path?: string; value?: { $eval: string; } \| any; } \| boolean` |             |

### Show dialog

```javascript
showDialog: {
    key: 'my-page-form'
}
```

### Hide dialog

```javascript
hideDialog: true
```

### Stepper

#### Stepper next

```javascript
stepperNext: {
    id: '@stepper-primary'
}
```

#### Stepper previous

```
stepperPrevious: {
    id: '@stepper-primary'
}
```

### Clipboard

Clipboard - Copy and paste to/from local storage.

### Show notification

Shows a notification to the user.

```javascript
showNotification: {
    message: 'Hello.',
    level: 'info'
}
```

### Run service action

Run service action.

### Reload data source :new:&#x20;

| Property        | Type                 | Description                                             |
| --------------- | -------------------- | ------------------------------------------------------- |
| `force`         | `boolean` (optional) | Force reload even if API call already in progress.      |
| `dataSourceKey` | `string` \| `'*'`    | Which data source to reload. If `*` it will reload all. |

Example buttons for triggering reload:

```typescript
{
  type       : 'button',
  title      : 'Force reload',
  onClick    : {
    dataSourceReload: {
      force: true,
      dataSourceKey: '*'
    },
  },
},
{
  type       : 'button',
  title      : 'Reload',
  onClick    : {
    dataSourceReload: {
      dataSourceKey: '*'
    },
  },
}
```


---

# 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://jsf.gitbook.io/jsf/layout/layout-options/on-click-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.