# 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](https://jsf.gitbook.io/jsf/interfaces/value-options) 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](https://jsf.gitbook.io/jsf/interfaces/value-options) 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](https://jsf.gitbook.io/jsf/interfaces/value-options) 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](https://jsf.gitbook.io/jsf/interfaces/value-options) 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: '*'
    },
  },
}
```