Joget DX 8 Stable Released
The stable release for Joget DX 8 is now available, with a focus on UX and Governance.
...
This plugin is created with the use of JavaScript emoji picker, specifically on the release of Release v3.1.1.
Info |
---|
If you are using DX7 or older, you will need to update the emote column to support storing emotes in the database. (For more information, DX7 or older is using utf8mb3 encoding) For example, after importing the sample app, you should run the SQL code below to change the emote column to utf8mb4 encoding. |
Code Block | ||
---|---|---|
| ||
ALTER TABLE `app_fd_efesa_store`
CHANGE COLUMN `c_emote` `c_emote` LONGTEXT
CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL; |
Plugins Available in the Bundle:
...
Users will be able to react to submitted form using emotes chosen from the emoji picker.
Figure 1: React Emote on Form
...
Refer to Source Code and Plugin Download.
1. You can choose to import the demo app or create the app from scratch. For demo app, go to Joget Home or All Apps and click on Import App to import the downloaded demo app (refer to another KB - Import Joget App for more details).
2. To create the app from scratch, we can now create a new form to store the emote values. Drag two fields, one text field to store emote value and one hidden value to store the foreign key to refer to the main table.
Figure 2: Separate Form to Store Emote Values
...
Figure 6: Publish and Launch App
1. Go to Manage form and click New. Now you will not be able to see the Emote Form Element yet because the form has not yet been submitted. Fill in the form and save.
...
Figure 1713: Plugin Configurations for Like Dislike Emote Form Element
Name | Description |
---|---|
ID * | Menu element unique ID |
Form to store Like Dislike * | External form to store emote value |
Emote Field * | Field of external form to store emote value of current form |
Foreign Key Field * | Field of external form to store foreign key (id of current form) |
Figure 14: Plugin Configurations for Emote Form Element - Styling
Name | Description |
---|---|
Button Icon Text * | Emoji picker button, icon or text can be null |
Button Background Color | Emoji picker button background color |
Button Icon Color | Emoji picker button icon color |
Reactions Button Background Color | Emoji reaction button background color when button is not reacted |
Reactions Button Text Color | Emoji reaction button text color when button is not reacted |
Reactions Button Reacted Background Color | Emoji reaction button background color when button is reacted |
Reactions Button Reacted Text Color | Emoji reaction buttontext color when button is reacted |
...