Bubble and Layers

Hi all, so in short I’m trying to make a mobile app by using groups on a few pages for faster loading, but I’m having some real difficulties in organising and arranging the app as I would like. Assume I’m developing the app as a number of layers, with each layer being a group.

  • Cannot easily control which elements are at the front/middle or back. I can right click but it’s problematic. Also I’m getting one group fall into and become a child of another group accidentally time and time again. Anyone got a better way of managing layers - element tree is not ideal.

  • Some groups/layers with an opaque style and brought to front still have elements from background groups visible - anyone else have this?

Hi worthaz,

to organize groups on one page you can use buttons with workflows that show/hide groups.
Or states that are yes/no or of type number. Only when a state is a certain value, will a group show otherwise it will be hidden.

I created 2 youtube videos on this: https://www.youtube.com/watch?v=LDFAR0XQUfY&list=PLmgeVDcBxHA_b_uneKGYRBWKQ4OVDCE8r

hope it helps, regards Julius

1 Like

Hi @worthaz

I similar case in my app designed for mobile. Below is the way I did, hope this is what you need.

Let say you organize your groups as follow:
Group 1

  • Sub Group 11
  • Sub Group 12
    Group 2
  • Sub Group 21
  • Sub Group 22
    You may extentd the structure up to 3,4 layers… and so on no matter how many layer you want to have

Here is the way to navigate across groups, no matter at which layer the group you want to go in an action.

  1. All groups shall be hidden on page load
  2. Put custom state on page, let say “view” (text)
  3. This is the key. Set condition for each group:
    "When page’s view truncated by x (layer of the group you want to be visible) is yyy (number of group in the structure)–>this group is visible.
    for example
    condition for group 2 shall be:
    “When page’s view truncated by 1 is 2–>this group is visible”
    condition for group 21 shall be:
    “When page’s view truncated by 2 is 21–>this group is visible”
  4. To navigate to a certain group you can simply set action in a workflow:
    “Set state view of page, va!ue= yy (number of destination group)”
    For example as above condition in point 3:
    Action to go to page 2:
    “Set state view of page, value=2”
    Action to go to page 21:
    " Set state view of page, value=21"
    You can use this action to simply navigate from every group to every other group in you structure, no need to consider the layers.

Additional usefull tips.
Let’s say after navigate from group 11 to group 21, you may want to have simple WF triggered by an element or other WF to navigate back. To achieve this:

  1. Add addtional custom state for each group= “from” (text)
  2. Add an action in WF in group 11 to navigate to group 21:
    set state from of group 21, value=11
  3. To navigate back from group 21, simply add action: set state view of page, value=group 21’s from

Hope it can help. Good luck



I have been using JS and CSS to set the z-index of different groups to bring them to the “front” or send them to the “back” when they are called.

This demonstrates how to set the Z index