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. You can see examples below with “how to’s” for each of them:
Create a class noted with @RegisterAction
that implements an Action
interface. This interface will request the implementation of execute’s method and you will state the result of the action
The listed msg
attribute is only a parameter example that must be stated on this class constructor.
The following example shows an action with Toast:
@RegisterAction
data class CustomAction(
val msg: String? = null
) : Action {
override fun execute(rootView: RootView, origin: View) {
Toast.makeText(
rootView.getContext(),
msg,
Toast.LENGTH_LONG).show()
}
}
You must create a class that implements an Action
. This same class will request the implementation of execute’s method and will dictate the actions o action.
The listed msg
attribute is only a parameter example that must be stated on this class constructor.
The following example shows an action with Alert
:
class CustomAction: Action {
let msg: String?
init(msg: String? = nil) {
self.msg = msg
}
func execute(controller: BeagleController, origin: UIView) {
let alert = UIAlertController(
title: nil,
message: msg,
preferredStyle: .alert
)
controller.present(alert, animated: true)
}
}
To register the action, just create a method with all your custom action and calls the registerCustomAction
Beagle’s method to make the registry.
Call the method created on BeagleConfig, that can be seen on this example.
private func registerCustomAction() {
Beagle.registerCustomAction("CustomAction", actionType: CustomAction.self)
}
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.
On _beagleAction_
, put the customized action name following the snippet ‘custom:nameOfAction’.
interface CustomAction {
_beagleAction_: 'custom:CustomAction',
msg: string
}
ActionHandler
type with 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.
*/
alert(action.msg)
}
For Angular: add on beagle.module.ts:
@BeagleModule({
...
customActions:{
"custom:CustomAction": customHandler //action handler name
}
})
export class Beagle {}
For React: add to your Beagle’s configurations file:
export default createBeagleUIService<any>({
...
customActions:{
"custom:CustomAction": customHandler //action handler name
}
})
To create this action, your code must be like:
@RegisterAction
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": "Eu sou um Toast."
}
]
}
Button(
text = "Beagle Button",
onPress = listOf(CustomAction("Eu sou um Toast"))
)
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.