I’m building a product information management app where products are organized into product series. I’ve structured it so that:
I have an attribute table where I define all the possible attributes used in the app.
For each product series, I assign a specific set of attributes relevant to the products in that series.
I use an automation that dynamically creates product attribute value records when a new product is added.
Users can then populate the values of these attributes from a product details page.
But now users want to compare products within a series more easily. They’ve requested a matrix or pivot-style view at the product series level where they can see all product attribute values side-by-side. This would help them make quick comparisons between products.
I’m not sure how to approach this with my current setup of dynamically populating attributes for each product. Alternatively, if I hardcode all attributes as fields on the product table, I would need to manually control which attributes are displayed based on the product series, which doesn’t seem scalable and would require a more maintenance.
Has anyone implemented something similar or can offer advice on the best way to achieve this comparison view without resorting to hardcoding everything?
I don’t have any solid advice or an example, but if it were me, I’d probably store attributes for each product as JSON in a column in the product table. Then when products are selected for comparison, I’d probably create a javascript column to process through the JSON from the selected products and build an HTML table to show the comparison of each selected product.
Figure out your JSON structure and how to fill it, then pass a snippet of it into ChatGPT and ask it to generate javascript to parse through the JSON and build an HTML table comparing attributes from two or more products. You can display that HTML using a Rich Text component.
How is the styling applied to the table?
Are you using inline styling, or is it applied through Settings->Appearance?
If the latter, you may need to enable the “Preview Custom CSS” setting.
