How to create new actions

In this section, you can see how to create Custom Actions to be used in events but being handled by the frontend application

Creating a frontend action

On Beagle, it’s possible to create a customized action from a CustomAction.

Each platform has its own way to make this implementation on frontend. Below is an example on how to do it for Web projects

  1. You must create an interface with _beagleAction_ as a mandatory propriety and with the necessary parameters to your action. For this example, you will create a msg attribute string type.

  2. On _beagleAction_, put the customized action name following the snippet ‘custom:nameOfAction’.

interface CustomAction {
  _beagleAction_: 'custom:CustomAction',
  msg: string
  1. Once done, create a function of type ActionHandler where the generic type is the interface you have just created:
import { ActionHandler } from '@zup-it/beagle-web'

export const customHandler: ActionHandler<CustomAction> = ({ action }) => {
       We can access our parameter defined on the interface, for example, action.msg brings us the msg value.
  1. Finally, add the action’s name on the association files according to each framework:

For Angular: add on beagle.module.ts:

    "custom:CustomAction": customHandler //action handler name
export class Beagle {}

For React: add to your Beagle’s configurations file:

export default createBeagleUIService<any>({
        "custom:CustomAction": customHandler //action handler name

Create an action on backend

To create this action, your code must be like:

data class CustomAction(
val msg: String? = null
) : Action 

Below, see an example of an Action in a Button’s type component:

  "_beagleComponent_": "beagle:button",
  "text": "Beagle Button",
  "onPress": [
      "_beagleAction_": "custom:customAction",
      "msg": "I am a Toast."
   text = "Beagle Button",
   onPress = listOf(CustomAction("I am a Toast"))