The Notify action is used to send push notifications to the user after a specific action or user interaction. It provides quick feedback to the user about situations such as success, error, warning within the application. In addition, Notify Actions settings in Configuration Manager can be used for centralized system-wide notification configurations.
Technical Specifications
Notification Type: Success, warning, information, error and customized types supported.
Location Selection: The position where the notification will be shown on the screen (e.g. top right, bottom left) can be selected.
Duration Setting: The time the notification stays on the screen can be set.
Visual Customization: Style settings such as color, font size, etc. can be adjusted.
Web and Mobile Support: Works on both web and mobile platforms.
Notify Action Implementation Steps
Adding Notify Action to the Project
Login to Kuika platform and select the project you will work on from the Apps screen.
Switch to the UI Design module.
Open the Properties panel by selecting the relevant component.
Click on the+ ADD ACTION drop-down menu.
Select a suitable trigger action (event) such as Initial Actions, OnClick, OnBlur→ Notification → Add the Notify option.
Configuring the Notify Action
You can configure the following fields in the drop-down menu:
Message
Tip: String
Necessity: Yes
Description: Type the text of the notification message to be shown on the screen.
Input: Text box. Here you can type the text that will be displayed as a notification to the user. For example, “The operation completed successfully!”. Data can be imported into this field primarily from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.
Type
Type: Enum
Necessity: Yes
Description: Select the notification type. Options:
Default: Default notification type.
Info: Used for informational messages.
Success: Used for success messages.
Warning: Used for warning messages.
Danger: Used for critical error or emergency notifications.
Custom: Customizes the background color, text color and font size of the notification.
Type determines the style of the notification, for example Info is selected for information, Success for success, Warning for warning, Danger for critical error and Custom for custom color and style. These notification types only affect the visual style, i.e. the visual properties of the notification such as background color, font color and font size; they do not change the logic of the notification. The design of the notification can be completely customized, especially with the Custom option.
In this field, you need to select the type of notification. For example, you can select “Success” for a success message. Data can be imported into this field primarily from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.
Background Color
Tip: String
Necessity: Optional
Description: Customizes the notification background color (you can use color code in Hex, RGB, etc. formats).
Input: Text box - Example: #FF5733. If you want to use a customized background color, you can type the color code here. For example, “#FF5733” is a red color code. Data can be imported into this field primarily from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.
Text Color
Tip: String
Necessity: Optional
Description: Sets the text color of the notification message.
Input: Text box - Example: #FFFFFF. Here you can type a color code to determine the color of the text. For example, “#FFFFFF” is the color code for white. Data can be imported into this field primarily from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.
Font Size
Tip: String
Necessity: Optional
Description: Sets the font size of the notification text.
Input: Text box - Example: 14px. To set the size of the text in the notification, you need to specify a font size. For example, you can use values like “14px” or “1em”. Data can be imported into this field primarily from data sources such as Action Result. Other sources can also be used, such as Method Input, Current, Screen Input, Fixed or Component. These categories can be defined by selecting them via Symbol Picker.
Position
Type: Enum
Necessity: Yes
Description: Determines the position in which the notification is shown on the screen. It is different for web and mobile apps.
Top Left: Top left for web and top left for mobile.
Top Right: Top right for web and top right for mobile.
Bottom Left: Bottom left for web, bottom left for mobile.
Bottom Right: Bottom right for web, bottom right for mobile.
Input: Selection box - Top Left, Top Right, Bottom Left, Bottom Right. In this field you can choose in which position you want the notification message to appear on the screen. For example, selecting “Top Right” will show the notification in the top right corner. Data can be imported into this field primarily from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.
Duration
Type: Integer
Necessity: Optional
Description: Specifies the time in seconds that the notification will remain on the screen before automatically closing.
Input: Number box - Example: 5 seconds. In this field you can specify the time in seconds that the notification message stays on the screen. For example, after 5 seconds the notification will automatically close. If “0” or “null” is entered, the notification will not close. Data can be imported into this field primarily from data sources such as Action Result. Other sources such as Method Input, Current, Screen Input, Fixed or Component can also be used. These categories can be defined by selecting them via Symbol Picker.
Usage Scenario: Notification After Form Submission
When a user fills out and submits a contact form, a notification (Notify) is shown indicating that the transaction was successful. Thus, the user is assured that the form has been submitted successfully.
Adding Action to Form Button
Enter the UI Design module.
Go to the Elements panel on the left side.
Drag and drop the Button element.
Enter the text “Send” in the Label header under the Properties panel.
Select Button and add the action OnClick → Notification → Notify → Notify from the + ADD ACTION menu.
Configuring the Notify Action
Message: “Form submitted successfully! We will contact you as soon as possible."
Type: Success
Position: Top Right
Duration: 5 seconds
With this configuration, when the user submits the form, a green-colored, 5-second notification message is displayed in the upper right corner of the screen. Thus, the user sees that the transaction is completed and does not need to perform the transaction again.
Notify Action Advanced Customizations
Dynamic Messages: Personalized messages can be shown using information such as username in the notification.
Custom Style Usage: Visual details such as background, text color and font size can be customized with Custom type.
Multiple Notification Scenarios: Multiple Notify actions can be triggered together (e.g. both success and notification).
Conditional Notifications: If Then Else or other conditional constructs can be used to indicate notification only in certain cases.
Technical Risks and Precautions
Repetitive Notifications: Continuous display of the same notification may annoy the user.
Privacy: If the notification contains personal data, data security must be ensured.
Appropriate Duration Setting: Notifications that are too short or too long can negatively affect the user experience.
The Notify action is an ideal solution to show instant and effective notifications to the user within the app. The quality of interaction is improved by providing visual feedback to the user for successful actions, errors or notifications. With advanced customization options, design-appropriate and attractive notifications can be created.
