Info
Content
Home Document
⌘K
Version 1.0

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. 

 

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. 

There are 6 types of links that can be added: 

 

Edit, Delete and Record Detail Links

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

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

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: 

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

 

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

 

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}}
{{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 tb-value="Load More" class="btn btn-primary"}}

Refresh Records: 

{{tb_refresh tb-value="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. 

 

Back to top