Introduction

Emote Form Element plugin allows users to react to submitted forms using emotes. These emotes are stored in a separate form while maintaining a reference to the original form.

This plugin is created with the use of JavaScript emoji picker, specifically on the release of Release v3.1.1.

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:

1. Emote Form Element

This plugin bundle is compatible with Joget DX 8.

Expected Outcome

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

Figure 1: React Emote on Form

Get Started

Steps

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.

Figure 2: Separate Form to Store Emote Values

3. On the upper right, click on Generate App > Generate CRUD for the form.

Figure 3: Generate CRUD for Store Emote Form

4. Now create the main form to attach the emote form element. For plugin configurations, please refer to Emote Form Element Properties.

Figure 4: Main Form to Attach Emote Form Element Plugin

5. On the right upper corner, click on Generate App > Generate CRUD to create the UI.

Figure 5: Generate CRUD for Main Form

6. Go to UI Builder. The two CRUD are created in this UI. Click on save and publish the app. Launch the app.

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.

Figure 7: Add New Record for Main Form

2. Now click on edit record for the latest record submitted. We can now click on the emoji picker button to react the form. Click on any emoji.

Figure 8: Click on Emoji Picker Button

3. The reacted emoji shows below the button. You can click to unreact, or react another different emoji. 

Figure 9: Reacted Emoji below Emoji Picker Button

4. Click on Manage store emote, you can see that the emoji reacted has been stored to this table.

Figure 10: Manage Store Emote page

5. Now we will try to react using different users. Logout from Admin and log in into Cat. Edit the record and react on the form. Try to react the same emoji by pressing on the reacted emoji button. You will also be able to react other emoji with no limits. One user will be able to react one or more emoji.

Figure 11: Another User React Emote

6. Logout and log in back into Admin. We can see that the like emote has been reacted by Cat Grant. You can hover to the emote to see who reacted the emote.

Figure 12: Hover Emote

Emote Form Element Properties

Configure Emote Form Element

Figure 13: Plugin Configurations for Emote Form Element

Styling

Figure 14: Plugin Configurations for Emote Form Element - Styling

Source Code and Plugin Download

1. You can find the latest release at https://github.com/jogetoss/emote-form-element/releases.
2. Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.

Demo App Download

• APP_EmoteFormElementSampleApp-1-20240904014148.jwa