[Feature] Grid Widget for layouts

[somangshu]

Summary

A widget which can allow users to create a layout easily and help them make there applications responsive (for the grid content only).

• The users should be able to next multiple grids to create complex layout easily.
• The user should be able to set the number of sections inside the grid while nesting
• the grids inside should always inherit the parent height automatically

Example

Front conversations

[somangshu]

@riodeuno need to have a technical discussion around this

[momcilo-appsmith]

@somangshu do you know if we will be tackling this soon?

[somangshu]

@momcilo-appsmith that is right, We will need a technical discussion around this and then detail the PRD. We will take this up post that

[momcilo-appsmith]

@riodeuno @somangshu Should we have a discussion about this soon?

[momcilo-appsmith]

@somangshu If we were to build this widget we would also solve the issue linked below, right? https://github.com/appsmithorg/appsmith/issues/4138

[somangshu]

@momcilo-appsmith why do you say that, #4138 according to me is to show simple data in a tabular / list format.

[pranavkanade]

Feature request on intercom

[mnesarco]

Hi Friends,

Laying out a UI with absolute coordinates is is quite difficult and old fashioned. It is better to have basic Layout widgets to support responsiveness and to make the design process a lot more simple.

Some suggestions:

• RowLayout
• ColumnLayout
• GridLayout

[momcilo-appsmith]

@dilippitchika @somangshu @areyabhishek I think we should prioritize this issue soon. Would like to pick it up with our design team.

[somangshu]

@mnesarco thanks for adding more context here, We appreciate it, This will help us triage the issue further

[dilippitchika]

I think we need to do a POC on this using the list widget, i believe these are the requirements but would want to refine them once with you @somangshu @momcilo-appsmith

Creating a grid widget POC using the list widget The properties we need to expose to the devs for the POC are

1. No. of items in a row - A number which the dev configures to show the amount of list items horizontally. Ex - 3 items in a row.
2. Item horizontal spacing - Similar to item spacing field in the list we need a horizontal spacing field.

Out of scope

1. Responsiveness - Will need some discussions around it.

[somangshu]

@dilippitchika i think for 1.) We should do it based on the total available width and height and the item dimensions. User based configurations will have to be handled otherwise and might look unexpected or ugly.

Can we checkout some example in the market to identify the right behaviour, Meanwhile the discussion around list widget will resolve the other challenges that we might face on the grid widget. Right now doing a POC is not going to be possible.

[dilippitchika]

An internal user was looking for this - https://www.notion.so/appsmith/Rishabh-Kashyap-85ea180b031b42e58ef0f7a4910580cf

[pranavkanade]

Another user reached out to us about this - https://discord.com/channels/725602949748752515/1021675257897168937

[codefromrvk]

Another user reached out to us about this - https://discord.com/channels/725602949748752515/1021675257897168937

It would be great if we can dynamically add widgets when looping through an array

[dilippitchika]

Hello folks, we are picking up the grid widget. If this is still something that you are interested in, it would help us if we could understand your usecase. Please book a slot here to discuss this feature with us - https://calendly.com/dilip_pitchika/30min?month=2022-10

[dilippitchika]

[internal] Some initial research i did - https://www.notion.so/appsmith/Grid-widget-9fa1752c370e47339f5eec68a8794098 @shastry-gg

[shastryy]

[ Internal] Notion, Outlining work done on grid.

Parked until the responsive behaviour for 2d widgets are finalized, to avoid a platform change for a grid widget.

[n4l5u0r]

any updates on this ?

[michacassola]

I had asked about this in the community forum: https://community.appsmith.com/t/is-there-a-card-widget-or-horizontal-list-view/1685 Just so things are interlinked.

[somangshu]

@n4l5u0r @michacassola thanks for showing the interest here. This is still not prioritized, essentially we will be picking this up after shipping the responsiveness project.

While we triage this further, can you folks help us understand you use case?

[Charuru]

Yes please

[ashiqdcm]

I want a grid like widget shown in the image, with invisible buttons, which means i can do multiple selection and later i can build logic to get each selected items details using form widget, then build logic/calculations.

Need to be auto-layout supported for mobile devices too.

I see this is open since 2021, is there plan to get this into roadmap ?

[OverWeo]

Any updates?

[somangshu]

@ashiqdcm @DeskYT As pointed out before we will pick this up after the new responsive UI Building paradigm ships.

[ashiqdcm]

@ashiqdcm @DeskYT As pointed out before we will pick this up after the new responsive UI Building paradigm ships.

OK got it, nice to have high level timeline if that is there already.

[somangshu]

We expect this to be picked up post Q2 next year

[umeshdiwekarrapiddata]

Hey guys any updates on the grid layout under the list widget

[augustopena]

hi, any updates on this?

[somangshu]

Hey @augustopena @umeshdiwekarrapiddata we have recently launched the custom widget which could help you with your use case. Otherwise the grid widget as a building block is getting planned under a major re-design of our editor coming this year.

[augustopena]

Thanks! there is any example/template of the code that I need to create this grid layout with the custom widget?

[tmedford]

@Nikhil-Nandagopal Is this something still on track for this year?

[rahulbarwal]

Hey @tmedford, This will be prioritised in future, but unfortunately no plans at the moment. The closest thing right now is using list widget.

[tmedford]

@rahulbarwal If there was a technical design, I would consider building a widget. The complexities we have found are the strict tie to px placement and the fact that you can't have multiple drag/canvas points because the height calculation gets off with the different canvas.

[rahulbarwal]

@tmedford Can you share more about your use case?

[tmedford]

@rahulbarwal use case is to make something work for mobile and desktop screen where the widget know how to change the stacking, positioning of the sub canvas. So go from: XX To X

Or XXX To XX X

Where each X represents a canvas. Similar to https://mui.com/material-ui/react-grid where each grid would be a collection of independent canvases with their own height. This is where we ran into problems given how appsmith determines height of parent when there could be N different sub canvases.

[ichik]

@tmedford Hi, lead design systems designer for Appsmith's widgets here. Would you be open to discussing your needs regarding this feature with us? You can schedule a call with me using this link, if none of those times works please do let me know.

[umeshdiwekarrapiddata]

Hey @tmedford, This will be prioritised in future, but unfortunately no plans at the moment. The closest thing right now is using list widget.

List widget we can use but it has some limitations. The height of the list is fixed, if we have more data in a single list item we need to scroll the data within the list but what we want is for it to adjust its height if we have more data