Overview
The Judo SDK supports overriding Component Properties with a custom SwiftUI view using the same API which facilitates overriding Text, Number, and Image Properties.
Simply add a Placeholder Component to your Judo design and then override it with a custom view in Xcode. This can be used for anything that works with SwiftUI including maps, custom video players, and custom controls.
Let’s see this in action by rebuilding parts of Apple Maps. In Judo, we’ll create a Placeholder Map Component and in Xcode, we’ll replace that Placeholder Component with a SwiftUI map.
🔻 To follow along with this tutorial, download this Judo starter file.
1. Create a Placeholder Component.
When you open up the starter file, you’ll find the Main Apple Maps Component, which currently only contains the Modal Content Sheet. You’ll also find an Artboard on the canvas which contains a screenshot from Apple Maps. This screenshot will live behind the Sheet and act as a placeholder in Judo until we replace it with a SwiftUI map in Xcode later on.
To be able to override the screenshot in Xcode, we first have to convert the Artboard into a Component, so that we can later insert an Instance to the Main Apple Maps Component. To do so, select the Artboard and click on the Component toolbar button. Let’s call it “Map Placeholder”.
⬇ Note
You cannot place Artboards within other Artboards or Components, which is why we must turn this Artboard into a Component.
2. Bind the Instance to a Component Property.
Component Instances can be mapped to Component Properties, but only Properties that live in the starting point of your app can be overriden in Xcode. So, let’s start by inserting an Instance of the Map Placeholder Component to the Main Apple Maps Component.
Right-click on the Map Placeholder Component in the Layers panel to copy it, and then right-click to paste an Instance of it into the Main Apple Maps Component.
★ Pro Tip
There are many other ways that you can insert an Instance of the Map Placeholder. For example, select the Main Apple Maps Component and then from the Insert (+) menu, select the Map Placeholder Component.
Then, create a Component Property from the Inspector panel. By binding a Component Property to the Map Placeholder Component, we will be able to to override the screen in Xcode.
⬇ Note
Since you can only override Properties in the starting point of your app, you have to define the Property on the Main Component. If the Component you want to override is nested in several other Components, you must pass the Property down each Component. You can watch this quick tutorial in our community for more information.
From the Inspector panel, click on the Map Placeholder Component Instance and then on Create Property… We'll call the Property map.
⬇ Note
Keep in mind that the name of the Property is what we’ll use to pass a new view into the Placeholder Component in Xcode.
3. Replace the Property with a Custom View.
To replace the map Component Property with a custom view, let’s first export our Judo file and then open it up in Xcode.
You’ll notice in the Xcode preview that while the Sheet modal presentation works, the Map Placeholder screen cannot currently be interacted with because it’s simply a screenshot taken from Apple Maps.
★ Pro Tip
To know which screen your file with start with, select your Main Component and check the box Use as prototype start point in the Inspector panel.
In this example, we’re going to replace the Map Placeholder screen with a SwiftUI map. To do so, let’s first import MapKit and create a simple SwiftUI map.
@ViewBuilder
var map: some View {
//Musée d'orsay
let center = CLLocationCoordinate2D(
latitude: 48.859962,
longitude: 2.326561
)
let span = MKCoordinateSpan(
latitudeDelta: 0.02,
longitudeDelta: 0.02
)
let region = MKCoordinateRegion(
center: center,
span: span
)
if #available(iOS 17.0, *) {
let position = MapCameraPosition.region(region)
Map(initialPosition: position)
} else {
// Fallback on earlier versions
}
}
SwiftUI Map
Then, to replace the Map Placeholder screen with the SwiftUI map, let’s call on the map Component Property that we bound it to in Judo, and pass in the new map view that we just created below.
Now when you preview your app in the Simulator, not only does the Sheet modal presentation work, but the map does, too.
Although we built a simple SwiftUI map for this example, this new feature gives you full control to configure the map anyway you want. You can even use bindings and pass those through to react to changes from the Judo view and the custom views that you pass in.
Resources
🔻 Download the Judo file.
If you’d like to a copy of this Apple Maps example, click on the file below to save it.