Introduction
The Like/Dislike Element plugin allows multiple user to like or dislike form content. It saves the like or dislike record to another form while referencing the current form. It also allows like or dislike in datalist using the datalist column.
Plugin Info
Plugins Available in the Bundle:
Like Dislike
- Like Dislike Datalist Column
This plugin bundle is compatible with Joget DX 8 and onwards.
Expected Outcome
To be able like or dislike form content in form or in datalist.
Figure 1: Like or dislike in form
Figure 2: Like or dislike in datalist
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, now let us create a new form Like Dislike Form with two fields, one with Like Dislike value field and one with foreign key hidden field. This form is to store the like or dislike field values into an external table.
Figure 3: Like Dislike Form
3. Create another main form to receive customer data and place the like or dislike element into the main form. For more details on configuring the element, refer to Configure Like Dislike Element. Put the values from the Like Dislike Form into the configuration of like dislike element. The checkbox field will be the dependency field for the like or dislike datalist column later.
Figure 4: Main Form (Like Dislike Element)
Figure 5: Main Form (Check Box)
4. On the right up corner, click on generate app and generate CRUD for the main form.
Figure 6: Main Form (Generate CRUD)
5. Now view the UI. You can also generate CRUD for the like dislike form (optional). The total likes and dislikes on article is a datalist that we can configure to view all likes and dislikes on each article using SQL query (optional).
Figure 7: Like Dislike Element Sample App Builder
6. Now go to the List - Main Form that the CRUD has created automatically. Add the Like Dislike Datalist Column into the datalist and configure the properties. Refer to Configure Like Dislike Datalist Column. Fill in the same form and fields for the configuration. For the redirect details, you will need to fill the userview menu and the list ID that will be returned when user clicks on like/dislike. In the visibility section, we will refer to the column "Visibility" with the value true, so when the value is true, the like/dislike column will only be shown.
Figure 8: Like Dislike Datalist Column
Steps to run the plugin
1. Run the UI. Go to Manage Main Form and click New. Fill in the form and save. In a new form record, the like/dislike element will not be shown because the main form is not saved as a record yet.
Figure 9: Manage Main Form - Form
2. You can see the like dislike datalist column is shown because we enabled true for the Show like/dislike checkbox. Create another record with unchecked like/dislike checkbox.
Figure 10: Manage Main Form - Datalist
3. You can see that the visibility unchecked will also hide the like dislike column. Try to click on like / dislike and it will redirect to the same page as configured.
Figure 11: Manage Main Form - Datalist another record
4. There is now one like in the value. You can check the values under Manage Like Dislike Form.
Figure 12: Manage Main Form - Datalist Like
5. You can also edit the records and directly press the like / dislike. Upon pressing, it will update the values in the external table, the main form will not be submitted.
Figure 13: Manage Main Form - Form Dislike
Like or Dislike Element Properties
Configure Like Dislike Element
Figure 14: Plugin Configurations for Like Dislike Element
Name | Description |
|---|---|
| Label * | Menu label. |
| ID * | Menu element unique ID. |
| Form to store Like Dislike * | External form to store like dislike value. |
Like Dislike Field * | Field of external form to store like dislike value of current form. |
Foreign Key Field * | Field of external form to store foreign key (id of current form). |
Configure Like Dislike Datalist Column
Figure 15: Plugin Configurations for Like Dislike Datalist Column
Name | Description |
|---|---|
| Label * | Menu label. |
| ID * | Menu element unique ID. |
| Form to store Like Dislike * | External form to store like dislike value. |
Like Dislike Field * | Field of external form to store like dislike value of current form. |
Foreign Key Field * | Field of external form to store foreign key (id of current form). |
Redirect Details | Header field. |
| Userview Menu * | Userview Menu for redirection to occur after like or dislike is clicked. |
| Userview Menu Form ID * | Userview Menu form ID set in Userview Menu for redirection to occur after like or dislike is clicked. |
| Visibility | Header field. |
| Column Name | Column in datalist to affect the visibility of the like dislike record. If left blank, there will not be any visibility dependent on any columns. |
| Column Value | Column value based on Column Name to affect the visibility of the like dislike record. The like dislike will be shown only if column value of the column name equals to the input. |
Source Code and Plugin Download
- You can find the latest release at https://github.com/jogetoss/like-dislike-element/releases.
- Upload the plugin to your Joget by navigating to Settings > Manage Plugins > Upload Plugin as admin.
Demo App Download
APP_LikeDislikeElementSampleApp-1-20240425141629.jwa