List active states on a page

[scottb50]

It would be great to see what states are involved when editing a page.

It might also be useful to see states in the site search tool.

thoughts?

[DaveA]

Do you mean the custom states?

I think that is definitely one area where there could be an improvement. I was thinking of on an element dialog, a new tab with the list of CustomStates and a count, or something similar to improve the visibility.

[supernaturally]

Completely agree, I think being able to search for and view custom state usage information would be tremendously useful for iteration and changes to larger enterprise Bubble apps. It can be a real painpoint to sniff out various custom states in long workflows.

[nicolas.daprigny]

Same, I agree too ! And it could be the opportunity to have a Data source definied at the page level. So the same data source can be used by different RG (better than a hidden RG…)

Exemple :
Defining let’s say a Data Source A (at page level) : Do a search for X
a Repeating Group element could use this data source : Data Source A’ List of Thing X: until item 20
and its button “NEXT” would be shown only if Data source A’s List of Thing X :count > 20.

Then we have only one search for both the repeating group and the button conditionnal state.

[emmanuel]

You can already do this with a page load event and use the state wherever you need it.

Now listing them is a bit tricky with the current interface, and I’m not sure the editor is the right place, it may be the debugger since it’s a run mode value.

[DaveA]

At the moment, under certain conditions there is a list of custom states relevant to an element pops up for selecting a state to use, it would be adding this list to an elements dialog and having show its own custom states.

I never remember what elements have had states applied to them, and then when messing around I forget which states are in use, it is difficult to track them around the application.

[Arche]

Ay. A tab in the editor showing custom states and making it easier to manage them would be terrific.
Right now we are limited to creating them and setting their states and using their states. Effecitvely keeping track of them means using separate notes and/or a superbrain to memorize everything - should there be more than a couple on a page.

Imagine if we had a neat list by the element where we could:

• see the element’s custom states and their types
• add custom states
• delete custom states that are deemed obsolete when evolving the app

These three could be excessively tricky on the dev side to implement, so I’ll just list them as “nice to have”:

• edit the type of custom elements
• have a list of elements using or influencing the custom state
• see a list of different static values given to the custom state by different elements

[scottb50]

Could it be similar to the Elements Tree? Just as each element has an eyeball, this list would have an indicator that showed the presence of a state. Clicking on the element in the list behaves the same way in that it selects the element on the page.

And in a perfect world, there would be something here that indicated a state is attached. It wouldn’t have to be editable as it’s something that happens in the workflow.

It could conceivably live in the Conditions tab, as it’s a variable to which conditions can be defined. I wouldn’t make it editable in this panel, as that would be a mess to keep track of, but just for reference.

[emmanuel]

So I can think about 2 options here, both of them ending in a popup that shows the different states and their types.

Either an option in the Edit Menu that shows all the elements that have a state and list them (and maybe lets you delete them).

Or a button at the bottom of the Property Editor that shows the same popup, but only for the current element.

Happy to hear reactions. Showing this in the Property Editor is probably giving a little too much visibility to this feature which is very powerful, but more power users.

[Arche]

I think both of them should be there. Sometimes the page view is needed - to see what’s what. And then again the element view removes much of the unnecessary distractions. Could they also be linked? So that an element in the list could be clicked to display only relevant states. Or, vice versa - a “back” button to go from element to the page.
And when screen real estate comes into play then instead of button at the bottom of the property editor (which sometimes is quite long) why not add a fourth icon to its header - help, notes, states, close. Also helps to trim the time to find it as the header’s right side is always the same as opposed to the property editor window which differs a lot.

[scottb50]

I think a popup in the property is editor is a solid fit. The popup could look like the app search tool.

[supernaturally]

@emmanuel

shows all the elements that have a state and list them

+1 for the option that shows all the elements that have a state and list them (with a delete option).

[scottb50]

@emmanuel, if this is a pain to put in the property editor, would it be easier to put an icon in the element dropdown.

1. If there’s an element with a state(s), the icon is visible.
2. Clicking on icon shows popup.

[emmanuel]

We just added that

[New Feature] Element Inspector

We just added a UI element that will make editing complex pages easier. The Element Inspector shows the different custom states of an element, lets you edit them, and shows all the workflow items (events, actions) and other elements that refer the current element. Clicking on each entry will take you there. To reveal the Element Inspector, click on the Information icon in the title bar of the Property Editor. [image]