Reorder groups on a page based on order in a pop-up

Need help App Organization
1

I am building a one-page app that has multiple groups each containing different elements stacked top to bottom.

Different groups hide or show depending on the options chosen by the user. There is also a pop-up with a list of all the groups and the user can choose to hide and show groups there too with a toggle for each group to show/hide. There are just 2 columns on this pop-up (group title and a show/hide toggle) and a row for each group.

I would like to add the ability for the user to change the order of the groups on the pop-up (the one with the toggles to show/hide different groups) and have those groups be reordered on the main page based on the order chosen on the pop-up.

2

I see two options:

  • Use a drag/drop plugin and build the logic to drag a group into place. Here a video on this.
  • Another option is to create a number field for the data-type being show in the RG and sort it to ascend or descend. Create an input on the rg cell bound to the data-type where you can change the number of that cell … as well as all other cells.
3

Thanks for these suggestions.

Drag and drop isn’t the best solution for the type of UX I need on the main page but the drag and drop could be perfect to reorder the pop-up and create the sorting order for the main page.

Regarding the main page, the elements are not a repeating group. Each group is a different data type, with multiple elements inside each one including images, text, buttons etc. Think of each group as a different page/section in the app. Are you suggesting I put them all into a repeating group?

4

You can set a custom state somewhere on the page for each data type. You can do the sorting on each specific state and just use that as a reference to pull data.

So your repeating group data source will be based on a state.

Don’t forget to format the state as a list. This is how I handle advanced filtering when the default one tends to break.

5

Ah interesting.

I see how this could work if each group was just a repeating group but each group is a composite of different elements. So not all of the contents of each group would be an object in my database e.g., a text input box and also the arrangement of the elements is different in each group.