All Collections
Controls
▶️ Building a Payment Calculator
▶️ Building a Payment Calculator

Get to know each control by building an interactive payment calculator, complete with Computed Properties, Conditionals, and Combined Text.

Updated over a week ago

Don’t be fooled by this example Payment Calculator—it may appear to be a simple prototype, but it’s actually equipped with a variety of Controls, Properties, and Conditionals that form real, interactive elements in your design. Throughout this tutorial, you'll also have the opportunity to work with Computed Properties and Combined Text layers, making this a great way to learn about integrating arithmetic expressions and stylized text into your app design.

🔻 Download this file.

To follow along with this tutorial, download this starter Judo file: Payment Calculator Starter File.judo

This starter Judo file includes 1 Component labeled Calculator.

The goal is to make a Payment Calculator complete with the following:

  • A Slider, so a user can choose an amount between $0-500 that they plan to spend.

  • A Picker, so a user can choose to pay over a specific number of days, weeks, or months.

  • A Stepper, so a user can choose the number of days, weeks, or months that they want to pay off their purchase. We’ll set the maximum to 10.

  • A Conditional layer for each payment plan option that displays the number of installments selected in the Stepper, with an amount that divides the Slider amount by the Stepper amount, and with timeline descriptions that correlate to the interval chosen in the Picker.

  • A Toggle between Yes and No to confirm that the user understands that using a payment plan to pay off their purchase will impact their credit score.

  • A Button to close the Payment Calculator, which will only be clickable once a user toggles Yes to the question above.

Create a Slider

Let’s begin by creating a Slider, or a track with a “thumb” image that a user moves between a minimum and maximum value. Since we want the Slider to be positioned under the “How much do you plan to spend?” Text layer, let’s select the Text layer and from the Insert (+) menu, insert a Slider control.

The first parameter that we’ll set up in the Inspector panel is the Value, as our Slider will not work unless it is bound to a Number Property. To do so, hover over the Value parameter and click on the Property Attachment Ring. Let’s call it spend and give it a default value of 0.

Now, let’s configure the rest of the Slider parameters:

  • Min Label - The Minimum Label lives on the left side of the Slider. Let’s bind it to the spend Number Property, so that the label amount corresponds with the amount selected in the Slider.

Note
Notice how when we bind the spend Number Property to the Min Label, a 0 appears on the left side of the Slider. The initial amount that gets displayed depends on the default value of the Property, which in this case we had set to 0.

  • Max Label - The Maximum Label lives on the right side of the Slider. Let’s set it to 500, so the user knows that they cannot spend an amount greater than $500.

  • Min - Sets the minimum amount that a user can choose on the Slider. Let’s set it to 0.

  • Max - Sets the maximum amount that a user can choose on the Slider. Let’s set it to 500.

  • Step - By default, a Slider amount will increase or decrease by 1. You can set it to another value, but for this example, we’ll leave it at the default amount.

Create a Picker

Next, let’s create a Picker that will allow users to choose whether they want to pay over days, weeks, or months. To place it to the right of the “In what time interval?” Text layer, let’s expand the HStack labeled Intervals in the Layers panel, and select the Spacer, so that when we insert the Picker, it will get placed after the Spacer. From the Insert (+) menu, insert the Picker control.

Similar to the Slider, the Picker control won’t work unless we bind the Selection parameter to a Text or Number Property. So, hover over the Selection parameter and click on the Property Attachment Ring. Let’s create a Text Property called interval and give it a default value of day.

From the Inspector panel, you can customize the amount of options and the type of options available. We need 3 for this example—day, week, month—so let’s simply click on each option to edit their Title and Value. You can add an Image if you’d like, but we’ll keep it simple in this example by not adding any.

The Title is the label that will be visible in the Picker for each option and the Value corresponds to the interval Text Property value options. So, let’s change each option to the following:

  1. Title: Days

    Value: day

  2. Title: Weeks

    Value: week

  3. Title: Months

    Value: month

Since we had set the default value of interval to day, the Title Days of the day Value option appears first in the Picker.

★ Pro Tip

If you’d like to customize the look of your Picker, you can apply the Picker Style modifier and choose from one of the following styles: Inline, Menu (default), Navigation Link, Segmented, or Wheel.

Create a Combined Text Layer

Wouldn’t it be nice for “days” in the “In how many days?” Text layer reflected the interval Text Property value chosen by a user? For instance, if a user chooses “Weeks” in the Picker, the Text layer would change to “In how many weeks?”

We can accomplish the following by creating a Combined Text layer that concatenates several Text layers and binding one of the Text layers t o the interval Text Property.

Our Combined Text layer will be made up of the following: “In how many ” + “interval value” +”s?”.

Note
Since our interval values—day, week, month—aren’t plural, we need to add the letter “s” to our Combined Text layer.

To build this Combined Text layer, let’s first select the “In how many days?” Text layer to insert 2 more Text layers underneath. You can insert a Text layer from the Insert (+) menu, or by simply typing t on your keyboard.

Next, edit each Text layer from the Inspector panel.

  1. Change the first one to “In how many ”.

  2. Bind the second Text layer to the interval Text property by clicking on the Property Attachment Ring. It will display the default value which, in this case, is “day”.

  3. Change the last Text layer to “s?”

Then, select all 3 Text layers in the Layers panel and right-click to open the context menu and click on Combine Text.

Since, in this example, all of the Text layers in the Combined Text layer should look the same, drag and drop the modifiers around in the Layers panel to make sure they all get applied to the entire Combined Text layer.

★ Pro Tip

An alternate way of combining Text layers is to select one or more and drag them into another Text layer.

📱 See the interval Text Property in action.
Send your Judo file to your mobile device to see how the interval selected in the Picker reflects the “In how many days?” Text layer.

Can you spot any other Combined Text layers on the screen? If you take a closer look at the final sentence on the screen, you’ll see that it’s made up of the following Text layers: “Do you understand that this ” + “will” + “ impact your credit score?”

As you can see, combining Text layers is useful for applying text formatting to one or more words within a sentence, all while maintaining natural spacing and text wrapping. This would be impossible to achieve by simply embedding layers within an HStack.

Create a Stepper

Now, let’s insert a Stepper to the right of the Combined Text layer, allowing users to select the number of installments for paying off their purchase. We’ll set a maximum value of 10 payments.

To start, select the Combined Text layer so that the Stepper gets inserted next to it. From the Insert (+) menu, insert the Stepper control.

Similar to the other two controls, let’s first bind a Number Property to the Value parameter to activate our Stepper control. From the Inspector panel, hover over the Value parameter and click on the Property Attachment Ring. Let’s name the Number Property installment and give it a default value of 1.

Next, let’s configure the rest of the Stepper parameters in the Inspector panel:

  • Label - The Label lives on the left side of the Stepper. Let’s bind it to the installment Number Property so that the label amount corresponds to the amount chosen with the Stepper.

Note

Notice how when we bind the installement Number Property to the Label, a 1 appears on the left side of the Stepper. The initial amount that gets displayed depends on the default value of the Property, which in this case we had set to 1.

  • Min - Sets the minimum amount that a user can choose with the Stepper. Let’s set it to 1.

  • Max - Sets the maximum amount that a user can choose with the Stepper. Let’s set it to 10.

  • Step - By default, a Stepper amount will increase or decrease by 1. You can set it to another value, but for this example, we’ll leave it at the default amount.

Then, to adjust the formatting, let’s remove the Spacer in the HStack as the Stepper now pushes the Combined Text layer to the Leading edge and we want the Stepper to be flush with the Trailing edge. Then, with the HStack labeled Payments selected in the Layers panel (it contains both the Combined Text and Stepper layer), we can increase the Spacing to 80 points in the Inspector panel to push the Stepper Label closer to the Stepper.

Note
In the starter file, the Combined Text layer already has the Multiline Text Alignment and Line Limit modifier. This ensures that the layer aligns to the Leading edge if it wraps and consistently maintains two lines by setting both minimum and maximum line limits to 2.

Create a Computed Property

A user can use the Slider to set up the amount they spent and a Stepper to set the number of payment installments. To visualize how much they owe per each installment, we first need to create a Computed Property.

A Computed Property is a Number Property that contains simple arithmetic expressions, such as spend / 2. It can be combined with other Number Properties, too. For instance, to calculate the amount due per each installment, we’d need to create the following expression: spend / installment.

To create a Computed Property, select the Calculator Component and then click on the plus (+) icon in the top-right corner of the Computed Properties section of the Inspector panel. Let’s name it payment and set the expression to spend / installment.

Bind the Computed Property

Next, let’s bind the payment Computed Property to the $0 Combined Text layer, so that the amount changes based on the amount a user spends and the payment plan that they choose. To edit the Text layer labeled 0, expand the Combined Text layer labeled Amount in the Layers panel and from the text box in the Inspector panel, click on the Property Attachment Ring, to bind the Text layer to the payment Computed Property.

📱 See the payment Computed Property in action.

Send your Judo file to your mobile device to see how setting the spend amount with the Slider and the installment amount in the Picker impacts what shows up in the payment plan.

If you’re following along with the starter Judo file, then you may have noticed that additional payment blocks now show up underneath. That’s because this starter file comes with several pre-built Conditional layers. Let’s break them down.

Create a Conditional Layer

Conditional layers are used to hide or show parts of your design based on a set of conditions. When you expand the HStack labeled Plan in the Calculator Component, you’ll find 9 pre-built Conditional layers, one for each possible payment plan (2-10 installments). Before we build the first one together, let’s first break down what goes in each Conditional.

The layers within each Conditional only appear when their installment Condition is met. For example, if you click on the the Conditional labeled In 4, you’ll find that the layers within will only appear if the installment Number Property equals 4. Since the default is 1, we can’t currently see the layers that make up this Conditional.

From the Inspector panel, let’s change the default value of the installment Number Property to 4 in the Calculator Component. Four new blocks will appear underneath—1 block per payment. If you expand the VStack in the In 4 Conditional, you’ll find two HStacks labeled Row 1 and Row 2. Each row consists of 3 VStacks—one for each payment block.

A payment block consists of 2 layers:

  1. A Combined Text layer that combines a dollar sign with a Text layer bound to the payment Computed Property (spend / installment).

  2. Either a simple Text layer for the word “Today” or a Combined Text layer with one of the Text layers bound to the interval Text Property (day, week, or month).

While the In 4 Conditional technically consists of 6 payment blocks, the last two are hidden with a Rounded Rectangle Overlay. Therefore, only 4 blocks appear.

The first payment block hasn't been wrapped in a Conditional yet. We saved that for this tutorial. As you can see, it appears as part of all payment plans, so let’s fix that so it only appears when the user chooses to pay in one time. To start, select the VStack in the Layers panel or on the canvas and from the toolbar, click on the Conditional button.

Then, from the Inspector panel, let’s create a Condition where the installment Property must Equal 1 in order for the VStack to appear. Since we had just set the default value to 4, the VStack will disappear.

⬇ Note

An alternate way of turning a layer into a Conditional is to right-click it and then click on Make Conditional in the context menu.

Don’t forget to go back and change the default value of the installment Number Property in the Calculator Component to 1.

Create a Toggle

Next, let’s create Toggle that will allow users to confirm whether or not they’ve understood the following question: “Do you understand that this will impact your credit score?”

To place the Toggle underneath the question, start by selecting the Combined Text layer from the Layers panel or on the canvas. Then, from the Insert (+) menu, insert the Toggle control.

Similar to the other controls, the Toggle control won’t work unless we bind the Is On parameter to a Property. So, click on the Is On parameter and then on Create Property… Let’s create a Boolean Property called understand and give it a default value of False.

Let’s format the Toggle by changing the Label to No from the Inspector panel and applying some Padding to the Leading and Trailing edges.

★ Pro Tip

You can apply the Labels Hidden modifier to remove the Label.

Create 2 Toggle States

Now, we need to create two states for the Toggle: Off and On. When the understand Boolean Property is set to False, the Toggle will be off. When it’s True, the Toggle will turn on. To accomplish this, we’ll need to create two Conditional layers.

Let’s first create the off state since the Toggle layer is labeled “No”. To do so, start by right-clicking on the Toggle layer to click on Make Conditional from the context menu. Then, create a Condition where the understand Property must be False. Since the default value of this Boolean Property is False, the Toggle layer will remain on the screen.

Now we need to create another Conditional where, when a user toggles the control on, the Label will turn to Yes. Let’s begin by right-clicking on the Conditional layer we just created to Duplicate it. Then, expand the Conditional layer to select the new Toggle layer. From the Inspector panel, change the Label to Yes.

Now, let’s go back to the Conditional layer to change the Condition. Since we changed the Label to Yes, this Toggle layer should only appear when the understand Property Is True. Since the default value of this Boolean Property is False, the Toggle layer will disappear from the screen.

To make it easier to sort through the layers in the Layers panel, let’s change the names of the Conditional layers to Off and On.

★ Pro Tip

If you’d like to customize the look of your Toggle, you can apply the Toggle Style modifier and choose from one of the following styles: Switch (default) or Button.

Create 2 Button States

The last thing that we need to do is create two states for the Close Button: Disabled and Active. Our Close Button already looks disabled, so let’s start by duplicating it to create an active Close Button.

Start by right-clicking on the Button to copy it and then use the keyboard shortcut ⌘V to paste. Then, rename one layer to Disabled and and the other to Active for clarity.

With the layer labeled Active selected, remove the Opacity modifier from both the Text layer and the Rounded Rectangle in the Background modifier.

Even though the Active Close Button looks clickable, it will not actually be interactive unless we turn it into a Button and assign it an Action. To do so, right-click on the Active Close Button layer and then on Make Button from the context menu.

From the Inspector panel, click on the plus (+) icon in the top-right corner of the Actions section to add an Action. By default, it will create a Dismiss action. Since, in this example, we want the Close Button to close the Payment Calculator, we can keep the default Action as is.

★ Pro Tip

You can also turn a layer into a Button from the toolbar.

Since the Button should look disabled when the understand Boolean Property is False and active when the understand Property is True, all that’s left is to drag the Disabled Close Button to the Off Conditional layer and the Active Button to the On Conditional Layer.

Now, you should only see the Close Button in its disabled state on the screen as the default value of the understand Boolean Property is False.

Embed the Calculator in an Artboard

To preview how this Payment Calculator will look on a mobile device, we can insert an Instance into an Artboard. To start, insert an Artboard from the Insert (+) menu.

Then, with the Artboard selected, insert an Instance of the Payment Calculator from the Components section of the Insert (+) menu.

★ Pro Tip

Alternatively, you can insert an Artboard by typing A on your keyboard.

To preview the Artboard on your mobile device, make sure that you have checked the box Use as prototype start point from the Inspector panel, so that the Judo iOS app opens on the right screen.

The prototype starting point will have a flag icon before the name of the Artboard.

Embed the Layers in a Scroll View

While the Payment Calculator initially seems to look good and work well, the greater the number of installments, the less we’re able to see on the screen and what’s more—we’re not able to scroll through the screen as layers start to hide.

To fix this, let’s right-click on the Calculator Component Instance and click on Embed in Scroll View from the context menu.

Now, when we send the file to our mobile device, the payment plan populates correctly and we can scroll through the screen to access any hidden layers.

Add a Background

Additionally, notice how since the background of the Calculator Component is transparent, we can see the white background of the calculator. When previewing it on a device, the background is no longer visible as it matches the background color of the device.

Let’s fix this by applying a Background modifier to the Scroll View container of the Calculator Component Instance and changing the Color. We can also apply the Ignores Safe Area modifier to the Rounded Rectangle, so that it fills the entire screen.

Use Artboards to Preview Several Scenarios

The Properties defined on a Component are presented as a set of controls in the Inspector panel when an Instance is selected. You can use these controls to set a different default value for a Property.

For example, let’s first right-click to Duplicate the Artboard we created and then click on the Calculator Component Instance. From the Inspector panel, we can override the default values of all Properties, except Computed Properties.

Additionally, each Artboard has its own Preview Controls, so when you insert a Component Instance into an Artboard, not only can see how your design will adapt to different Property values, but also to different device settings, such as screen size, color scheme, language, and text size.

We can create as many Artboards as we’d like to see how our design looks in multiple scenarios at once. So, let’s Duplicate the new Artboard and configure the Preview Controls from the Inspector panel.

★ Pro Tip

You can click on the reset icon in the Properties section of a Component Instance to revert all Property values to their defaults.

⬇ Note

Make sure that you’ve added translations to see the translation take effect when you’ve selected a language. To add translations to your design, click on Text in the menu bar at the top and select Translations…. Then, click on the globe icon to add a new language and either fill in the translations yourself, or click on the cloud icon to get automatic translations from Google.

The best part is that any changes that you make to the Calculator Component will be reflected across all Instances.


Take a look at the code.

If you wanted to dig into the SwiftUI code that Judo automatically generated for you as you were building, you can do so easily by opening up the Code Inspector from the top-right corner of the app.


📱 Preview the Payment Calculator.

To see your Payment Calculator in action, send the file over to your mobile device and play around with all of the controls you just built and configured!

🔻 Download the Judo file.

If you’d like to get your hands on the complete Payment Calculator, here’s the Judo file: Payment Calculator.judo


Resources

Did this answer your question?