[New Plugin] BNS - Global Custom States [EDIT]

Showcase Plugins
1

Hi everyone,

With @bestbubbledev , we’re very proud to present you another new plugin BNS - Global Custom State: BNS - Global Custom State Plugin | Bubble

a message broadcaster (1)
a message broadcaster (1)1024×1024 88.9 KB

Tutorial

Description

(BNS - Global Custom State · BNS)
This plugin allows you to share Global Custom States between all the reusables and repeating groups (however deeply nested) on a page level.

You can create Global Custom States dynamically and set their values dynamically.

BNS - Global Custom State - Frame 1.jpg

Demo

You can access the demo here : PLugin BNS - Global Custom State Demo

Instructions

Drop the plugin element where you want to access your Global Custom State.

Hint: it is better, for use, to create the Global Custom States at the page level. However, you can create it whenever you want.

Note: if the element is dropped into a collapsed element (group, reusable element, popup), it won’t be created nor accessible until the element is made visible.

You can then set :

  • the name of your Global Custom State
  • its datatype
  • its Default Value
  • its Default List

image.png

Each Global Custom State can handle a single value AND a list, both of the same datatype. You can respectively access the single value and the list value by using <plugin element’s name>'s Global Custom State Value and <plugin element’s name>'s Global Custom State List.

To set the value in a workflow (like the “set states of an element” action) to the Single Value or the List Value by using the respective actions Set State Value and Set State List.

image.pngimage.png

Use cases

Whenever you need to share a value through all the element that are on a page, whether directly on the page or even however deeply nested into reusable elements and repeating groups.

Global Custom States can be dynamically created (ie if for a Global Custom State Element you set its name dynamically, it’ll create as many GCS Values as there’re names).

Note : it works only at the page level and not app wide. Moreover, whenever you refresh the page, all the Global Custom States values are reset.

Any comment or feedback very very much appreciated :slight_smile:

Best regards,

Guillaume Maison
BestNocodeStudio.com

7 Likes
2

Looks like it has the potential tial to be a great tool. Eager to try it out.

I’m feedback is that if you get the data to be consistent upon refreshed and other pages you’d be golden!

I often need such feature and use url parameters to e sure refresh and navigation but it’s a pain to set up.for each app individually

3

it’s on the roadmap :slight_smile:

2 Likes
4

You know have a tutorial made by @bestbubbledev here : https://www.youtube.com/watch?v=X65AlR-aSw8

5

Hi there, will there be a possibility to store multiple states in 1 element? This is to minimize the number of elements in the main page level. :slight_smile:

6

Another thing, can values from these, realtime? Like when a table changes, also update the values from this global state?

7

If you dynamically change the name of the Global Custom State element, it’ll create dynamically a new Global Custom State with this new name while keeping the first one too. Both will be available (if you dynamically change the name accordingly).

But they’ll be both of the same datatype.

8

It’s just frontend.
So, if you set the Default value to something coming from the DB (like with a Do Search), it’ll change the value and broadcast it to all other GCS elements pointing to this GCS.

9

  1. What happens in the background if you have 2 GCS elements with the same state name and same default values? Does the app still loads or consumes 2 searches?

  2. Also what happens when you have 2 GCS with the same state name but with different default values? What will be the resulting value?

Let’s say, the 2 gcs element both in different reusable element, same state name, different default values. Upon page load, both reusable elements are present. What will be the value of that state name?

10
  1. What happens in the background if you have 2 GCS elements with the same state name and same default values? Does the app still loads or consumes 2 searches?

Yes it will consume 2 searches. You should set default value to only 1 of them. As i don’t master how Bubble sequence the element’s creation, i would suggest to set the default value onto the element dropped on the page.

  1. Also what happens when you have 2 GCS with the same state name but with different default values? What will be the resulting value?

Only the first one to be created handle the value. Every other GCS created with same name & datatype will get the first GCS value. The only way after that to modify the value is to use the action Set State Value (or to have a dynamic default value).

Let’s say, the 2 gcs element both in different reusable element, same state name, different default values. Upon page load, both reusable elements are present. What will be the value of that state name?

The value of the first one to be created… But i don’t know how Bubble handle the plugin element creation order … Tests must be made… I did some but never get very conclusive …

11

Thanks for the answers. Helped me very much. :smiley:

Do you have plans to support Realtime Values for “Set State Value”?
I mean, use an action to set the value without losing the realtime functionality of that value/search?

12

When you drop the element on a page, you can set its value (single as list).

But when you use the Set State Value action, it overrides the default value and is definitely set to the value used with the action.

What you’re asking would mean to handle for the single & the list values a sibbling that would remain the default value and the current value.

Is that what you mean ?

13

