-
Notifications
You must be signed in to change notification settings - Fork 3.7k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Epic] List/Grid Widget #1427
Comments
We have found issues that are potential duplicates:
|
We have found issues that are potential duplicates:
|
@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? |
Good point there should be an onListItemClicked action selector as well. |
@Nikhil-Nandagopal I spoke with @Debsourabh today and he said we are considering making the list widget using many containers.
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) |
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:
|
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. |
@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? |
@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:
|
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? |
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. |
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 :
|
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:
Action properties:
Visual properties:
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. |
@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. Properties look good except visibility not being an action property but a visual property 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 |
@Nikhil-Nandagopal Hi. Does this issue have any update? Looks like the list widget still only support one column on one row. |
This feature is not available. |
Any update? |
@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 |
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.
The text was updated successfully, but these errors were encountered: