...
This plugin is created with the use of JavaScript emoji picker, specifically on the release of Release v3.1.1.
Plugin Information
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
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 17: Plugin Configurations for Like Dislike 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
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 |
Source Code and Plugin Download
- You can find the latest release at https://github.com/jogetoss/emote-form-element/releases.
- Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.