Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

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
languagesql
ALTER TABLE `app_fd_efesa_store` 
CHANGE COLUMN `c_emote` `c_emote` LONGTEXT 
CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL;


Plugin Information

Plugins Available in the Bundle:

...

Users will be able to react to submitted form using emotes chosen from the emoji picker.

Image RemovedImage Added

Figure 1: React Emote on Form

...

Where to get the plugin

Refer to Source Code and Plugin Download.

How to install and use the plugin

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.

Image RemovedImage Added

Figure 2: Separate Form to Store Emote Values

...

Figure 6: Publish and Launch App

Steps to run the plugin

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.

...

Configure Emote Form Element

Image RemovedImage Added

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)

Styling

Image Added

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 ColorEmoji 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

Source Code and Plugin Download

...