[Epic] List/Grid Widget

[Nikhil-Nandagopal]

Summary

Provide a grid widget that can be used to display repetitive data in a nontabular fashion. The repetitive views should be configurable and the number should be driven by the data set.

Motivation

Users use grids to show dynamic datasets in a custom list/grid fashion.

Additional Details

The Grid widget should contain the following properties
numColumns: number
dataSet: Object[]
isVisible: boolean

The widget renders multiple cells where each cell is an object of the dataset field.
The size of the cells must be resizable but all cells must have the same size and elements. Each cell should support dragging widgets into it which will be replicated to neighboring cells. All widgets in a cell share the exact same properties as the widgets in every other cell. Widgets in a cell can be bound to the data which represents the cell using the currentRow property.

[github-actions]

We have found issues that are potential duplicates:

• [[Feature] iframe Widget #1726] [Feature] iFrame Widget (77.78%)
  If any of the issues listed above are a duplicate, please consider closing this issue & upvoting the original one.
  Alternatively, if neither of the listed issues addresses your feature/bug, keep this issue open.

[github-actions]

We have found issues that are potential duplicates:

• [[Feature] Switch Widget #1760] [Feature] Switch Widget (72.22%)

• [[Feature] iframe Widget #1726] [Feature] iFrame Widget (77.78%)
  If any of the issues listed above are a duplicate, please consider closing this issue & upvoting the original one.
  Alternatively, if neither of the listed issues addresses your feature/bug, keep this issue open.

[areyabhishek]

@Nikhil-Nandagopal Can each of the cards be clicked to open a modal or trigger an action? Like imagine the calendar for a month, and the user wants to click each date to open a modal. Would that be possible?

[Nikhil-Nandagopal]

Good point there should be an onListItemClicked action selector as well.

[areyabhishek]

@Nikhil-Nandagopal I spoke with @Debsourabh today and he said we are considering making the list widget using many containers.
I don't think it's a good idea because every container has an explicit border and padding which will:

1. Make the cards look bad(contemporary designs don't have explicit borders)
2. Reduce the size of items inside each card

A grid widget without containers doesn't eliminate the possibility of using containers because the user can always drag a container inside the widget.

Instead, we should have a subtle grid widget without explicit borders unless the user specifically requests for one.

Grid widget when selected(with appsmith grid visible and nothing inside)

Grid widget with items inside in selected state

Grid widget with items inside without being selected

[Debsourabh]

Here is the first Draft for the Figma File.

https://www.figma.com/file/hsHKmSVcoQVKOoTXOIs7rQ/New-Widgets?node-id=72%3A81

A couple of things:

1. The assumption is that we are not treating the cards like a container. They might look visually the same but they behave differently. In the case of a container, the widgets resize to the lowest size possible. In the case of the grid, we will not resize the widget but rather show a part of it if the card is too small to accommodate it.
2. This is still in the experimental stage. We are experimenting with this. If this does not work out technically we will revert back to the original idea of using containers.
3. This is designed with the following assumptions.
   A. Only one widget per card/cell will be allowed
   B. The first widget drop will be replicated across the grid.
   C. If the user drops a new widget to the existing grid, we will not allow it. This is because we currently do not allow swapping widgets. If we allow them to drag and drop widgets in the widget we will need to let that feature come to the canvas too.
   D. We let them decide the columns but rows = datasets.
   E. @areyabhishek mentioned the use of text and image but at this point in time, the design only handles one widget per cell/card.

[Debsourabh]

Alternative Approach

We let them use the placeholder grid widget as a template and the same can be used across the grid. @jsartisan had some ideas around this.

[areyabhishek]

@Debsourabh Why do we have to be limited to only one widget per card? If the card size is big enough, can't we let multiple widgets?
We need a property control for number of rows. @jsartisan Could you comment your thoughts here?

[jsartisan]

@areyabhishek According to the problem statement, we want to show a widget that will repeat itself based on some data ( from API/DB query). So it's basically a kind of list widget.

Let's say we want to render a list like this whose data comes from an API:

Now, each list item will consist of multiple widgets like Text, Buttons, etc. Let's call it a template. The grid/list widget will repeat this template to create the list.

This is how I was thinking to achieve this:

1. User will create a template ( just like Figma does with components - https://www.figma.com/blog/components-in-figma/)
2. Now on the page area, the user can use our List/Grid widget and set it to use the template we created. Users can set the data of this widget to an API/DB query and it will repeat the template to create the desired list view.

[Nikhil-Nandagopal]

I agree with not having a container for each cell. The cell should act as a container but not necessarily look like one i.e allow multiple widgets to be dropped inside it.

The number of rows is inferred from the data property of the list widget just like how it is for a table widget. This allows users to bind the widgets inside a cell the same way they will for the table i.e add {{ currentRow.firstName }} to a text widget in one cell will replicate it to all other cells

@jsartisan Components is a great idea for reusability and an awesome feature add but I don't see why it should be integral to creating a list widget. I am wondering why we can't just create a component like this which you can drag any widget into and it auto replicates the widget to the other cells?

[Nikhil-Nandagopal]

Can we take a few use cases and design the end state of what they should look like and see how the list widget should achieve it?

Here are a few examples of usages of lists. The repeatable items are the ones in the list

[jsartisan]

@jsartisan Components is a great idea for reusability and an awesome feature add but I don't see why it should be integral to creating a list widget. I am wondering why we can't just create a component like this which you can drag any widget into and it auto replicates the widget to the other cells?

Yes, we can use the widget as a template itself but in that case, the user won't be able to set the height and width of the widget as we do with the table widget. The good reason for separating the template from the grid widget would be the user can control the layout of the template and widget separately. Currently, this sounds confusing if we go with the single widget which acts as a template also.

[Debsourabh]

This is the WIP design file for the same.

https://www.figma.com/file/hsHKmSVcoQVKOoTXOIs7rQ/New-Widgets?node-id=123%3A0

Navigate to List/Grid Widget Explorations

A couple of pointers :

1. Submitting this for review. These aren't finalized by the team yet. This is the first draft.
2. Have tried to achieve the above-mentioned screenshots and what will they look like in Appsmith with the current widgets and the grid.
3. There are some irregularities in the Visual design. This is because I wanted to show they will look with our current grid. Since we do not offer an extremely granular way to move things around we might end up with odd-looking spaces. So some things which do not look very polished are for the same reason especially on screens that have the replicated UI.

[areyabhishek]

@Nikhil-Nandagopal

1. Do we allow users to create multiple columns? Or can they only create a single column with multiple rows? Multiple columns means a grid widget, single column means a list widget.
2. Which of these are controlled by data: columns, rows, or both?

The grid widget's absolute size will be fixed by the user and will act as the viewport. There'll be a scroll introduced according to the number of cards chosen by the user. They can control if they want a horizontal scroll or a vertical scroll.

Properties(writing it in English that'll be visible to users in the property pane):

Data properties:

1. Number of columns(JS)
2. Number of rows(JS)

Action properties:

1. Visibility
2. On-click action for entire card

Visual properties:

1. Background color
2. Gap between cells(optional because we can choose a default gap)
3. Border between cells(optional)
4. Corner radius(optional)
5. Scroll(necessary to choose horizontal or vertical scroll. default will be vertical scroll)

Thoughts on this? We can reduce or add more here?

@Debsourabh some of the visual properties are a bit extra and we can add them a little later because they aren't necessary for the widget to function properly.

[Nikhil-Nandagopal]

@areyabhishek In both cases the number of cells is what is determined by the data and the user can fix either the rows or the columns depending on whether it is a horizontal or vertical scroll.
If it's a vertical scroll, columns need to be set & if it's a horizontal scroll, rows need to be set. This needs to be conditional based on the scroll type value because for vertical scroll, the data + columns determine how many rows are there and for horizontal scroll the data + rows determine how many columns are there.

Properties look good except visibility not being an action property but a visual property
Data properties need an additional property which is the data of the list

We can take a call if we think this should be 2 separate widgets (list & grid) instead of 1 common widget which might aid discovery

[imfht]

@Nikhil-Nandagopal Hi. Does this issue have any update? Looks like the list widget still only support one column on one row.

In My case, I'll want to put multi image in that way.

The images url is from a data query, do I have any simple way to do that?

[imfht]

This feature is not available.
#7256

[tmedford-zuora]

Any update?

[Nikhil-Nandagopal]

@tmedford-zuora we're actively working on a new UI builder that will enable this functionality and also ensure that it is responsive. We'd be happy to add you to the beta for this if you are interested. The feature is being tracked here #7256