Implement a Like Functionality in an App

Dear App Builders,

I was wondering if somebody has already experience in implementing a like button functionality including a counter of likes into an app?

The use case would be:

  • Users can write comments
  • Users can rate single comments

Thank you very much in advance!

Example:

Hey Julian,
I didn’t implement such a functionality yet, nevertheless wanted to reply :smiley:

You could add an action column to the table in your example. The action triggers a respective workflow that increases the counter of the comment by using the passed comment id

The column config could look sth like that:

"config": {
        "columns": [
          {
            "name": "time",
            "label": "Timestamp"
          },
          {
            "name": "user",
            "label": "User"
          },
          {
            "name": "comment",
            "label": "Comment"
          },
          {
            "name": "likes",
            "label": "likes"
          },
          {
            "name": "Action",
            "type": "actions",
            "actions": [
              {
                "endpoint": "likeEndpoint",
                "disableActionButtons": {
                  "forTime": 5
                }
              },
              {
                "icon": ""
              },
              {
                "label": "Like"
              },
              {
                "type": "endpoint"
              },
              {
                "messages": {
                  "success": {
                    "headline": "",
                    "message": "You liked comment xy"
                  }
                }
              },
              {
                "variableAssignments": [
                  {
                    "started": {
                      "variableName": "comment_id",
                      "variableType": "STRING",
                      "variableValueColumn": "comment_id"
                    }
                  }
                ]
              }
            ]
          }
        ]
      }

-----------------------------------------------

 "datasources": [
    {
      "id": "simpleDataSource",
      "origin": "raw",
      "config": {
        "schema": "table",
        "filterOptions": {
          "distinctValues": true
        },
        "data": [
          {
            "time": "12-12-2021",
            "user": "John Doe",
            "comment_id": "testid",
            "comment": "Cool!",
            "likes": 42
          }
        ]
      }
    }
  ],

For action columns it is also possible to add icons, maybe there is a “thumbs up” icon available.
The only thing I’m not sure about is if you can display the number of likes directly in the button of the action column like shown in your picture.

I hope this helps somehow :sweat_smile:

1 Like

Hi Matthias,
thank you very much for the response! I think I can solve the functionality with your solution.

Unfortunately, I could not get it running with you code snippet or the documentation.
I immediately receive the following error when configuring the column:
image

Do you have an app where I could look into?

Thanks in advance!

Hey Julian,
unfortunately I don’t have a working app on this :frowning:
I just quickly crafted the configuration together to show how it could be done. I played around with it a little more but I also get an error message, even though its not the same as yours.

Sadly I don’t understand what going wrong here, as I configured all variable assignments :thinking:

1 Like

Hey @matthias.rauch,
Thanks for the response and your testing!
If you find a way to fix to circumvent the error, please let me know :slight_smile:

1 Like

The action should be only one element in the actions array (instead of one element per configuration - e.g. icon and label in your example). Apps-Documentation will be updated.
In the meantime, here’s an example for a column definition that worked for me (as it seems):

{
        "name": "Action",
        "type": "actions",
        "actions": [
          {
            "type": "endpoint",
            "endpoint": "ep_update_action_item",
            "label": "LABEL", // Label which will be shown
            "disableActionButtons": {
              "forTime": 5
            },
            "variableAssignments": [
              {
                "variableName": "id",
                "variableType": "STRING",
                "variableValueColumn": "incident_id"
              }
            ],
            "messages": { // Specific execution messages
              "started": {
                "headline": " ",
                "message": ""
              },
              "aborted": {
                "headline": "",
                "message": ""
              },
              "error": {
                "headline": "",
                "message": ""
              },
              "failed": {
                "headline": "",
                "message": ""
              },
              "success": {
                "headline": "",
                "message": ""
              }
            },
            "showSpecificErrorMessages": true
          }
        ]
      }
1 Like

Hey @Flogge,
Thanks! This works perfectly fine!