Customized Actions

You will find here which actions can be customized on Beagle for Web

Introduction

It is possible to create customized actions with Beagle for your components.

Create an ActionHandler

Step 1: Create an interface with the required property _beagleAction_ and with other necessary values, like the example below, where two parameters were created: A and B.

__The customized action name is _beagleAction_

interface CustomAction {
  _beagleAction_: 'custom:myCustomAction',
  parameterA: string,
  parameterB: number
}

Step 2: Create the ActionHandler function with the interface:

import { ActionHandler } from '@zup-it/beagle-web'


export const customAction: ActionHandler<CustomAction> = ({ action }) => {

}

Step 3: Add the action name in the association file according to your framework:

For Angular: Add beagle.module.ts

@BeagleModule({
  ...
  customActions:{
    "custom:myCustomAction": customAction //nome do action handler
  }
})
export class Beagle {}

For React: add to your Beagle configuration file

export default createBeagleUIService<any>({
    ...
    customActions:{
        "custom:myCustomAction": customAction //nome do action handler
      }
})

Adding actions to JSON

Add the customized action to the JSON and add the defined parameters in the ActionHandler interface.

See below an example with a button:

{
    "_beagleComponent_": "beagle:button",
    "text": "Clique para ação customizada",
    "onPress": {
        "_beagleAction_": "custom:myCustomAction",
        "parameterA": "Beagle Web",
        "parameterB": 10
  }
}

Last modified February 11, 2021: create content (#298) (43225e15)