On click action

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

Example

{
  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.

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

Custom action

You can execute custom JavaScript code.

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

Emit

Emit event to outside application.

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

Parameters	Type	Description
event	string
value	JsfValueOptionsType	Check Value Options for description.

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

Template

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

Component

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

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

Set value

Sets value to form.

{
  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 for description.
noResolve	boolean (optional)
noValueChange	boolean (optional)

Patch value

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

{
  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 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!

Not supported right now. Form is already validating itself at every change.

Submit

Not supported right now.

Add item to array

Add item to array at given path.

arrayItemAdd: {
  path : 'users',
  mode : 'patch',
  value: {
    $eval:
      `return {
        username: 'John',
        email: '[e-mail]'
      };
      `
  }
}

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

We plan to change value interface into JsfValueOptionsType check Value Options for description.

Remove item from array

Remove item from array at given path.

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

Parameters	Type	Description
path	string
index	{ $eval: string }

Navigate to

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

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

Hide dialog

hideDialog: true

Stepper

Stepper next

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.

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

Run service action

Run service action.

Reload data source 🆕

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:

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