• Learn
  • Blog
  • Pricing
  • About
  • Sign in

Using the inspector

The inspector enables you to change various aspects of the currently-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

One of the primary uses of the inspector is to format numbers, including adjusting the number of decimal places a number is displayed with, whether it is displayed as a fraction, as a percentage, using a currency symbol or is displayed using scientific notation. (Separate guides cover formatting values as dates and times and as text strings.) The inspector is also used to change various other aspects of the selected item, including whether it is visible and enabled.

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 bar.) 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. For instance, type “before - after” to ensure that “before” is displayed before the number and “after” is displayed after it.

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 simply by dragging the slider thumb. 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:

A field with both a stepper and a slider

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

Formatting as number

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:

Formatting as currency

By default, such numbers are displayed in red if they are negative and use an appropriate currency symbol. Also, negative numbers are displayed in parentheses if you leave the “accounting style” enabled. Change the currency using the provided drop-down menu:

Currencies

Formatting numbers as percentages

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

Formatting as percentage

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 fractions and using scientific notation

Only the most commonly-used options are available as buttons. Click the drop-down menu to get the full list. Select Fraction to format numbers as fractions.

When you format a number as a fraction, Calcapp tries to find the most appropriate fraction to display (which is closest to the actual value). Use the drop-down menu to specify which behavior to use.

Finally, select Scientific from the drop-down menu to use scientific notation. With scientific notation, 10,000 is displayed as 1.00E+04. It’s a great way to present numbers that are either very large or very small.

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:

Changing multiple fields at once

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.

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:

The validation section of the inspector for number fields

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

An application using validation

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:

The property box

The property box, expanded

Not all properties that can be set through formulas are part of the inspector. For instance, you can set an initial value for a field using a formula by selecting the InitialValue property from the property box, but it’s not available in the inspector. Likewise, panels, groups, fields, buttons and list panel options 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 a period and the property name. For instance, Field1.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 »