Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  • 📖  Manual

  • 👋Welcome

    Welcome to Tadabase

    What Is No-Code?

    Tadabase Support

    Getting Started With Tadabase

    Platform Overview

    🧰The Data Builder

    Data Tables

    Fields

    Text Fields

    Personal Fields

    Number Fields

    Date Fields

    Option Fields

    File and Image Fields

    Equation Fields (Category)

    Equation Fields

    Connection Fields

    Date Equation Examples

    Records

    Record Logs

    Import Templates

    Export Templates

    Automating Tasks

    Number Equation Examples

    Text Equation Examples

    Multi-Function Equation Examples

    ✏️Page Builder

    Page Builder Overview

    Layouts

    Pages

    Components Overview

    PDF Pages (Alpha)

    PDF Pages 2.0

    📗System Components

    System Components Overview

    Menu

    User Menu

    Breadcrumbs

    PDF Print (Alpha)

    Link Button

    Login

    Signup

    Profile

    HTML

    Image

    Subscriptions (Alpha)

    📘Data Components

    Data Components Overview

    Form Component

    Table Component

    List Component

    Kanban Component

    Calendar Component

    Resource Component

    Map Component

    Timeline Component

    Accordion Component

    Card Component

    Chart Component

    Search Component

    Import Component

    Data Source

    Data Source Filtering

    Links

    Display Rules

    Inline Editing

    Data Component Visual Directory

    Custom Component

    Custom Component Helpers

    Writing Your Own Component Helpers

    🙋Users

    Users

    Roles

    Single Sign On (SSO)

    Adding Stripe Subscriptions

    🔒Security and Reliability

    Tadabase Builder Security

    App Security

    User Security

    🔗Integrations

    Zapier Integration

    Using Webhooks

    Saving files to Dropbox

    Adding PayPal payment buttons to your app

    Exporting records to Google Sheets

    Viewing data in Microsoft BI

    Chat Widgets

    REST API

    Using SendGrid for emails

    Saving files to AWS S3 Bucket (IAM Method)

    Incoming Webhooks

    Embeddable Components

    Saving Files to Custom S3 Bucket (Account Method, Recommended)

    PDF Forms

    Stripe Checkout

    JavaScript Callbacks and Actions

    Twilio Integration

    ⚙App Settings

    General Settings

    Layout & Format Settings

    Custom Domain

    Customizing CSS

    Changing app themes

    Support Settings

    404 Error Page

    💳Account

    Plans

    Managing Your Account

    Sharing your app builder

    Managing your Apps

    🧩Pipes

    Introduction to Pipes

    Adding Pipes

    Using Pipes

    PDF Gen V2

Categories
📖 Manual
📗 System Components
HTML

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. 

html-component.png

 

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.

2022-01-29_00-41-45.png

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. 

2022-01-29_00-44-18.png

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:

  1. Logged-in Fields are specific to the current logged in user.

  2. App Variables are configured through the App Variables Settings page.

  3. Formatted Values from the current record being referenced in components.

  4. 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.

2022-01-29_00-45-06.png

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.

2022-01-29_00-49-14.png

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.

2022-01-29_00-51-03.png

 

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: 

html-non-raw-objects.jpg

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!!}

    html-address-raw.jpg

  • Name

    • Title: {!!Name.title!!}

    • First Name: {!!Name.first_name!!}

    • Last Name: {!!Name.last_name!!}

    • Middle Name: {!!Name.middle_name!!}

    HTML-name-raw.png

  • File

    • Source: {!!File.url!!}

    • Name: {!!File.name!!}

    html-raw-file.jpg

     

  • Image

    • URL: {!!Image.src!!}

    • Name: {!!Image.name!!}

    html-raw-picture.jpg

     

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."

 

How did we do ?

Previous Article
Profile
Next Article
Image
Article Navigation
  • What is the HTML component?
  • Adding HTML components
  • Variables
  • Logged-in Fields
  • App Variables
  • Static App Variables
  • Formula App Variables
  • Formatted Record Values
  • Raw Record Values
  • Raw Object Values
  • Working with Raw Values with the new Files field.
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational