Note: To configure this feature, you need to have a basic understanding of coding.
An action in the context of a user interface refers to any interaction or event triggered by the user to perform a specific task. This could involve clicking a button, an image, an icon, or any other interactive element in the application.
In the Cirilla application you can create action from App builder plugin docs
Some packages can register in actions
Besides the actions we support, you can follow the instructions below to create your own action for your application.
Requirement
- Cirilla
v3.9.0
or above
Setting an Action In App Builder plugin
To create your custom action you need create an action from App builder plugin docs
Example: Show an alert when the user click to button
Route: /alert
Data:
Key | Value |
title | AlertDialog Title |
content | This is a demo alert dialog. Would you like to approve of this message? |
btn_title | Approve |
Create Function Action
Define your function: Inside the Dart file. You can create a function that handles opening a specifically defined screen.
void createFunction() {
//do something
print('Hello, World!');
}
Code example
Show an alert when the user click to button
Open file: cirilla/lib/register_actions.dart
Add the code snippets to the file:
void openAlert(BuildContext context,{Map<dynamic, dynamic>? args}) {
showDialog<void>(
context: context,
barrierDismissible: false,
builder: (BuildContext context) {
return AlertDialog(
title: Text('${args?['title']}'),
content: SingleChildScrollView(
child: ListBody(
children: <Widget>[
Text('${args?['content']}'),
],
),
),
actions: <Widget>[
TextButton(
child: Text('${args?['btn_title']}'),
onPressed: () {
Navigator.of(context).pop();
},
),
],
);
},
);
}
Register Function to App
Open file: cirilla/lib/register_actions.dart
Add the code snippets to the registerActions function:
// is the route to navigate
if (route == "/demo") {
//do something
return "none";
}
Code example
Show an alert when the user click to button
Add the code snippets to the registerActions function:
// is the route to navigate
if (route == "/alert") {
openAlert(context,args: action?['args']);
return "none";
}
Demo
- Show Intercom chat after click to button