How to build a like button feature?

❓ Ask Anything
1

I’m having trouble building a like button feature in a modal. I got it working in a list (although slow), but struggling with the modal.

I filmed this video with the detail of my problem:

Loom Video

Is there perhaps a better way to build this? So the like count shows instantly without a 2 second delay?

And how can i make the like count refresh after clicking the like button?

2

Q1:
The best way to refresh the likes is to refresh the current item in the list immediately after inserting the like into the database.for example, as shown in the figure below

image
image476×994 39 KB

1 Like
3

The difference between Refresh Cell and Refresh is that the former only refreshes a specific item, while the latter refreshes the entire list.

4

Regarding the second question, I suspect that you directly copied some configurations from outside the pop-up window into the pop-up window itself. This can actually cause some issues because, in the current version, many elements inside the pop-up window cannot be directly treated as the same as the data inside the pop-up window. The solution is to add a separate post-type data in the Data_source of the current page, and control its ID with a new page variable. Then, when you click to open the pop-up window from outside, update this page variable.

5

Thanks, will try this. I’m not able to test this yet because my mirror preview won’t open, it just infinitely loads. Is this maybe because you’re open in my project from the link I emailed you?

6

The way I handled this was directly with a page variable of type post (as opposed to a data source of type post). However, the like count won’t automatically change in the modal (even though a new like is successfully being added to the database), the count number only updates on page refresh, because I can’t use the update cell since the modal isn’t a cell or list.

7

Hello, this is a scenario I’ve configured that includes list operations and display in a pop-up window after clicking. Here is my project link: MOMEN | Build web apps without code

The main steps are as follows:

  1. Define Page Variables:
  • Define two bigint type page variables on the page: cell_index and post_id. These are used for the data displayed in the pop-up window, as list item data cannot be directly bound to the pop-up.
  1. Create Data Source:
  • Define a data source on the page: post_detail. Use the post_id page variable as the filter condition. The pop-up data for the list item click uses post_detail.
  1. Bind Post List:
  • Bind the post database to the post list (please ensure you have added a one-to-many relationship between post and like).
  1. Conditional View in List Items:
  • Add a conditional view in the post list items to display three states: not logged in, not liked, and liked.
  1. Button Configurations:
  • To see the button configurations, you can search for the component IDs in my shared project: like button cp_8387dbe8, unlike button cp_cf1ba619, and view details button m8cx3eys.

Key points to note:

  • Like Count Calculation:

    • I didn’t use a formula to calculate the like count. Instead, I used the count of the associated relationship in the post list item data, plus filter_by_current_login_user_id. After configuring the count, you can click to further configure the filter, so don’t forget to do that.

  • Page Refresh vs. List Item Refresh:

    • Refreshing the entire page requires a data source to be configured on the page, such as in step 2. Triggering this will refresh the entire page. Refreshing cell, on the other hand, refreshes a specific item in a list, not the entire list. You can configure the index of a specific list to specify which item to refresh.
8

Sorry, that’s not it. The mirror not opening is most likely due to your configuration error.

9

Thanks for your effort on this. However, the Data and Actions tabs aren’t clickable for me so so am not able to explore this project you sent.

Screenshot 2025-03-17 at 14.08.07
Screenshot 2025-03-17 at 14.08.071910×768 58.1 KB

10

It was working before though even with all the configuration errors?

11

Yes, it might be because those previous validation errors do not cause the mirror to fail to open, but some subsequent errors will cause this. So generally speaking, when encountering errors, it’s best not to skip them first.

1 Like
12

My apologies, the read-only link I sent you before was probably too limited. I have now given you edit access.

1 Like
13

Hi Eric, thanks again for this, I managed to get it all configured as you proposed, however, there is now a loading speed issue when opening a modal, see this video:

loom vid

14

This does look a bit slow, but it’s not that slow on my computer. I’ll have the engineering team check to see if there are other issues

1 Like