Emote Form Element

Introduction

The Emote Form Element plugin enables users to add reactions to submitted forms using emotes. Each reaction is saved in a separate form that retains a reference to the original submission.

This plugin was developed using a JavaScript emoji picker, specifically from Release v3.1.1.

Plugin information

Plugins Available in the Bundle:

• Emote Form Element Plugin

This plugin bundle is compatible with Joget DX 8 and onwards.

Get started

Prerequisites

ALTER TABLE `app_fd_efesa_store`
CHANGE COLUMN `c_emote` `c_emote` LONGTEXT
CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci NULL DEFAULT NULL;

Where to get the plugin

You can download this plugin from the Joget Marketplace.

How to install

1. Log in and click Download on this plugin screen (It will be a .jar file).
   
2. Go to your Joget localhost or server. In the Joget Console, go to Admin Bar > Settings > Systems Settings > Manage Plugins and click the Upload Plugin button.
3. Under Upload Plugin, click Choose File, and select the plugin .jar file you downloaded, and click Upload.
4. You can now view your new plugin in your Form Builder.
5. Remember to uninstall the old plugin before uploading a new version.
6. The Joget Knowledge Base has more information on managing and developing plugins.

Importing the Sample App

1. Download the sample app from here.
2. Log in and import the app at the App Center. 

Creating an App from Scratch

1. Log in and click Design New App from the App Center.
2. Click Create New App.
   
3. Fill in the App ID and App Name, and click Save.
   
4. Click the + button at the Form Builder to add a new form.
   
5. Fill in the form details according to the image below, and click Save. This form is used to store the emote itself and the Form ID (foreign key) of another form—the one to which the emote is attached, which will be discussed later.
   
6. Drag a Text Field onto the form to store the emote value, and a Hidden Field to store the form ID of the external form. Label both fields as Emote and formId consecutively.
   
7. Click Apply Changes > Save > Generate App.
8. Check the box for GENERATE CRUD, and click Generate.
   
9. Close the window, and open List - Sample Emote References from the List Builder.
10. Drag the Created By Name column onto the list to identify the emote sender.
    
11. Click Save.
12. Create a new form from the App Composer. This form is where you attach emotes.
13. Fill in the form details for the new form according to the image below, and click Save.
    
14. Drag a Text Field and an Emote Form Element onto the form. Label them appropriately.
    
15. Configure the Emote Form Element as the image below. For more information regarding the plugin properties, please refer to Emote Form Element Properties.
    
16. Click Apply Changes > Save > Generate App.
17. Check the box for GENERATE CRUD, and click Generate.
18. Launch the App from the UI Builder.

How to use it

1. Click Manage Sample Emote Form > New.
   
2. Fill in the form, and click Save.
   
3. Click Edit on the new record.
   
4. Click Emote, then select any emote you want.
   
5. The selected emote is presented under the Emote button. You can add more emotes or click on the selected emote to deselect it.
   
6. Click Manage Sample Emote References to view the emote record submitted from the previous form.
   
7. Now, let’s react to a form with emotes using a different user account. Log in to Cat Grant’s account and react to the same form using both the same and different emotes.
   
8. Log back into the Admin account to see that Cat Grant has reacted with both the same emote as Admin and an additional new emote. You can hover over the selected emote and view who reacted with the emote.
   

Configure Emote Form Element Plugin Properties

Configure Emote Form Element

Fields to configure:

• ID *: Menu element unique ID.
• Form to store Emote *: External form to store the emote value.
• Emote Field *: Field of external form to store the emote value of the current form.
• Foreign Key Field *: Field of external form to store foreign key (id of the current form).

Styling

Fields to configure:

• Button Icon Text *: The emoji picker button, icon, or text cannot be null.
• Button Background Color: The emoji picker button background color.
• Button Icon Color: The emoji picker button icon color.
• Reactions Button Background Color: The emoji reaction button background color when the button is not reacted.
• Reactions Button Text Color: The emoji reaction button text color when the button is not reacted.
• Reactions Button Reacted Background Color: The emoji reaction button background color when the button is reacted.
• Reactions Button Reacted Text Color: The emoji reaction button text color when the button is reacted.

Expected Outcome

Users can react to submitted forms using emotes selected from the emoji picker.

Download plugin

Download the plugin from the Joget Marketplace.

Download Sample App