...
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 foreignkey 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.
...
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
...
Configure Like Dislike Element
Figure 1714: 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 1715: Plugin Configurations for Like Dislike Datalist Column
...
- 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
| View file | ||||
|---|---|---|---|---|
|