Lesson Length -


Link to Screens or Websites using the Actions Modifier
Close Video

Let's Add Some Actions

Modifiers are any of the features that have a plus icon, which you'll see available on a given layer in the Inspector Panel.

The first one we're about to discuss in the Learning Center so far is the Action modifier.

Perhaps you’ve  got some layers and screens going on in your first Judo experience, but you’re wondering how to start linking the user flow between your screens.

To do that we use Actions.

We can add an Action modifier onto any:

  • VStack, HStack or Zstack
  • Text
  • Image
  • Rectangle or
  • Icon

Best Practice Tip Once you start using Actions to link screens, for most Judo experiences it's highly recommended you also learn about and implement Nav Bars and App Bars (which are the following two lessons), so stay tuned 👍

Let's Make A Button

The most common application for the Action modifier is to make a button to click to another screen. Let's see a simple example of this:

Let's break down what's going on here.

Firstly, to create this example button, we use a few features that are covered in other Lessons, so let's link those now:

We'll see in the laters panel that our button here is comprised of a ZStack containing our CTA Text, and a background Rectangle with a Frame on the Rectangle to size it.

FYI It's best practice to add our Action modifier onto the ZStack, instead of the CTA Text

Action Modes

1) Transition

This is the default mode, and is for linking to another screen. As seen above, once we add our Action modifier, it will also automatically pick an available screen for us.

To choose a different screen instead to Transition to, select it from the dropdown:

Once our Action is linked to another screen, Judo will illustrate that transition with a orange arrow drawn between the screens:

Push vs Modal

For our Transition Style to our next screen, we have two choices:

The default is Push meaning it pushes the entire screen to the left and replaces it with our next screen.

If we change this to Modal, that means our next screen will slide up from the bottom modally, allowing for a natural dismiss action of swiping it back down again.

You can make your modal transition full screen or not.

2) Open URL

The next Action mode is Open URL.

This will leave the App and open the URL in the device default browser, but the Experience will remain open once our user returns.

However; if Dismiss Experience is checked, it will do so before navigating to the browser where it will then display the Website that you’ve attached to this Action.

Deeplinks Open URL is the setting you want to use for Deeplinks to other areas in your app, as well as links that would open directly in the native app (if the user has it), for example an Instagram link

3) Present Website

The next Action mode is Present Website, which will display a website fro your URL in a modal screen within the experience itself. When the user has finished viewing the website they can simply dismiss the screen and return to the experience where they left off, all without leaving the app.

4) Custom

Custom is an advanced feature for enabling custom integration within your own app. This must be setup ahead of time by your app's developer.

5) Close

Close will close the current modally displayed screen, or close the experience itself if no other screen's are displayed modally. While there are definitely times to use Close on a button, it is very common to primarily use a close button as part of a Nav Bar and an App Bar, in many cases.

🚨 Important 🚨 If you've made it this far; great work. Make sure you check out the next two sections, because if you start adding Actions without a Nav Bar, your user might get stuck 🤔

Was this lesson helpful?