Favorite Button add in Reactive web application
Application Type


How to perform Favorite button in Reactive web application?

Example - If Customer want to particular product to add in favorite then he/she will click on Thumb Icon/Heart Icon It will add in favorite list and if Customer uncheck this Icon this particular product deleted from favorite List. 


To implement this functionality you need to consider a couple steps:

For the server-side functionality, assuming you want to persist these "favorites" in the database, you will probably need to add an attribute (or a full helper Entity) to your database to represent whether a Product is listed as a Customer's favorite. 

There are a handful of approaches to this depending on your specific needs (and existing DB), a somewhat general way could be: if you have a Customer (or the User) entity and a Product entity, you would need a third entity to model a many-to-many relationship between both (e.g. CustomerHasFavoriteProduct) that has a CustomerId and ProductId as attributes. This way, when a Customer clicks on the Thumb Icon/Heart, you would need to create a CustomerHasFavoriteProduct record in the database with the corresponding CustomerId and ProductId. For querying, you could generally use a With Or Without join over the new CustomerHasFavoriteProduct entity (e.g. Product With Or Without CustomerHasFavoriteProduct with join condition: Product.Id = CustomerHasFavoriteProduct.ProductId and Filter: CustomerHasFavoriteProduct.CustomerId = GetUserId() assuming you are using the Users table directly as your Customer entity) and use a CustomerHasFavoriteProduct.Id = NullIdentifier() to check if the Thumb/Heart Icon should be empty or full. When the user "unchecks" the item as favorite, you can simply delete the corresponding CustomerHasFavoriteProduct record.

Now, for the UI side of things, you could simply use the Icons available by default, I can see that OutSystems already offers all you need for the usual fill/no-fill distinction, and you can change the colors using CSS.  From here you would just make the icons link to an Action, such that you can implement the database logic mentioned before.

Hope that helps, also if possible make sure to share more details about your existing database so we can try to give you more specific advice.

Hi ,

Thank you Its working . 

Only one change You said  CustomerHasFavoriteProduct.Id = NullIdentifier() to check if the Thumb/Heart Icon should be empty or full .Its working for all products to check empty or full so I changed this for particular one product

GetProducts.List.Current.Products.Id = GetProducts.List.Current.CustomerHasFavoriteProduct.ProductId
Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.