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
📘 Data Components
Writing Your Own Compo...

Writing Your Own Component Helpers

Using Handlebars, you can create your own Helpers similar to the helpers we have built-in. 

For example, you can create a helper that checks a particular value that starts with a defined value. 

Helpers must be defined in the Javascript of the page or within a script tag in the Custom Footer code, not in the Component. 

Adding this code in the Javascript of the page will give us a new helper we can use in the custom component: 

Handlebars.registerHelper("starts_with", function(value1, value2) {
    if(value1.startsWith(value2)) {
        return value1;      
    }
});

In the custom component, we can use the code like so: 

{{starts_with field_43 "113-8214591"}}

If field_43 starts with that string, it will return field_43, otherwise, it won't. 

 

Mix and match helpers. 

You can use more than one helper at a time by passing the helper in parenthesis. 

{{#if (starts_with field_283 "113-8214591") }}

Yes it does start with that value. 

{{/if}}

 

Data parsing using helpers

Say we have a data table of Shopping Lists and want to group it by category, so we know what section of the grocery store to go to.

You can also create a helper to loop through and change the structure of the data. For example, you could use a custom helper if we wanted to group a shopping list by category.

Handlebars.registerHelper("groupData", function(data) {
    var parsedData = {
        list:{}
    };
    for (var i = 0; i < data.length ; i++) {
        var a = data[i];
        var cat = a.field_ID; // REPLACE WTIH THE CATEGORY FIELD ID
        if(typeof parsedData['list'][cat] === 'undefined'){
            parsedData['list'][cat] = [];
        }
        parsedData['list'][cat].push(a);
     }
     return parsedData;
});

Then, in the custom component, we can add the following.

<div class="custom-component">
    <h1>Shopping List</h1>
    {{#each (groupData records)}}
        {{#each this}}
    
            <h2>{{@key}}</h2>
            <ol class="continuous-list">
            {{#each this}}
                {{#unless field_64}}
                    <li>{{tb_link this tb-id="1"}} {{field_62}}</li>
                {{/unless}}
            {{/each}}
           
            </ol>
              
        {{/each}}
    {{/each}}
    <h1>Checked</h1>
    <ol class="continuous-list ">
        {{#each records}}
            {{#if field_64}}
                <li>{{tb_link this tb-id="2"}}<span class="strikethrough">{{field_62}}</span></li>
            {{/if}}
        {{/each}}
    </ol>
</div>

How did we do ?

Previous Article
Custom Component Helpers
Next Section
🙋 Users
Article Navigation
  • Mix and match helpers.
  • Data parsing using helpers
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational