Complex Custom State navigation in Single Page

Hello all,

I will try to explain it clearly, probably is just my approach making it complex :face_with_raised_eyebrow: :thinking: thank you everyone

Current I have 3 Repeating Groups showing different data, but they are link together, the structure is like:
RG1 is Main (the first layer)
RG2 is Sub (the second layer)
and RG3 is Item (the last layer)

When I click elements in RG1 it can show RG2, and when I click elements in RG2 it can show RG3. For the case if a particular element in RG1 have no data of RG2 but do have data of RG3, it can show RG3 no problem.

What I am trying to achieve is when I click into RG2, RG1 will be hidden, and when I click into RG3, RG1 and RG2 is hidden etc like navigating, and then a Back button to go back RG2 and RG3 will be hidden etc likewise

So I have created a custom state naming “UserNav”, giving a value of “1”; and set RG1 can be visible when UserNav is 1 and not visible when is not 1. Likewise did the same for RG2 with value of 2 and RG3 with value of 3.

The next thing I did is setting the elements in RG1 when I click them, the custom state of UserNav will be coming 2, this way RG1 will be hidden and showing RG2 only
same thing for RG2 elements I set when clicking them the custom state of UserNav will become 3, and RG2 will be hidden

The problem now I am having is when an element in RG1 do not have data of RG2, but do have data of RG3, but when I click on it, it only shows RG2, how do I able to do a check if there is no RG2 data for this element and set UserNav to value of 3 to show RG3 instead?

Thank you in advance!

@jcwork712

Sounds like an intricate situation you got going there! :smiley:

Perhaps further info on dB structure and a quick loom video showing the situation in more detail, could shed more light. Folks could get to assess things more closely and provide suggestions on how to achieve the functionality your want to implement.

Dealing with lists of related objects and nested elements visibility conditions on the page is indeed intricate …

hello Carlos, thanks for replying!

The DB Structure is the same how you taught me in the other post:

Option Set 1 - RG1
Main Category
Title (text)

Option Set 2 - RG2
Sub Category
Title (text)
Main Category (Main Category)

Data Type 3 - RG3
Item
Title (text)
Main Category (Main Category)
Sub Category (Sub Category)

In this screenshot, you can see I have datas to play with:
I have set Main1 have SubCat1 and 2 data and show Item 1 2 5
and Main2 have SubCat 3 but no data for Item
and Main3 without SubCat but do have Item 3 and 4

In the demo here, it navigates okay with the UserNav custom state I described, is just when I click on Main3, it shows the SubCat from previous data, but nothing for Items, which is the scenario I am trying to get it right if the MainCat only contains Item but no SubCat

Or maybe this is just the wrong approach?
You can see I have done two buttons for back as well, one for back to Main, one for back to Sub, but if is possible I want to able to set only using one Back button but able to know if I am viewing Item, it only back to SubCat, and if I am viewing SubCat the back will redirect to Main

Thanks!

@jcwork712

I gather you are trying to navigate down and up a “funnel” type of UI.

From 1 down to 2 and from 2 down to 3 … and back. But … you want this done via clicking an rg row each time.

If so, what you want happen is essentially:

Layer 1
List of things
Clicking one of the above things sends you down to … ONE thing that needs to be passed down to an element that holds a single value

Layer 2 (group that receives the ONE prior “package”)
Within this group a second list of things exists that have in common the one thing chosen from layer 1.
Again … a click on one sends that one thing down to another element that holds a single thing

Layer 3 (group that receives the ONE prior thing from a row that holds a package in list of things 2)
Within this group holding this thing … a third list of things exists that have in common the one thing chosen from layer 2.

I laid out the logic above as an alternative way of thinking … to be considered. Since I do not know the exact purpose of what this is doing I cannot suggest a precise dB structure. But, looking at the logic this way may spark a way for this use case to be viewed from an alternative angle which involves both a UI structure that involves …

Group elements

and

Repeating group elements

all

Holding things …

You can use a :count in the end of your Search for to count the number of itens in your list.

If the counting of elements in RG2 is 0 and the counting of elements in RG 3 > 0, then set UserNav to 3

thank you Carlos,

yes, I want to do something like a “funnel” to navigate up and down, exactly how I want it to be 1 to 2, and 2 to 3, and for some scenario when 1 do not contain 2 but do have 3 then jump directly to 3, and this scenario is the trouble i am having putting together

I reread couple times the logic you laid out, the One Thing you are mentioning is it the UserNav I am using? Or I am not getting it right

I thought of an alternative is instead of doing it in Single Page, probably I should just separate all RG in a different page, this way I don’t even need to do a custom state to play with show and hide, is just simply navigating thru pages

Thanks Carlos!

thank you Rpetribu!

Yes this is exactly what I am trying to solve, I use count > 0 and count is 0 for the Displaying RG, and I was wondering how do I do the same for Custom State

Please check the screenshot below, I tried this way, but seems not working, it doesn’t allow me to navigate to RG2 anymore, it directly goes to RG3


I also tried this way: Display List count > 0 then UserNav2, then Display List count is 0 then UserNav 3, it didnt work as well

Do you mind tell me how do I write this expression correctly?

Thank you!!

@jcwork712

I was referring indeed to the UI

You can do all within one single page. Just build the UI stacking the content groups vertically. All set to be hidden on page load and visible when needed using custom states or url parameters. Both work equally well.

Hi @jcwork712 !

Sure!

Try this…

Don’t use the workflow to “display list”. Already set your RGs to do the “Search for” based in your selection.

In the workflow, when you are creating the “custom state” action, you can do it using conditions. Note that the card you write the value of the custom state have a “When” field as well.

  • When RG2:count = 0 And RG3:count = 0 then UserNav = 1
  • When RG2:count > 0 And RG3:count = 0 then UserNav = 2
  • When RG2:count > 0 And RG3:count > 0 then UserNav = 3
  • When RG2:count = 0 And RG3:count > 0 then UserNav = 4

Use de conditional tab of each RG to make them visible or not depending in what is the value of the variable UserNav.

  • RG2 is visible when UserNav = 2 or 3
  • RG3 is visible when UserNav = 3 or 4

If you whant, send me a PM with your credentials that I help you with the code…

thank you Carlos,

I will try around things. I use url parameters before, it became too complex when I have too many Main Category and Sub Category, it led me to make a new url parameter for every single Sub Category

Thanks!

1 Like

@jcwork712

Sure no problem.

I would submit that the same effort to manage url parameters will be required to manage custom states.

There is a way to manage url parameters in an easy way but it would require a tricky groups/conditions setup that is too intricate to explain quickly.

Best of luck with your project

thank you rpetribu!

I think I understand your way, I haven’t test it yet, but when you say don’t use Display List workflow for my RGs, I think that might cause some problem for viewing my data, because the “filtered” helps me filtered the data between RG1 and RG2.

For example:
RG1, I treat it as a Main Category, lets say I have data of 4 Wheels and 2 Wheels

RG2, I treat it as Sub Category, lets say I have data for Cars, Trucks under 4 Wheels and Motorbike and Bicycle under 2 Wheels

In this case the Display List filtered help me shows the correct data when I click into 4 Wheels it only shows Cars and Trucks and displaying Motorbike and Bicycle when I click into 2 Wheels

I will give it a try! thank you!!

This topic was automatically closed after 70 days. New replies are no longer allowed.