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

    📗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
📘 Data Components
Custom Component

Custom Component

With the custom component builder you can create and design nearly any visual representation of your data with custom code. 

While Tadabase is a no-code platform, we wanted to ensure you'll have an escape hatch to satisfy nearly any design requirements. However, the Tadabase support team is unable to troubleshoot custom code. We recommend utilizing the community for assistance with custom code. 

 

Please note: The custom component relies heavily on handlebarsjs, nearly anything possible in handlebars should be applicable here as well. 

 

Adding Custom Component

Add a custom component is similar to adding most components, except you get to choose one of three options. 

  • List
  • Details
  • Summaries

List

With the list you can add many field values from a given table. 

Details

Details will only work in specific situations and will show a single record. 

Summary

Will output just a number, similar to the card component. 

 

Adding a custom component

To start, you must have the "each helper" then add the field names inside of double curly braces. You can add any standard HTML as well as you normally would. 

For example: 

{{#each records}}

Name: {{field_100}}

{{/each}}

When working with the Summary component, the only field value available is {{total}}:

{{#each records}}

Total: {{total}}

{{/each}}

Adding a field inside the curly braces is not enough for loading the data. For security reasons you must also ensure the field you're adding is added to the field list. 

 

Working With Links

Similarly to other components, you can add links to edit, delete and view record details. Once a link is added the link will be added to the top bar where it can be further customized. 

Each link will be assigned a unique ID after its added to the component. This will be the ID used when assigning custom options to this link. The link will look similar to this: {{tb_link this tb-id="1"}} It's important not to change the structure of the link as each part is essential for making the link work. 

There are 6 types of links that can be added: 

  • Edit Link
  • Delete Link
  • Record Details Link
  • Connected Page
  • Action Link
  • Record History

 

Edit, Delete and Record Detail Links

The edit link must be added inside a href link 

For example this link helper {{tb_link this tb-id="1"}} will output a static URL unless its inside a href link. 

To make the link work, add it inside of a href like so:

 <a href="{{tb_link this tb-id="1"}}">Click Here to Edit</a>

You can add and customize this link like any HTML with classes and id's etc. 

<a class="btn btn-primary" href="{{tb_link this tb-id="1"}}">Click Here to Edit</a>

If you prefer to open the Edit and Details link in a pop up you can add a custom parameter like so. Having the link open in a pop up using this method requires that it NOT be inside an 'a href' tag. 

{{tb_link this tb-id="3" tb-value="Detail" tb-open-popup="1"}}

If its important for you to be able to open the details page in a popup using your own link,  you can do so by setting several additional parameters: 

{{tb_link this tb-id="3" tb-value="Detail" tb-open-popup="1" class="tb-link-action-click tb-link-in-popup" data-tb-page-id="4MXQJeqNZ6" data-tb-rid="{{id}}" data-tb-page-title="Edit This From Custom Page"}}

Don't forget to update the page ID with the page ID of the detais. 

 

Action Links

Action links can NOT be added inside of an href link. If the ID for your action link is "4" the link must simply look like this without any a tag. 

{{tb_link this tb-id="4"}}

If you'd like to customize it a bit, you can do so with custom tags like so:

{{tb_link this tb-id="4" class="btn btn-primary"}}

 

Working with Fields

Certain fields require extra attention to ensure they work correctly.

HTML fields

Fields such as Rich Text and Text Formula produce HTML as the output. By default this will not be displayed as HTML unless you use triple brackets instead of double. 

{{{field_39}}}

 

Object Fields

Object fields are fields that have more than one value, for example, Name, Address and Link. 

To access a subpart of an object field, you must use prefix the field with obj and then use the field value you wish to see. 

For example: 

{{obj.field_39.title}}
{{obj.field_39.first_name}}
{{obj.field_39.middle_name}}
{{obj.field_39.last_name}}

In the address field: 

{{obj.field_40.address}}
{{obj.field_40.address2}}
{{obj.field_40.city}}
{{obj.field_40.state}}
{{obj.field_40.zip}}
{{obj.field_40.county}}
{{obj.field_40.lat}}
{{obj.field_40.lng}}

Link Field: 

{{obj.field_46.link}}
{{obj.field_46.text}}

Image Field: 

{{obj.field_41.src}}
{{obj.field_41.width}}
{{obj.field_41.height}}

File Field: 

{{obj.field_44.disk}}
{{obj.field_44.ext}}
{{obj.field_44.fileName}}
{{obj.field_44.key}}
{{obj.field_44.secured}}
{{obj.field_44.size}}
{{obj.field_44.status}}
{{obj.field_44.type}}
{{obj.field_44.url}}

Attachments fields store all the images in an array. To get the first value you can do the following: 

{{obj.field_45.[0].disk}}
{{obj.field_45.[0].ext}}
{{obj.field_45.[0].fileName}}
{{obj.field_45.[0].fileId}}
{{obj.field_45.[0].key}}
{{obj.field_45.[0].secured}}
{{obj.field_45.[0].size}}
{{obj.field_45.[0].status}}
{{obj.field_45.[0].type}}
{{obj.field_45.[0].url}}

You can also, loop through each image with an each helper. 

{{#each obj.field_36}}
    <img src="{{url}}" width="{{width}}"/>
{{/each}}

Built-in Helpers

There are many helpers included to help you produce the exact results you wish to show. 

 

IF helper
{{#if field_37}}
	//If field_37 is set, the code here will run. 
{{/if}}

Suppose you have a number field and you wish to apply some math to this number, but only if this value exists. 

{{#if field_37}}
	{{multiply field_37 10}}
{{/if}}

The above code will multiply field_37 by 10 only if field_37 exists. 

You can also add an 'else' statement if the value is not true. 

{{#if field_37}}
	{{multiply field_37 10}}
{{else}}
	Field 37 has not been set!
{{/if}}

 

Unless Helper: 

Similar to the If helper, this one will only run if the value is false. 

{{#unless field_37}}
	Field 37 has not been set!
{{/unless}}

 

Nesting Helpers (subexpressions):

In the event you need to use multiple helpers at the same time you can nest one helper inside of another. 

Suppose you have a number output and you want to multiply it by 10, you would do this: 

{{multiply field_37 10}}

But, if you wanted to first add 5, you would do the following: 

{{multiply (add field_37 5) 10}}

What the above code does, is first take field_37 and add 5 to it, next it gets passed to the outer helper, in this case the multiply helper and will multiply the new number by 10. 

There are many additional helpers available which can be found here: 

 

Working With Pagination

Within the list component you're able to use the default pagiation or a custom helper that will load the next set of records below the current set. 

{{tb_load_more atitle="Load More" class="btn btn-primary"}}

Refresh Records: 

{{tb_refresh atitle="Refresh" class="btn btn-primary"}}

Get Current Page

{{tb_current_page}}

Get Total Pages

{{tb_total_pages}}

Get Total Records

{{tb_total_records}}

Get Current Records

{{tb_current_records}}

 

Working With Search

To add a search input field

{{tb_search_input}}

Search Submit Button: 

{{tb_search_submit}}

Clear Search Button

{{tb_search_clear}}

 

Working with Filters 

{{tb_filter tb-id=1 tb-value="Filter1" tb-icon="fa-clouds"}}

Clear Filters: 

{{tb_filter_clear}}

Additional Resources

Each custom component can have its own custom Javascript, CSS and external dependent resources. To add exteral JS or CSS resources, simply put in the resource url with any script tags. 

 

How did we do ?

Previous Article
Data Component Visual Directory
Next Article
Custom Component Helpers
Article Navigation
  • Adding Custom Component
  • List
  • Details
  • Summary
  • Adding a custom component
  • Working With Links
  • Edit, Delete and Record Detail Links
  • Action Links
  • Working with Fields
  • HTML fields
  • Object Fields
  • Built-in Helpers
  • IF helper
  • Unless Helper:
  • Nesting Helpers (subexpressions):
  • Working With Pagination
  • Working With Search
  • Working with Filters
  • Additional Resources
  • Back to top
    Developer portal Tadabase Community
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational