Path Structure

Fabian_Weller · 07-28-2021 03:52 AM

I would like to create a path structure for the child and grandchild entries. Like we know from Windows.

So when you are in the item detail view you would see this path:
Customer > Order

The goal is to see where I am in the App and to be able to click on the parent / grandparent to open it up.
This is possible with Action Buttons, but I prefer the path structure.

I tried it with deeplinks in a Show column type (Category Url). But it will allow only 1 url.

Has anyone a solution?

_redline

PROPOSAL
Could you maybe try keeping an entry for the current user that uses a kind of “stack” format? So essentially, you track what a users current position is, then if they go down in your view tree you “push” another value, and if they go back, you “pop” the value off the stack. This may be tricky depending on what. your workflow is for moving between views, but I’ll let you handle that.

LOGIC
Stacks use a process called “First-in-first-out” (FIFO) meaning that if you add something to the list, a removal or pop step will remove whatever was the last added or on the top of the stack.

For example. If you have a top view called “Main” with a child view called “Child” and a view below that called “Grandchild”, then the user would start a the “Main” view, and this would be logged in your user table in an appropriate column (probably an EnumList in Appsheet).

Going to the “Child” view has an attached action that pushed the name of the “Child” view onto the stack, so now your users column has Main" , "Child in your table. Going back removes it from the list with something like - LIST("Child"). or going down to the Grandchild view pushes the “Grandchild” value onto the stack resulting in Main" , “Child” , "Grandchild.

IMPLEMENTATION
Then you can take your stack and sub the delimiter with your own delimiter so:

Substitute(INDEX(CurrentUser[UserStack], "" , "", ">")

Or something along those lines. This assumes a User slice called “CurrentUser” and you contain your users current position stack in [UserStack].

This is all theoretical as I haven’t tested any of this out, but I hope that puts you on the right track.

FURTHER READING
Refer to this reading if you’d like to read more into Stack data types: Stack (abstract data type) - Wikipedia

Steve

Fabian_Weller

@Steve I didn’t know how this structure is called. Thank you now I know this is called Breadcrumbs
@_redline Thank you for this deep information. Maybe I was not clear enough. My question is more about UI. I want to explain.

In my App I have 3 tables:
Grandparent > Parent > Child
This is like:
Customer > Order > Item

When I’m in Child Detail View, I already know the Parent, because it’s in the data structure. I can also add the Grandparent with a real column or a virtual column.

AppSheet now offers me system generated action that I can use to let the user know the structure:

Display inline

Display prominently

My goal is to show the path structure like this:

The Grandparent und Parent should be clickable links.

Suvrutt_Gurjar

Hi @Fabian ,

You are probably looking for something more elegant and specific. The workaround below is obviously somewhat nonelegant but still posting just in case it helps.

You could have two prominent actions and hide the actions icons by having white colors ( or as per them background) retaining only the action names as below

Some limitations of the workaround are 1) Limited character length for pathnames 2) No control over font size 3) No control over placing the action names near to each other 4) The inherent space consumed by hidden action icons.

Actions before formatting

Actions after formatting

Fabian_Weller

Thank you @Suvrutt_Gurjar this lead me to another idea using Card Layout in Detail View.

You can only add 2 Actions, but that may be enough for me.
But with card layout you cannot see prominent actions

Suvrutt_Gurjar

Got it. Thank you @Fabian. Yes, card layout appears to be another and better alternative, if one does not have more prominent actions to display.

Fabian_Weller

Hi @Jonathon I thought it would be able with SVG Text as a link. But I cannot get it to work in AppSheet. Maybe this is not supported?

This is my Code:

“data:image/svg+xml;utf8,
<svg height=""30"" width=""200"" xmlns:xlink=""http://www.w3.org/1999/xlink"">
  <a xlink:href=""https://www.w3schools.com/graphics/"" target=""_blank"">
    <text x=""0"" y=""15"" fill=""red"">I love SVG!</text>
  </a>
</svg>”

Jonathon

This code works:

"data:image/svg+xml;utf8,
<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' height='30' width='200'>
  <a xlink:href='https://www.w3schools.com/graphics/' target='_blank'>
    <text x='0' y='15' fill='red'>I love SVG!</text>
  </a>
</svg>"

The hyperlink function works if you open it in a browser. I tested it as both image and show-> image in appsheet, and in both cases the hyperlink is disabled (but the text is shown) .

Fabian_Weller

I see I missed this part. Thank you so much @Jonathon for testing. Since the Hyperlink is disabled, I can’t use it for my purpose