Like or Dislike Element Plugin

Introduction

The Like/Dislike Element plugin allows multiple users to like or dislike form content. It saves the like or dislike record to another form while referencing the current form. It also allows likes or dislikes in the datalist using the datalist column.

This plugin is created with the use of uagrace/like-dislike: jQuery rating plugin.

Plugin Info

Plugins Available in the Bundle:

1. Like Dislike.

2. Like Dislike Datalist Column.

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

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 the 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.
   
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.
   
   
4. In the top right-hand corner, click on Generate App and Generate CRUD for the main form.
   
5. Now view the UI. You can also Generate CRUD for the like dislike form (optional). The total likes and dislikes on an article is a datalist that we can configure to view all likes and dislikes on each article using SQL query (optional).
   
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 in the userview menu and the list ID that will be returned when the user clicks on like/dislike. In the Visibility section, we will refer to the Visibility column with the value true, so when the value is true, the like/dislike column will only be shown.
   

Steps to run the plugin

1. Run the UI. Go to Manage Main Form and click New. Fill in the form and click 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.
   
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.
   
3. You can see that the visibility unchecked will also hide the like dislike column. Try to click like / dislike, and it will redirect to the same page as configured.
   
4. There is now one like in the value. You can check the values under Manage Like Dislike Form.
   
5. You can also Edit the records and directly press the like or dislike buttons. Upon pressing, it will update the values in the external table, the main form will not be submitted.
   

Like or Dislike Element Properties

Configure Like Dislike Element

Configure Like Dislike Datalist Column

Source Code and Plugin Download

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

Expected Outcome

To be able to like or dislike form content in a form or in a datalist.

Demo App Download