Fine-tuning the look

Customize the appearance of your apps so that they use the colors you prefer and your chosen images. For instance, you may want your apps to present your logo and use colors that match your brand.

Using formatted text

When you edit text in a text box in Calcapp Creator, the inspector contains a number of toolbars and drop-downs that allow you to format the text:

Use the toolbar to toggle bold , italic , bulleted lists , numbered lists and links . The drop-down menu (that reads Paragraph in the image above) is used to change to one of three different headings.

The Formatting sections holds additional options allowing you to set the font, font size and text alignment . You can also use underlined and strikethrough text, format text as code (useful for formulas) and format paragraphs as quotes .

Type Ctrl+B or ⌘+B to toggle bold formatting and Ctrl+I or ⌘+I to toggle italic formatting. To access the other formatting features from your keyboard, you can type special characters.

This is best exemplified with a video:

To access formatting affecting an entire block of text, type the special characters below on a new line, followed by a space:

• Heading 1. Type #
• Heading 2. Type ##
• Heading 3. Type ###
• Bulleted list. Type * or -
• Numbered list. Type 1. or 1)
• Quote. Type >

Italic and bold are accessed by typing the characters below, substituting your text for text:

• Italic. Type *text* or _text_
• Bold. Type **text** or __text__
• Bold and italic. Type ***text*** or ___text___
• Code. Type `text`

To insert a link, select any text in a text box, using your mouse or keyboard, and then press the Ctrl+K or ⌘+K keyboard shortcut or press the button on the formatting toolbar. Press Enter when you’re done editing a link.

By default, links go to web pages. You can also make links go to email addresses and phone numbers by pressing the menu button initially labeled :

A link to an email address will prompt the user to send a new email to the address you specify. Optionally, you can provide a subject line for the email, carbon copy (CC) and blind carbon copy (BCC) addresses as well as a message body using the Pre-filled email fields section of the inspector. Separate multiple email addresses with commas.

Links to phone numbers generally only work well on cell phones. Remember to include the phone number in the link text itself (or elsewhere in the text box) to enable users on desktops or tablets to call the phone number.

Inserting images in text boxes

Press the button in the toolbar to insert an image from your local hard drive. You can also drag files from a file manager (like Explorer in Windows or Finder in macOS) and drop it where you’d like to insert it. Paste an image from the clipboard by pressing Enter when you’re done editing a link.

By default, links go to web pages. You can also make links go to email addresses and phone numbers by pressing the menu button initially labeled :

A link to an email address will prompt the user to send a new email to the address you specify. Optionally, you can provide a subject line for the email, carbon copy (CC) and blind carbon copy (BCC) addresses as well as a message body using the Pre-filled email fields section of the inspector. Separate multiple email addresses with colons.

Links to phone numbers generally only work well on cell phones. Remember to include the phone number in the link text itself (or elsewhere in the text box) to enable users on desktops or tablets to call the phone number.

Inserting images in text boxes

Press the button in the toolbar to insert an image from your local hard drive. You can also drag files from a file manager (like Explorer in Windows or Finder in macOS) and drop it where you’d like to insert it. Paste an image from the clipboard by pressing Ctrl+V or ⌘+V.

Select an image by clicking it. The inspector then shows image-specific options:

Adjust the width of an image using the Width slider. If you drag it all the way to the right, the image will fill the full width of your app with no margins.

Images are by default centered in your app. You can float an image to the left of the text by pressing the button or to the right of it by pressing the button.

Images consume storage space. You can tell how much space you have remaining in the Storage section in the inspector. All apps in your account share the same storage space. If you upload the same image many times, only the first copy consumes storage space, regardless of how many screens and apps use the image.

Images are responsive, meaning that Calcapp stores many versions of your image with varying sizes and delivers the smallest possible image that will appear crisp on the device running your app. (Those extra copies do not count towards your storage limit.)

A cell phone with a low-resolution screen will download a small, low-resolution version of an image whereas a desktop computer with a high-resolution screen will download a much larger image. As a result, we encourage you to upload versions of your images with the highest possible resolution and let Calcapp do the rest.

Apps you build run offline. To conserve space on the devices running your apps, Calcapp only stores versions of your images with a maximum width of 1000 pixels for offline use. As a result, some images may look slightly blurry when you run apps offline on devices with high-quality screens.

Making apps appear larger or smaller

