We spend most of our time developing the core Calcapp technology, but we also maintain a few calculator apps for clients. This is a good thing, as it ensures that we use Calcapp in the same way you do. Making extensive use of our own product enables us to find bugs and usability problems, which are then often fixed in short order.
We were recently tasked with adding a registration form to one of these apps, enabling our client to get an idea of who their users are. The idea is that users are asked to fill our their name, email address, employer and company size. There is a button that sends this information as an Excel-compatible CSV file. They are then asked to agree to our client’s terms of service before they’re allowed to access the rest of the app.
This registration form has been made available as a template in Calcapp Creator. Simply select the Registration form template in the Manage apps window (reachable from the main menu ) to create an app with the registration form described here. You can also run an app with the registration form.
We wouldn’t have been able to build this registration form without calculated properties. We need calculated properties to ensure that users can’t use the app without agreeing to the legal terms and to ensure that the entered data appears to be valid (using data validation). In this post, we’ll walk you through the process.
The video above includes closed captioning explaining the various steps. A more detailed discussion appears below.
(This is our first video tutorial. Is it easy to follow? Would you have preferred audio narration? Do you have suggestions for topics we should cover in the future? Let us know!)
Creating the elements of the form (00:02)
Three groups are created, with the first one containing the registration information, the second one containing a button that sends the registration information through email and a third group asking the user to accept the terms of service. (A real registration form would link to the terms of service.) The name, email address and company name need to be turned into text fields, while the last field (the company size) can remain a number field.
Setting the sender of the emails (01:37)
The sender property of the email button is a calculated property,
meaning that its value can be derived from a formula evaluated when
the app is run. Here, we want the emails to appear to be sent from
the user pressing the button. As such, we simply set the formula to
Email,
which is the name of the email field.
Validating the name field (01:54)
The Valid property is also a calculated property, meaning that we can use a formula to determine if it’s valid. While number fields can be validated by setting minimum and maximum values, text fields (and all other fields) can only be validated by associating a formula with the Valid property.
The name field should not be considered invalid if it hasn’t been
filled out. The ISDEFINED formula function returns TRUE if a value
has been entered, so we start the formula with !ISDEFINED(Name) to
ensure that empty name fields are considered valid. (!Value is equivalent to
NOT(Value)
in Calcapp.)
Name fields should also be considered valid if they contain a space
(separating the first and last names) and the length of the name is
greater than four. Checking the length of the name is easy using the
LEN formula function: LEN(Name) > 4.
Determining if the name contains a space character can be done with
the FIND formula function. This function returns the index of the
found substring, meaning that FIND("b", "abc")
returns 2 (“a” would return 1). If the string cannot be found, the
FIND function returns an error. A valid name should contain a space
and we need to ensure that the FIND function does not return an
error. This can be accomplished with the ISERROR function, which
returns TRUE if the given parameter is an error and FALSE otherwise.
Putting these two functions together, we get this formula:
!ISERROR(FIND(" ",
Name)).
A name field should be considered valid if no name has been provided or it contains a space character and the length of the name is greater than four. To accomplish this with one formula, we combine the three fragments:
(In Calcapp formulas, Value1 || Value2 is
equivalent to OR(Value1, Value2) and
Value1 &&
Value2 is equivalent to AND(Value1, Value2).)
For more information on any of the functions mentioned here, consult the reference sidebar.
Note: This formula illustrates several important concepts related to formulas and validation. It isn’t a great way to validate names, though. There are names which are shorter than five characters and do not include a space character.
Validating the email field (02:27)
The email field is considered valid if it hasn’t been filled out or if it contains an at sign (“@”). The formula associated with the Valid property is similar to the formula of the name field:
Note: While checking for the presence of an at sign is correct, fully validating an email address is more complex. We could add a specialized formula function to Calcapp if this need arises frequently.
Showing the company size field only if there is an employer (02:55)
The fourth field should only be visible if the user has filled out the employer field. We accomplish this by associating a formula with the Visible property of the company size field:
The ISDEFINED formula function returns TRUE if, and only if, the employer field has been filled out, which is perfect for determining when the company size field should be visible.
(The ISDEFINED function is an addition we have made to Calcapp and is
not found in spreadsheets. ISDEFINED(Value) is
equivalent to NOT(ISBLANK(Value)).)
Enabling the email button (03:12)
The email button which sends the user information through email should only be enabled when all required fields have been properly filled out, meaning that it’s grayed-out and cannot be clicked otherwise. To accomplish this, we associate a formula with the Enabled property of the email button:
This formula ensures that the email button is only enabled if both the name and the email fields are valid. (Calculated properties of fields can be accessed from formulas by typing the field name, followed by a period and the name of the property.) Remember that the name and email fields are considered valid even if they haven’t been filled out. The email button should remain grayed-out if they haven’t been filled out, though, meaning that we need to explicitly check if these fields have been assigned values in the formula above (again, using the ISDEFINED formula function).
Ensuring that users agree to the terms of service (03:37)
To ensure that users agree to the terms of service, we need to prevent them from moving on to the next panel if the switch field has not been switched on. Calculation panels (and text panels) feature the property NextPanelAvailable which can be used for this purpose. To reveal the properties of the current panel in the inspector (as opposed to the properties of its fields, buttons and other items), click the panel toolbar housing the panel title and the back and forward buttons.
The user should only be allowed to move forward to the next panel if the switch field has been switched on, making the formula of the NextPanelAvailable property simple:
(In the video, this field name is inserted into the formula by clicking it instead of typing the name manually. Do whatever is most efficient for you.)
Note: The switch field was renamed in the video prior to typing in the formula. The names fields are assigned based on their captions can sometimes be overly long. By manually assigning more concise names, we make formulas referencing these fields terser and easier to read.
Adding a hidden field with the current date and time (03:55)
The registration information is sent as a CSV file, which can be imported into popular spreadsheets and databases. Having the current date and time available directly in the CSV file can be convenient, but there is no point in showing this information to the user. Calcapp supports hidden fields, which are not shown to the user but are made part of reports, which are perfect for this task.
We add a hidden output field and assign it the following formula:
The NOW formula function returns the current date and time (as a spreadsheet-friendly sequential serial number).
Previewing the registration form (04:18)
The play button brings up the preview. Notice in the video that the name and email fields turn red when values are entered that are considered invalid. Had the user not corrected the values and paused for a second or two, a generic error message would have been displayed. (The inspector can be used to assign a custom error message.)
When both the name and email fields have been filled out with correct values, the button is enabled and can be clicked. When the employer field is filled out, the company size field is revealed.
Nothing happens when the user in the video switches on the switch field, though, indicating that he or she has accepted the terms of service. This is because there is no panel following the registration form. Had there been such a panel, there would have been a button labeled Next in the upper-right corner which would have been enabled when the user switched on the switch field. (This can be seen in the video for this post.)
Again, this registration form is available for use in your apps as the Registration form template in Calcapp Creator. Create a new app based on this template using the Manage apps window, reachable from the main menu .
Do you have any requests for other topics we should cover in a future video tutorial? Let us know!