Link to anchor on a screen

In my walking tours app, I have a screen for each tour that has several areas:

  1. A heading picture
  2. An audio description of the tour
  3. An instruction which says “(scroll to bottom for the list of stops)”
  4. A Mapbox showing where the tour starts
  5. A readable version of the description including text and pictures (relatively long)
  6. A list of stops on the tour

I would like to replace the instruction in item 3 with a button with the label “List of Stops” that will scroll the screen down to the list of stops.

In HTML, I would just put an anchor just above the list of stops and create a link to the anchor as item 3.

How can I do that in Glide?

Thanks,

– Harry

1 Like

I believe @Darren_Murphy worked on something like this weeks ago, but it was for moving to a specific component at the top of the screen or something like that. Probably he can help.

If I recall right, it was using visibility conditions.

2 Likes

I took a look at @Darren_Murphy 's post about his need and saw mention of Deep Links. Poking around a bit, I saw a suggestion that made me think (for no particular reason) that since the list is the last item on the Screen, why not just jump to another screen which is the list of stops for the particular tour. Duh.

But that still does not answer how to do the equivalent of jumping to an anchor point somewhere else on the same screen…

2 Likes

As far as I’m aware, there is no easy way to do this right now.
In my situation, I wanted to do the opposite - jump back to the top of the screen.
The closest I got to a working solution was to temporarily hide all components on the screen as part of an action sequence. This kind of worked, but the user experience was very confusing, so I never used it. The biggest problem with that solution is that you cannot control the sequencing of a flow of actions - they all fire at once. But it might be worth a try if you don’t have lots of components on the screen (I had in excess of 70).

2 Likes

This isn’t anchor tags, but I like to break parts of the screen into sections and use choice components to control visibility of components. That way I can get a lot of content on one screen, but use the choices to control what is visible at any given time.

4 Likes

Hi, Jeff :slightly_smiling_face: Does it work by any chance if the components to hide are above the conditional choice list (or any trigger).
Or does order matter, like in usual programing (top to bottom computation) logic?
Thks.
I’m thinking of an anchor alternative (since obviously everybody confirms that is not doable natively like html) that could indifferently jump top as well as bottom, depending on the position we are (elevator logic).

I may consider floating buttons or action buttons as triggers to condition visibility

Yes it works no matter where your place the choice component on the screen. All the choice component does is set a value in the data, and then I hide or show components based on that value.

1 Like

can you help me understand a little bit more how to do this or send a copy of your app??? THIS IS EXACTLY What i want to do.

Pretty simple actually. In the table that the screen is attached to, I have a user specific column where I store the value from a choice component. Based on that value, I have visibility conditions on several components to hide or show them based on that selected choice.

3 Likes

I figured it out and I love this feature. Gives more room for information on one screen

Thanks

2 Likes