It is possible to create customized actions with Beagle for your components.
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 }) => {
}
action.parameterA
or action.parameterB.
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
}
})
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
}
}
string
and number.
Was this page helpful?
Glad to hear it! Please tell us how we can improve.
Sorry to hear that. Please tell us how we can improve.