Dynamically structured data grid element

[caffeinatedwes]

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?

3. 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?

4. 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?

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

6. 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

[dorilama]

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
  

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)

[caffeinatedwes]

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

@dorilama

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”.

Got it, thank you.

@dorilama

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.

Thank you for confirming.

@dorilama

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.

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

[dorilama]

@caffeinatedwes

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

[khairul]

Funny you said this. I think the same. Webflow has taught me so much about html and css, and weweb does the same for javascript.

[avm]

I’m trying to do something similar here where I am setting up a default number of columns, and the user can toggle columns to show/hide and move the ordering of the columns. I also need the ability for the user to add additional columns to the table.

Do you think this approach you mentioned it the best way of going about this? I’m assuming i need to control which elements are visible like in the variable array below. I assume i can conditionally render a div that contains data from my API OR different elements based on the column index.

I’m trying to also figure out if the table would be performant if there were say, 20 columns displayed.

[
    { "type": "element", "key": "checkbox", "order": 0, "visible": true, "columnName": "Checkbox" },
    { "type": "element", "key": "record_detail_btn", "order": 0, "visible": true, "columnName": "Record Detail Button" },
    { "type": "element", "key": "option", "order": 0, "visible": true, "columnName": "Option Button" },
    { "type": "data",  "key": "city", "order": 2, "visible": true, "columnName": "City" },
    { "type": "data", "key": "address", "order": 1, "visible": true, "columnName": "Address" },
    { "type": "data", "key": "state", "order": 3, "visible": true, "columnName": "State" },
  ];