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.
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?
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.
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.