A bit of information about rules of precedence when using multiple GCS elements for 1 gcs name :

  1. when the first GCS element is created, it becomes “the master” and sets the value to its default value field
  2. when following GCS elements are created onto the same gcs name, the default value that might be set here is ignored.
  3. if “the master” value is modified (with a dynamic do search for example), then all the other values are modified “instantaneously” (the Bubble way).
  4. if any of the GCS elements (master as not master) uses “Set State Value”, the default value is overridden and the “last one that have set State Value” is right.
14

Guillaume, I am wondering if there is a timetable for adding the ability to retain values on page refresh and other pages. That feature would be a big-time game changer!

15

it’s on the roadmap, yes :slight_smile:
To be saved in localStorage …

Except that i can’t save values that are “dynamic” → ie i can save the content of a list, not the definition of that content (ie the “Do Search”).

16

What happens if you create two GCS elements with the same “State Name” and different data types ? Wouldn’t it be better to have 2 different elements: a “master” child where you define the state name and all the other info, and then a “child” element, where you only select the master it refers to (from a limited list). That would clarify everything.

17

Nothing happens: the “master” in classification is Datatype and then gcs name.
There can be only one GCS name per datatype (that’s how they’re connected) throughout the page.

So you can give same name to different GCS that have different datatypes,
they’re completely distinct (except for the name :wink: ).

You have to handle the confusion (using the same name but with different datatypes) by yourself.

18

Well, I got the following error message:

image
image848×514 43.4 KB

Here’s what I did:

  1. created a “GCS States” option set, as you suggested, to avoid mispelling. One option’s Display value was “debug_mode”

    image
    image891×601 40.1 KB

  2. created a GCS element in the page, as follows:

  • element name is “:triangular_flag_on_post:debug_mode gcs”,
  • state name is the “GCS State” option’s “debug_mode” 's Display value,
  • data type is “yes/no”,
  • default value is “no”
    image

  1. copy and pasted this GCS element into my resuable “Header” element (a floating group)
    removed the default value (but kept the has the same “Element Name”, “State Name” and “State Datatype”)

  2. created a button with a workflow to set the “debug_mode” GCS value to “yes”:
    image

What is really strange is that it the drop down, I see the list of the GCS “element names”, and not GCS “State Names”. Is that normal ?
image

image

When I click on the button, I get the error message shown above.

19

OK, I found the source of problem. The bug appears when the GCS element are hidden. I move them to a “always visible” group, and it works now! :+1:

You clearly indicated in this issue in tutorial, so “my bad”.

So great, plugin, it will certainly make my life easier !!! Thanks.

A few suggestions/requests after spending a few hours using them:

  1. Separate the state creation and the state referral:
  • a. creation: you define the state name, state type, and state default value
  • b. referrerral: you select the state you want in a drop down list (so no room for spelling errors/confusion)

  1. don’t have “values” and “list” in the same state. I can’t see a use case for this, and its very confusing. If users needs both, then can create 2 separate states, on of which would have a “list” option checked.

  2. in expressions, we should be able to refer to the value directly, simply by selecting the state name, without have to then select “'s Global Custom State Value”. This extra step is redundant (I don’t see a use for the other options), and takes up a lot of space in the express. If you really want to keep it, shorten then name (just “'s Value”)
    image

  3. Ideally, it should also work if the elements are hidden

  4. Ideally, as suggestion by others, states should be defined outside the page, and work accross all pages, and be persistant for page reload or session change.

I’m looking forward to your updates ! Thanks for the great plugin

20

Hi !

  1. Separate the state creation and the state referral:
  • a. creation: you define the state name, state type, and state default value
  • b. referrerral: you select the state you want in a drop down list (so no room for spelling errors/confusion)
    I’ll check on it how it’s possible.
  1. don’t have “values” and “list” in the same state. I can’t see a use case for this, and its very confusing. If users needs both, then can create 2 separate states, on of which would have a “list” option checked.

i’m a bit lazy. it’s easier for me to maintain 1 element rather than 2 :slight_smile:

  1. in expressions, we should be able to refer to the value directly, simply by selecting the state name, without have to then select “'s Global Custom State Value”. This extra step is redundant (I don’t see a use for the other options), and takes up a lot of space in the express. If you really want to keep it, shorten then name (just “'s Value”)

That is not possible w/ Bubble. You can access a plugin value only through Exposed States, like this. You can’t have just the element’s name. As for any other element, btw (cf accessing an Input’s value :slight_smile: )

  1. Ideally, it should also work if the elements are hidden

i’d love too… But as long as the element (group, …) containing the plugin element is not created the Bubble way, it’s impossible (the element is not created). That works only with Bubble Datasource coming from its own DB (if i’ve understood well).

  1. Ideally, as suggestion by others, states should be defined outside the page, and work accross all pages, and be persistant for page reload or session change.
    On the roadmap :slight_smile: