Using the inspector

The inspector enables you to change various aspects of the selected item (known as properties). If you worked your way through the getting started guide, you likely noticed it on the left-hand side of the window.

There is a video at the bottom of this page demonstrating the concepts discussed here. You can begin by watching the video if you like.

Here’s the inspector showing properties for a number field:

The inspector is used to change all aspects of the selected item. A number field, for instance, allows you to determine the number of decimal places its value is displayed with, whether it is displayed as a fraction, as a percentage, using a currency symbol or is displayed using scientific notation.

The inspector is also used to change various other aspects of the selected item, including whether it is visible and enabled and its colors.

Initial values and units

Input fields can have initial values, which are the values displayed before the user changes them. All number fields can also have units, which are displayed before or after the number itself. For instance, a number can be displayed as “34.2 lbs” or “$23.”

Initial values and units are set in the app designer itself, not in the inspector. To set the initial value to 32, simply type “32” into the field (to the right of the field caption). (Unlike a spreadsheet, such values are not entered into the formula field.)

To add the unit “lbs,” just type “32 lbs” into the field. Adding a currency symbol displayed before the number 23 is just as easy: enter “$23.”

You can have units without initial values. Type “-“ in place of the missing value for more control or just type a currency symbol to have it displayed before the number or any other text string to have it displayed after the number.

Steppers and sliders

A stepper consists of two buttons displayed next to the field, where one button increases the field value and another decreases it.

A slider takes up more space than a stepper, but enables your users to make rapid changes to a value by dragging the slider handle. Sliders work well for making coarse changes to a value and steppers work well for making fine changes.

Here is a temperature conversion app that uses both a slider and a stepper for the input field:

Enable a stepper by toggling the Show stepper property in the inspector. Toggle the Show slider property to show a slider.

Sliders must have a defined range, set using the minimum and maximum values in the inspector. Such values are optional for steppers. Both steppers and sliders support setting a step value, which determines the interval between the assigned numbers.

When a slider or a stepper is shown, the field value can be grayed out or hidden completely by using the drop-down menu initially labeled Show field value in the inspector.

A slider is by default displayed below the field label and value. It can also be displayed between them by toggling the On separate row property.

Formatting plain numbers

Values are by default formatted as plain numbers. Use the Decimals, min. and Decimals, max. fields to specify the number of decimal places your numbers should be formatted with. (If these numbers are zero and two, respectively, 3.14159 is formatted as 3.14 and 2.10 is formatted as 2.1.)

Use the Integer digits field to specify the minimum number of integers a number should be formatted with. (If this number is four, 42 is formatted as 0042.)

Thousands separators are used by default, but you can toggle the switch to turn them off.

Formatting numbers as currency

You can also format your numbers as currency by clicking the $ button:

By default, such numbers are displayed in red if they are negative and use an appropriate currency symbol. Change the currency using the provided drop-down menu:

Formatting numbers as percentages

You can also format numbers as percentages by clicking the % button:

By default, numbers formatted as percentages are displayed with a “%” unit, displayed after the number. In addition, they are automatically scaled, meaning that if the user enters the value 50, the actual value used in calculations is 0.50.

Formatting numbers as dates and times

Format a number as a date, as a time or as a date and a time by clicking the clock button:

Click the two drop-downs that appear to determine how dates and times are formatted:

If the app language normally uses a 12-hour clock (which holds true for US English), click Force 24-hour clock to ensure that a 24-hour clock is used for that field.

Date and time values are known as sequential serial numbers, which can be processed using specialized date and time functions as well as regular functions and operators. For an introduction, refer to our documentation for the Value property of date and time fields.

Date and time fields use native date and time pickers on Android and iOS, meaning that your users will get to use the date or time entry method they are used to.

Here’s what the date and time pickers look like on iOS:

Here’s what the date and time pickers look like on Android:

Here’s what the date and time pickers look like on desktop computers:

Changing many fields at once

To save time, you can change many items at once. Check the box next to all items you’re interested in (say, all fields that display prices) and change the properties you’re interested in. You will find that your changes are applied to all checked items:

In the image above, three different fields are checked: two fields formatted as currency and one formatted as a percentage. As they are not the same kind, the drop-down menu reads Field kind (multiple). Decimals, maximum reads 2, as this holds for all three fields, whereas Decimals, minimum is blank, as the three fields differ in this respect. Changing any property changes all checked fields.

If all checked items use the same formula, you can change the shared formula and have the change apply to all checked items. If they don’t use the same formula, you’ll be given the opportunity to assign the same formula to them if you type something into the formula field.

Beyond formatting — validation and persistent fields

The inspector can also be used for other things than formatting numbers. Fields can be disabled (by toggling the Enabled property), meaning that they can’t be edited by users, and they can be made hidden by toggling the Visible property.

They can also be made persistent by toggling the Remember value property, enabling field values to be saved, meaning that they persist even when the app is closed and reopened.

The Validation section of the inspector allows you to define minimum and maximum values for number fields:

This is what an app might look like with the minimum and maximum values defined as in the image above:

Setting property values using formulas

Many properties you find in the inspector can either be set to an unchanging value (such as when you decide that a field should be hidden at all times) or be set through a formula (which is evaluated when your app is run).

Properties that can be set through formulas have faint fx symbols next to them, which you can click to edit the associated formula.

By setting a property through a formula, you can make decisions that take into account values entered by your users. That enables you to, say, display a field only when an input field value exceeds a certain threshold (using the Visible property) or make a button enabled only when all required fields have been filled out (using the Enabled property).

The Valid property also supports being set through a formula. If you want to validate fields which are not number fields (such as date and time fields and text fields), you need to associate a formula with the Valid property.

Use the property box to select a property to edit:

Not all properties that can be set through formulas are part of the inspector. For instance, you can set an initial value for a number field using a formula by selecting the InitialValue property from the property box, but it’s not available in the inspector.

Likewise, screens, groups, fields, buttons and list screen navigators support setting their labels through their Label property, but you need to use the property box to find the property.

Properties which can be set through formulas can be referenced from other formulas by typing the name of the item, followed by ., and finally the property name. For instance, Field1.VisibleField1,Visible in a formula references the Visible property of the field named Field1.

Video recap

(To see a longer video about using the inspector and associating formulas with properties, refer to the video tutorial where we create a user registration form.)

Now that you have learned about the inspector, continue reading about working with formulas »