Can a custom state have a unique URL slug?

[phrase9]

Hello

I have one page with several tabs on it. When each tab is clicked, a custom state is activated which shows content. Naturally when you navigate to this page, the original custom state’s content only shows. My question is this: Can each custom state be given a unique url slug so that when a user is on a different page and then clicks on link with such url + slug, it immediately takes them to that page with that specific custom state showing?

[phrase9]

Bumping this.

[adamhholmes]

You can do this using Path parameters and some simple javascript… (or, if you don’t mind refreshing the page whenever a new tab is clicked, there’s no need to use any javascript).

To set the custom state value from the URL use a pageload workflow to set the custom state value from the path parameter (use Get Path From URL), only when Get Path From URL is not empty. If it is empty then set it to some default value, or just use the standard custom state default value setting.

So for example, have a ‘text’ type custom state on your page, and if your URL is:

www.my-site/my-page/custom-state-value-3

then using the above method will set the custom state value to: custom-state-value-3

So if you direct a user to that specific URL the custom state value will be set to custom-state-value-3

In order to change the URL when another tab is clicked (assuming you need/want to do that) you have 2 options…

1 is simply to use either a link or an ‘Open External URL’ workflow action, directing the user to the URL of the page, with the new path (this will cause the page to reload).

Or, for a faster UX you can use some javascript (such as this) to change the visible URL in the URL bar of the browser without reloading the page.

Here’s a quick demo of the concept:

Preview

Editor

[phrase9]

Thanks a lot Adam. I will try your solution over the weekend and will let you know if it worked.

[chris.williamson1996]

@adamhholmes @phrase9

I have a bit improved way of doing this, hope it helps.

Create a datatype called navigation.

You need values of:

• Name (type text)
• Parent Menu (type navigation) (only if using sub menus)
• order (type number)
• Icon (image) (only if your UI requires it)
• hover icon (only if UI requires it)
• slug

Here’s an example

Name : Home page
Parent Menu: blank
Order: 1
Icon image
Hover image
Slug: home-page

Now in your UI on your sidebar you will have a repeating group of navigation → do search for navigations

With constraint of parent menu is empty

Inside of the cell have a text element for current cells name.

If you have sub menus you will then have a repeating group nested inside the first one for do search for navigations

With the constraint of parent menu = current cells navigation.

So a sub menu data point will be like the example above but set the parent menu to the nav item you want it nested in.

For example if I want to have a sub menu inside my home page group the parent menu data point will be home page (since the type is navigation)

Set the data type of the page as “navigation”

We will assume this is a single page app on the index page

Now put a work flow on the cell text as go to page index data to send is current cells navigation.

This allows you to navigate while still utilizing back and forward plus easily adding future menu items while condensing your workflow down to only 2 actions.

Additionally have a conditional action for “if index navigation is empty → go to page index with data as do search for navigation name = Home Page :first item

So you won’t ever have a blank page.

Now on each group (page) inside your single page app have them not show on load with a conditional as “when index navigation is (corresponding page name) this item is visible.

• No need for states.
• Faster to add future menu items
• Condensed work flow
• Easy future UI redesigns
• Quick to add conditional UI rather than having to duplicate 10+ conditionals
• Utilizes forward and back

[phrase9]

Thanks Chris