HTML
What is the HTML component?
The HTML component is a System Component that enables you to add any custom HTML to a page or layout in a contained component. You can use HTML components to display dynamic details of a record, including logged-in field values that are dynamic to the logged-in user or app variables.
Adding HTML components
You can add an HTML component to a page or layout by adding it within an existing column, similarly to how you would add any other component. You can then select the HTML component from the list of System Components.
A new window will pop up prompting you to add your custom HTML. The HTML component is a WYSIWYG (What You See Is What You Get) editor and works similarly to any word processing program.
Variables
Variables can be used throughout your app to reference data that is stored in tables or configured through App Variables Settings. When adding these values into your HTML component the data will be dynamically updated to whatever values it was set to.
There are 4 main types of Variables:
-
Logged-in Fields are specific to the current logged in user.
-
App Variables are configured through the App Variables Settings page.
-
Formatted Values from the current record being referenced in components.
-
Raw Values from records reference fields within certain records including Name, Address, Link, Image, and File.
| Format | Example Output | |
| Logged In Field | {loggedInUser.Name} |
John Doe |
| App Variable | {!currentTime!} |
05:48 PM |
| Formatted Record Value | {Email Address} |
john@example.com |
| Raw Record Value | {!!Email Address!!} |
john@example.com |
| Raw Object Record Value | {!!Address.zip!!} |
90010 |
Let’s explore each of these variables in depth.
Logged-in Fields
When the option to Add Logged-in Field is selected through an HTML component, you may choose to reference fields from the record in the Users table for the specified logged-in user. By default, the available fields are Name, Email, Status, and Role where these options depend on the corresponding fields configured in the User’s table of the given app.
App Variables
App Variables are the reference-able values that can be configured in the App Variables Settings page. There are 5 default variables in place and any additional variables configured will be listed below where any custom variables added can be edited and deleted.
There are two main ways to configure App Variables.
Static App Variables
Static App Variables are predefined keys that are associated with a value and are formatted between curly braces and exclamation points. Similar to this: {!companyName!}
With an app variable you can define that {!companyName!} is equal to “My Company, LLC” and if you ever need to change this such as if you’re building this app for several clients, you simply change it once and it will dynamically update each instance of the variable.
Formula App Variables
Dynamic App Variables are similar to Static App Variables (outlined in the previous section) and are used the same way, however, the value that will be outputted are number values from a predefined condition.
For example, this can be anything similar to Complex Formulas, namely: Count, Sum, Max, Min and Average. As an example, you can create a variable called “Total Jobs” which will count all the jobs in the database.
When using Formula Variables, you can add conditions as well. In the example above, we can also choose to add conditions to only count jobs where the status is Done.
App variables are only loaded when the page loads and not auto refreshed with record changes until the page reloads again. If you're looking at displaying live data inside your app as a summary, but sure to check the Card component.
Formatted Record Values
When working with HTML components on various pages, you may notice an Add Field button available next to the options to select App Variables or Logged-in Fields. The options available within this selection are known as Formatted Values and are available on HTML components placed on dependent Details or Edit pages or within List components.
Accessible through HTML components applied to dependent pages or List components are Formatted Values which reference record-specific values.
The main difference between these two types of HTML components is that one on a dependent page or in a List component has a specific table and record to reference where one within an independent page is not connected to a table or record.
Raw Record Values
Raw record values will output just the value without any formatting. For example, instead of an email being displayed as a link (<a href="mailto:mailto=john@example.com">john@example.com</a>), it will appear as plain text: john@example.com
Raw Object Values
When a field is considered an object, you can access any part of that object with a unique variable.
Objects are any field that contain multiple columns that make up its final value, for example:
- Name (Title, First Name, Middle Name, Last Name)
- Address (Address1, Address2, City, State, Zip, Country, Lat, Lon)
- Image (Name, URL)
- File (Name, URL)
Listed below are name formats that can be followed when referencing your variables.
First let's see how the output looks with formatted values:
As you can see all the values are outputted as a single value. If we wanted to reference a single part of the value, for example, just the city of an address field we can do so with Raw Values:
-
Address
-
Address:
{!!Address.address!!} -
Address Line 2:
{!!Address.address2!!} -
City:
{!!Address.city!!} -
State:
{!!Address.state!!} -
Zip:
{!!Address.zip!!} -
Country:
{!!Address.country!!} -
Latitude:
{!!Address.lat!!} -
Longitude:
{!!Address.lng!!}
-
-
Name
-
Title:
{!!Name.title!!} -
First Name:
{!!Name.first_name!!} -
Last Name:
{!!Name.last_name!!} -
Middle Name:
{!!Name.middle_name!!}
-
-
File
-
Source:
{!!File.url!!} -
Name:
{!!File.name!!}
-
-
Image
-
URL:
{!!Image.src!!} -
Name:
{!!Image.name!!}
-
You can also access the record ID by passing raw variable of {!!id!!} This can be especially helpful when you want to use this in links, or in emails to link back to a specific record.
When referencing the desired Raw Variable, we will take the given field Name and the original Label. This means that, regardless of the custom label configured for the variable, the original will always be used when referencing the Raw Variable.
For example, we may include an Address Field in a Client table named Client Address. For the Zip value, we apply the custom label Postal Code. When referencing this value through Raw Variables in our app, we will use the following format referencing the value through the original label: {!!Client Address.zip!!}.
Working with Raw Values with the new Files field.
The new Files field has the ability to upload multiple files and therefore has some unique charteristics that need to be addressed.
-
{!!Files!!}- This will output a comma seperated list of all the files formatted as HTML links. -
{!!Files.url!!}- This will output only the first file url. -
{!!Files.name!!}- This will output only the first file name. -
{!!Files.urls!!}- This will output a comma seperated list of the urls for all the files -
{!!Files.names!!}- This will output a comma seperated list of the file names for all the files
To target a specific image URL or name, you can use the following:
-
{!!field_36.0.name!!}- This will output the file name for the first file. -
{!!field_36.0.url!!}- This will output the url for the first file.- To view the second image, simple change the 0 to a 1, 3rd image, change it to a 2 etc...
-
Please be sure you're using the field_id and not the field name when targeting a specific image. If your field name is called "Files" and the field id is field_36, ensure you use field_36 and not "Files."