Change the zoom level of an app to make its user interface appear larger or smaller. Return to the start screen to set the zoom level (press in the app designer until you reach it).

The zoom level can be set through a formula. This formula can reference a field accessible to your users (say, a number field with a slider) to enable users to set the zoom level. Be sure to make this field persistent so that the zoom level is remembered.

Colors

You can change the default color theme of an app using the inspector when the start screen of your app is active (press until you reach it):

Change a color by clicking the color circles. The color picker that appears initially shows you a palette with colors that work well together. Clicking the button enables you to select any color you like.

The field in the color picker displays the name of the color. There, you can type text like red, darkviolet, #f44336, rgb(255, 0, 0) and hsl 255 100% 100% to quickly select a color using a variety of color formats.

The app-wide colors you set here affect everything from your screens to your loading screen. You only need to set three base colors to completely change the color scheme of your app:

• The primary color, used for things like the navigation bar background, button labels and the loading screen background.
• The accent color, used for smaller areas like the thumb of a switch field.
• The background color, used for the areas behind fields and buttons.

You can also change colors for invididual screens through the inspector by first making the desired screen active and then changing the colors. Individual screens give you more color options.

Here, the user registration form demonstrated elsewhere has been given a fresh coat of paint by changing just the three base colors:

When assigning colors, you can be as specific as you like. To change the color of all field labels of the current screen, for instance, expand the Calculation screen colors section in the inspector and change the relevant color.

To change a color for a specific field, first select the field and then click the relevant color in the inspector. (Use the check boxes to change many fields at once.)

Colors that aren’t set are displayed as in the inspector. An undefined color defined on a screen tries to inherit the color from the preceding screen, meaning that it copies it. That means that colors set on the first screen apply to all screens of your app, unless the other screens choose their own colors.

Similarly, a group tries to inherit the background color from its screen if its background color isn’t set and a field tries to inherit the background color from its group if its background color hasn’t been set.

The first screen can’t copy colors from its preceding screen, as there isn’t any. As a result, it uses the app-wide colors you set through the start screen. If an app-wide color isn’t set, a pre-defined color is used (backgrounds are white by default, for instance). A non-base color, such as the color for field labels, uses a base color if it isn’t set.

Sometimes base colors are remixed to look better in a certain context. For instance, the backdrop color (the light gray color displayed just below the navigation bar in the registration form app above) uses the background color if it isn’t set explicitly, but makes the background color darker or lighter.

Setting colors using formulas

Colors can also be set through formulas, enabling you to take input from your users into account when selecting colors. You can use this feature to make the background color of all screens red if, and only if, a key calculated value is out of range.

You could also make invalid fields really stand out by changing their background colors when they become invalid, complementing the error message displayed by Calcapp’s field validation feature. You could even create a settings screen in your app where you allow your user to change the colors of your app using a drop-down field. (Be sure to make the drop-down field persistent so that your user’s choice is remembered.)

Click the fx button next to the color you want to set through a formula. The COLOR function is key to selecting colors in formulas. It accepts a text string describing a color and returns the color. It accepts the same input as the name field in the color picker, meaning that you can write formulas like COLOR("red")COLOR("red") and COLOR("#f44336")COLOR("#f44336").

Colors can also be referenced by typing Color.Color,, followed by the color name, like Color.RebeccaPurpleColor,RebeccaPurple, Color.RedColor,Red or Color.LightBlue300Color,LightBlue300. All named colors are available here.

Use the IF function to make decisions based on user input. To make an email field yellow if nothing has been entered into it, associate the following formula with its BackgroundColor property:

Returning a blank value from a color formula (typically using the BLANK function) has the same effect as not setting a color in the inspector at all, meaning that Calcapp first tries to inherit a color and, if that fails, uses a default color. To make Calcapp skip trying to inherit a color and have it use a default color directly, use the DEFAULTCOLOR function.

There are many functions for modifying and creating colors. BRIGHTEN makes a color brighter by a given amount, a number from 0 to 100. Setting the background color of a field is a great way to convey that a field is, say, 62 percent invalid, when the either-or mentality of Calcapp’s standard field validation isn’t enough.

To make a field background white if Field1 is 100, red if it is 0 and light red if it’s somewhere in between, use this formula connected to the BackgroundColor property of a field:

Next, learn about the various buttons you can add to your app »