Table of Contents
- Adding the Alert Module
- Add a New Module
- Add Layout
- Search for Alert Module
- Add Alert Module
- Import Workflows and Variables
- Place the Alert Component
- Configuring the Alert
- Access Alert Configuration
- Access Data Settings
- Configure Alert State
- Triggering the Alert
- Trigger and Customize Alert
- Access Actions
- Display Alert workflow
- Add New Workflow
- Add a New Action
- Trigger the Alert Workflow
- Select Display Alert Workflow
- Trigger the Alert
- Trigger Alert Workflow
- What's next?
Do not index
Do not index
This tutorial is for WeWeb app developers who want to add, customize, and trigger alerts in their applications.
In this tutorial, you will learn how to add alerts and notifications to your WeWeb app, customize them, and trigger them using workflows. The tutorial covers steps from adding the alert module, configuring its variables and workflows, to customizing the alert's display options and triggering it with various parameters like type, title, description, and call-to-action text.
Adding the Alert ModuleAdd a New ModuleAdd LayoutSearch for Alert ModuleAdd Alert ModuleImport Workflows and VariablesPlace the Alert ComponentConfiguring the AlertAccess Alert ConfigurationAccess Data SettingsConfigure Alert StateTriggering the AlertTrigger and Customize AlertAccess ActionsDisplay Alert workflowAdd New WorkflowAdd a New ActionTrigger the Alert WorkflowSelect Display Alert WorkflowTrigger the AlertTrigger Alert WorkflowWhat's next?
Adding the Alert Module
Add a New Module
Click on the 'Add' button in the WeWeb editor to start adding a new module to your app.
Add Layout
Click on the 'Layout' button to proceed with adding the alert module to your app.
Search for Alert Module
Type 'alert' in the search input to find the alert module.
Add Alert Module
Click on the image button to add an alert module to your app. This will prompt a pop-up window to configure variables and workflows.
Import Workflows and Variables
A pop up shows and asks if you want to import workflows and variables. Keep the toggles on. This will ensure that the alert module functions properly by including essential workflows and variables.
Place the Alert Component
Click on the 'Place component' button to add the alert module to your app. This will finalize the addition of the alert module and make it available in the left side panel for further customization.
Configuring the Alert
Access Alert Configuration
You can customize the alert's display options, such as its position, animation, and other parameters.
Access Data Settings
Click on the 'Data' button to access the data-related settings for your alert module. This will allow you to configure the alert's state and other data properties.
Configure Alert State
Click on the 'Alert' dropdown to select or create a class for your alert. This will allow you to manage the alert's display settings and behavior.
Triggering the Alert
Trigger and Customize Alert
Customize the display default status of your alert to false if you don't want the alert to be always visible.
Access Actions
Click on the 'Actions' button to access the available actions for your alert module. This will allow you to configure workflows and other actions related to the alert.
Display Alert workflow
The alert module comes with an Alert workflow called Display Alert.
Add New Workflow
Click on the button with the plus icon to add a new action to your alert module. This will allow you to configure additional actions or workflows for your alert.
Add a New Action
Click on the button 'Add an action' to add a new action to your alert module. This will allow you to configure additional workflows or actions for your alert.
Trigger the Alert Workflow
Click on the 'Execute workflow' button and select the 'Display Alert' workflow. This will allow you to trigger the alert with various customization options like type, title, description, and call-to-action text.
Select Display Alert Workflow
Click on the 'Choose a workflow' button to select the 'Display Alert' workflow. This will allow you to trigger the alert with various customization options like type, title, description, and call-to-action text.
Trigger the Alert
Click on the 'Display Alert' button to trigger the alert. This will allow you to see the alert in action with the current configuration settings.
Trigger Alert Workflow
Trigger the alert with various customization options like type, title, description, and call-to-action text.
What's next?
After completing this tutorial, you should test the alerts in different scenarios to ensure they work as expected. You can also explore other WeWeb modules and workflows to enhance your app further. Consider joining the WeWeb community at community.weweb.io for additional support and to share your experiences.
