https://dummyjson.com/products
above api provides product details,
1) How to create a dropdown tags/multi select dropdown on screen containing the tags received from above api and no duplicates.
2) on the same screen a table/list off all the products fetched from api and can be filtered based on tags selected on the above dropdown tags
Dear @Suresh kumar ,
Worked Example :
https://personal-oqbcw6a2.outsystemscloud.com/MultiSelectDropdownwithTags/Product?_ts=638886410662163702
Part 1: Data Fetching and Preparation
These steps outline how to retrieve the data and prepare it for your application screen.
Consume the API: First, fetch the product data from your API endpoint (e.g., https://dummyjson.com/products). This is the primary source of all information.
Store the Master Data: Once the data is successfully fetched, store the complete array of products in a local state variable. This will serve as your original "master list" that you can always use for filtering.
Extract and Deduplicate Tags: Iterate through your master product list. For each product, extract its tags (or category in the case of the dummyjson API). To create a clean list for your dropdown, collect all these tags and remove any duplicates. The most efficient way to do this is by adding them to a Set and then converting the Set back into an array.
Populate the Filter UI: Use this final, unique list of tags to dynamically populate the options in your multi-select filter dropdown.
Part 2: Implementing the Filter Logic
This is how the application should react when a user interacts with the filter.
Listen for User Selection: Attach an event listener to the tags dropdown that triggers a function whenever the user's selection changes.
Handle the Filter Action: Inside this function, get the currently selected tags.
Case 1: No Tags Selected. If the user has cleared all selections, the list of selected tags will be empty. In this case, display the original, unfiltered master product list from Part 1.
Case 2: One or More Tags Selected. If the user has selected tags, you must filter the master product list. Create a new, temporary array for the filtered results.
Apply the Filter Criteria: Iterate through each product in your master list. For a product to be included in the filtered results, its own list of tags must contain all of the tags that the user has selected.
Example: If the user selects ["Electronics", "Sale"], only show products that have both "Electronics" AND "Sale" in their tags.
Render the Filtered Results: Clear the current view and display only the products from the new filtered list. Update any result counters (e.g., "Showing 5 of 30 products") to reflect the change.
Hi! I was working on a sample OML for you, but I see @Kerollos Adel already provided a solid working example.
As an alternative, you could consider saving the data to the database using the API and a timer. This approach can simplify the rest of the implementation, as it lets you take advantage of OutSystems' built-in features like pagination, sorting and easier filtering in the aggregate.
Based on the API response structure, your data model could look something like this:
Hi @Suresh kumar ,
Test via this link :- https://personal-wxumhzng.outsystemscloud.com/TimesAPICall/Test_ProductAPILet me know if you need .oml file.
Screenshot :