Relational Selection Panel for Insights Variable #15452
Conversation
|
@benhaynes any thoughts on the UX of that multi-select list style? I'd like the dropdown style to stay centered (as it's a single input), but think that the list style should be top-aligned. Also not entirely sure about using a "full" primary button in the panel there 🤔 |
|
Very excited for this! Great job @azrikahar & @br41nslug 👏🏻 |
If we're keeping with this standard interface design (which we are), then I agree that the multi-select list should be top-aligned (similar padding from the heading as other panels). If there's not enough vertical height, then the bottom should crop and the panel would scroll to view the rest. For the horizontal layout, the rows should be 100% width down to a min-width (I think they are)... but ideally we have the two buttons be 50%/50% (with the standard gap between), until the panel width gets too small... and then they would snap to be 100%/100% stacked. Icing on the cake, it'd be nice if the action buttons were sticky to the bottom (so they don't scroll off) when the rows pushed the data beyond the vertical height. Wondering if it makes sense to "pin" these buttons to the bottom even if the rows don't push them there. This also assumes these panels will scroll as I'm imagining. 😆 Not sure about making the primary buttons more subdued... could try outline, but there's no standard for that yet. |
|
@azrikahar can you A/B between outline buttons and text only style? The full primary buttons are a little too much there |
Sure!
Does the 50%/50% mean something like this? (the example uses outline for now) It might be too full-width if the panel is wider I think, but I might also be misinterpreting here 😄
|
|
|
|
@azrikahar Lets go text only and top-align the list of items 🙂 |
Update:
|
|
Looks great, feels great, big fan |
|
Whoa, this turned out amazing!! |
* init * add field (variable key) * panel index option * remove custom component * attempt at implementing virtual m2o logic * adding o2m layout * moved drawer and implementing display items for o2m * removed o2m draggable, added limit for o2m and implemented diplay templates * style fix for single relation * fixed deselect for o2m * enforce multi limit * fixed adding items for o2m and clear all button * abstracted away displayItem logic and cleaned up code * add selection to drawer-collection * fix graphql error on init * only store an array for multiple relations * udated var names * use dense display for 5 items and up * use full width for the limit option * fixed deselect for single relation * removed unused notices * type fix * clear the cache when switching collections added required flags in options updated label to be in line with the variable panel * added multiple label * fix time series options filter it should attempt to JSON.parse() when possible, and skip parsing when there's undefined values * remove unused styles * prevent negative limit * keep multiple-relation top-aligned * fixed pronblem with deselecting/reselecting items * keep action buttons sticky at the bottom * text-only styling for multiple-relation buttons * use <button> and remove unnecessary styles Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com> Co-authored-by: ian <licitdev@gmail.com>
* init * add field (variable key) * panel index option * remove custom component * attempt at implementing virtual m2o logic * adding o2m layout * moved drawer and implementing display items for o2m * removed o2m draggable, added limit for o2m and implemented diplay templates * style fix for single relation * fixed deselect for o2m * enforce multi limit * fixed adding items for o2m and clear all button * abstracted away displayItem logic and cleaned up code * add selection to drawer-collection * fix graphql error on init * only store an array for multiple relations * udated var names * use dense display for 5 items and up * use full width for the limit option * fixed deselect for single relation * removed unused notices * type fix * clear the cache when switching collections added required flags in options updated label to be in line with the variable panel * added multiple label * fix time series options filter it should attempt to JSON.parse() when possible, and skip parsing when there's undefined values * remove unused styles * prevent negative limit * keep multiple-relation top-aligned * fixed pronblem with deselecting/reselecting items * keep action buttons sticky at the bottom * text-only styling for multiple-relation buttons * use <button> and remove unnecessary styles Co-authored-by: Azri Kahar <42867097+azrikahar@users.noreply.github.com> Co-authored-by: ian <licitdev@gmail.com>
Description
Add relational selection panel to insights variables.
The panel has the following options implemented:
Selecting the related collection
Select single or multiple (m2o for single, o2m for multiple)
Set a display template
Set a filter to limit the selectable items (it throws an error on selecting more)
A soft limit when selecting multiple
The o2m like interface has an added "Clear Items" button
Type of Change
Requirements Checklist
If adding a new feature: