Dynamically structured data grid element

This is a long one. Thank you in advance for any replies!

I’m wondering about the best way to currently accomplish a desired functionality, if it’s even possible at all, or if I might not be thinking of this correctly.

A client of mine conducts surveys to their users, and they internally want to to a view a particular survey, see those survey responses, and take actions (ex. communicate with the user) depending on any particular user’s survey response.

Each survey has a few common elements—say name and email—but the surveys differ in their questions, the number of questions, and their responses.

It’s clear to me how I would create the dynamic survey pages (via a collection page), but it’s not clear to me how I would create a dynamically structured table element or dynamically structured data grid element. Here’s an example of what I’m trying to accomplish (gigs = surveys).

  1. I noticed I can only create these dynamic survey pages if I use a static collection (“for SEO purposes”. However, this will be an internal tool. Are the dynamic collection pages mainly for public-facing pages (similar to a la a CMS system)? Should I create the survey pages as regular pages and control which survey page the user is on via a variable?

  2. It looks like the current method of creating a data grid relies on establishing a fixed structure upfront(screenshot directly below), which wouldn’t work with my use case. This wouldn’t work from me because the particular table I want to create should have a dynamic structure. Am I understanding this correctly?

  1. With the custom HTML component, I noticed you could use custom Javascript and reference collection variables within that JavaScript , so I’m wondering if I might be able to write JavaScript there to create the dynamically structured tables. Would that be possible?

  2. If 3 is possible, would there be a way to make the table interactive to the extent that someone could do something like A) filter the table B) select a row of the table?

  3. If interactivity described in 4 is not possible, could this be accomplished by creating a custom component following the developers’ documentation?

  4. Am I over-complicating this by not structuring my database correctly? Here’s how I currently structure my database—

  • Surveys
    – Includes the survey’s attributes
  • Users
    – Includes the user’s attributes
  • Survey Responses
    – Includes survey as a field reference
    – Includes user as a field reference
    – Includes a JSON field to store the questions and response data for the particular survey

Thank you,

Wes

1 Like

Some thoughts about your questions.

If the surveys are from a dynamic collection you only need one page, pass the data of the current survey to the page (variable/query) and show the data the way you prefer. In this case you don’t need a “collection page”.

My understanding is that the data grid needs a fixed shape of data so it’s not for your case unless you know that the surveys have a fixed set of shapes so that you can configure multiple data grids to accommodate them.

You can use the custom HTML element or create a custom plugin following the developers’ documentation. Personally I prefer the custom plugin because it is more powerful and the dx is better.

As an alternative you can construct a dynamic table just nesting weweb containers and column.

  • create a container with vertical direction
  • In the container insert a columns element for the header, set the items to the array of keys, add a text in every cell
  • copy the header, remove the text in the cells and add another columns element set to row
  • set the row items to be a map of the values with the key of the current column item
    image

Of course this requires effort to style it in the proper way (especially if you have a lot of columns), and depends on the way you structure the data.

I made a basic example. You can extend this with other requirements you may need (eg column title different from keys in the values object)
chrome_8Xw88FMDCt

1 Like

Thank you so much for your thorough response and the example, Mariano. You answered all of my questions!

Got it, thank you. :+1:

Thank you for confirming.

It seems like it’s time to improve my JavaScript and learn Vue!

2 Likes

3 Likes