Notification Template
You can prepare and send Emails quickly and easily in the applications you have developed with Kuika. You can edit and use one of the dozens of Email templates offered by Kuika during the email preparation process.
This training content consists of the following topics:
- 1.Email Creation Screen
- 2.Creating Parameters on the Email Creation Screen
- 3.Working with Email Sending Action on the Application Screen
Open the "Notification Template" window in the project you are working on in Kuika.
IMG01: Notification Template screen
On the next screen, you will be greeted with a new “Notification Template” adding screen and a default “Set Password” and “Reset Password” templates created by Kuika. If you need password setting and password reset emails in the application you have developed, you can edit and use the default “Set Password” and “Reset Password” templates created by Kuika.
On a new "Notification Template" adding screen, name your template and click the "Next" button.
IMG02: Mail Templates
Dozens of editable Email templates, ready to be used by Kuika, will welcome you on the screen that opens.
You can choose one of these templates according to your wishes and needs, or create an Email template from scratch by clicking the "NEW BLANK TEMPLATE" option.
Let's say you create a template from scratch. When you click the “NEW BLANK TEMPLATE” button, you will be greeted by the Email template creation interface.
IMG03: Email Template creation interface
The email template creation interface works with drag-and-drop logic. The interface has “Desktop” and “Mobile” display options to create a responsive design.
The interface includes Content, Blocks and Body tabs.
IMG04: Email Template Creation Interface Tabs
The Content tab in the email template creation interface contains many content structures.
IMG05: Context Tab
Email templates you have prepared through the Content tab;
- columns
- Heading
- text
- Image
- button
- Divider
- HTML
- Menu
To add a specified content, all you have to do is drag the content structure you want to add and drop it into the template creation workspace.
Each of the contents under the Content tab contains special settings within itself.
IMG06: Columns content settings
When you add the "Columns" content to the Email template you are creating, you can set the Columns content settings in two different configurations, namely web, and mobile, under the headings "Columns", "Columns Properties", "Row Properties" and "Responsive Design".
IMG07: Heading content settings
When you add the "Heading" content to the Email template you are creating, you can set the Heading content settings in two different configurations, namely web, and mobile, under Smart Headings, "Text", "Links", "General" and "Responsive Design" headings.
IMG08: Text Settings
When you add the "Text" content to the Email template you are creating, you can adjust the Text content settings in two different configurations, namely web and mobile, under the headings of "Text", "Links", "General" and "Responsive Design".
IMG09: Image Settings
When you add the "Image" content to the Email template you are creating, you will see the Image content settings in the "Magic Image", "Image", "Width", "Align", "Alternate Text", "Action", "General" and "Responsive Design" headings. You can perform it in two different configurations as web or mobile.
IMG10: Button Settings
When you add the "Button" content to the Email template you are creating, you can edit the Button content settings in two separate configurations, namely web and mobile, under the headings "Smart Buttons", "Action", "Button Options", "Spacing", "General" and "Responsive Design".
IMG11: Divider Settings
When you add the “Divider” content to the Email template you are creating, you can adjust the Divider content settings in two different configurations, namely web and mobile, under the headings “Line”, “General” and “Responsive Design”.
IMG12:HTML Settings
When you add the "HTML" content to the Email template you are creating, you can set the HTML content settings in two different configurations, namely web and mobile, under the headings "HTML", "General" and "Responsive Design".
IMG13: Menu Settings
When you add the "MENU" content to the Email template you are creating, you can set the MENU content settings under two different configurations, namely web and mobile, under the headings "Menu Items", "Styles", "General" and "Responsive Design".
The Blocks tab in the email template creation interface contains many block structures that provide a content transfer layout.
IMG14: Blocks Tab
To add the block structures to the Email template you are creating, all you need to do is drag the content structure you want to add and drop it into the template creation workspace.
IMG15: Adding Content to Block
You can add content to the block columns by hovering over the columns in the Block structure you added.
You can visually edit the body structure of the Email template via the Body tab in the Email template creation interface.
IMG16: Body Tab
Via the Body tab, you can perform visual adjustments in "General", "Email Settings" and "Links".
You can add parameters to the Email template you are creating to work with dynamic data.
IMG17: Adding a parameter to an Email template
To add a parameter, add the parameter in the form of @parameter to the field you want to pull dynamic data from.
To define the parameter values you added, return to the UI Design window, and define the parameter values through actions.
In the application you developed with Kuika, you can perform configurations and parameter definitions for the Email template you created by using the "SendMail" action, one of the system actions.
IMG18: Email template example
In an example scenario, let's think of a generated Email template with parameters that are activated through the application screen.
IMG19: Adding SendMail action
Add the "SendMail" action to a "Button" element that you add to the application screen. Select the Button element you want to add an action to. Click the “ADD ACTION ” button in the Button Properties that opens on the right. Select onClick> Notification>SendMail in the menu that opens.
When you add the SendMail action, select "Mail Type" via the drop-down menu under the Mail Type heading in the action.
IMG20: Mail Type selection
“Custom” and “Template” options are available in the drop-down menu titled Mail Type.
IMG21: Custom Mail Type selection
With the "Custom" option in the drop-down menu titled Mail Type, the content of the mail can be created in the "Body" tab under the action, without using any templates. You can capture the e-mail content dynamically or statically via the "SymbolPicker" in the Body tab. Receiver/user Email information is entered via the "Receivers" tab under the Custom option. The subject of the Email to be sent via the "Subject" tab is entered. You can add “sender”, “cc”, “bcc”, “file attachment” and “image attachment via base64” options through the optional parameters that can be added, and you can enter the values of the parameters you added. You can use the "SymbolPicker" to capture the value information of all tabs under the Custom option dynamically or statically.
IMG22: Template Mail Type selection
You can send an Email using the Email template you created with the "Template" option in the drop-down menu titled Mail Type. First, after selecting Template as MailType, select the Email template you want to use via the drop-down menu under the "Templates" heading. Then, the recipient/user Email information is entered via the “Receivers” tab. The subject of the Email to be sent via the "Subject" tab is entered.
Then the parameters you have added to the Email template will be listed. You can enter parameter values using “SymbolPicker”.
IMG23: Entering parameter value via SystemPicker
For an Email template we use as an example, let's examine the process of dynamically entering data into the "namesurname" parameter in the template by using the SendMail Action.
To add a value to the "namesurname" parameter of the SendMail action via Symbol Picker, click Symbol Picker in the "namesurname" parameter under the SendMail action.
IMG24: Category selection for parameter via SystemPicker
To add a value to the parameter, select the relevant Symbol Picker category in the drop-down menu.
IMG25: Item selection for parameter via SystemPicker
Select the item that will create the value source for the parameter specific to the category.
Repeat this process for all parameters in the email template.
You can add "sender", "cc", "bcc", "file attachment" and "image attachment via base64" options via optional parameters that can be added to SendMail Action, except for the parameters in the email template, and you can enter the values of the parameters you added. You can enter the value information of all tabs under the Template option using “SymbolPicker”.
Last modified 1mo ago