How to compare data with existing records using Custom Component!

Hello folks!

Comparing data with existing records it’s possible using the Custom Component. In this post, we’ll show you how step-to-step:

  1. Create a Custom Component
  2. Select a Data table
  3. Edit the template with HTML code
  4. Code your custom validation in the JavaScript tab
  5. Bring your existing records with Tadabase API
  6. Compare your data!

Step 1: Create a Custom Component
First, we must create our Custom Component.

**If you do not see this icon, please reach out Tadabase support since this is in early beta and it is available for some developers.

Step 2: Select a Data table
Click on details > Select your Data table

Step 3: Edit the template with HTML code
In the template tab, you can add HTML code, we will use this code as an example:

{{#each records}}

<label>Date</label><be>
<input  class="form-control ng-pristine ng-valid ng-empty ng-valid-datetime ng-touched" 
id="SessionDate" type="datetime-local">

{{/each}}

We can check in the preview tab to check if HTML code is working

Step 4: Code your custom validation in the JavaScript tab
In the JavaScript tab we will code our custom validation.
Now we have our Date in a variable (the one we will use to compare with existing records).

document.getElementById("validate").onclick = function () { validateSession() };
async function validateSession(){
var attemptedDate = document.getElementById("SessionDate").value
}

Step 5: Bring your existing records with Tadabase API
Now we will bring our existing records with an API call, for this we will use Tadabase API(https://developer.tadabase.io/#a08faacc-cf69-43b3-bc2f-0af4e49ea96a) Hyperlink.

document.getElementById("validate").onclick = function () { validateSession() };
async function validateSession(){

var attemptedDate = document.getElementById("SessionDate").value
await filterRecord("4YZjnDNPvl","field_598","contains","111134");

}

async function filterRecord(tableID, field, conditional, val) {
var response = await $.ajax({
    type: "GET",
    url: "https://api.tadabase.io/api/v1/data-tables/"+tableID+"/records?filters[items][0][field_id]="+field+"&filters[items][0][operator]="+conditional+"&filters[items][0][val]="+val,
    contentType: "application/json",
    dataType: "json",
    headers: {
        'X-Tadabase-App-id': "PUT YOUR TADABASE APP ID using App Variables",
        'X-Tadabase-App-Key': "PUT YOUR TADABASE APP KEY",
        'X-Tadabase-App-Secret': "PUT YOUR TADABASE APP SECRET",
    }

}).then(function (response) {
    return response;
}).fail(function (failed) {
    return failed;
});
return response;
}

**a. Table ID can be found here:
Click on your Table
Check URL

Example: https://build.tadabase.io/{}/apps/manage/{}/dataTables/{TABLEID}/records/

**b. Field ID can be found here:
Go to Data Builder> Your Table > Go to your field

Click on Edit

**c. Conditional parameter Can be: is, is not, is before, is after, is today, is today or before, is today or after, is before today, is after today, is blank, is not blank, is before current time, is after current time.

**d. Create App Variable:
You can create them in:
Settings>App Variables> Add New

**e. Value that you want to filter, example:
Return every product that a client bought based on his email

await filterRecord("4yQkqKmrgP","field_332","is","client@test.com");

Product TableID , email field, is, client’s email

Tadabase AP ID, Key and App Secret could be found here:

In the API response we will receive an array of items, each item will be an existing record, this item will also have all fields that belong to that table, so you can compare any field you want.
For this example, we chose Date field to compare, so here we can see that Attempted Session Date value is compared with existing records date field (field_239):

Disclaimer: You can compare any field you want, but for this example we did it with Dates.

document.getElementById("validate").onclick = function () { validateSession() };
async function validateSession(){

var attemptedDate = document.getElementById("SessionDate").value


try {
    
    var sessionstoCompare = await filterRecord("4YZjnDNPvl","field_598","contains","111134");
    var sessions = sessionstoCompare.items    
    
    for (let i = 0; i < sessions.length; i++) {
        
        var session = sessions[i].field_239; // 2021-07-27
        var formattedSession = moment(session,"YYYYMMDD");
        
        // Put your validations here
        // Example
        if(moment(formattedSession).isAfter(attemptedDate)){
            alert("This Date is after an existing record Date")
        }
    }
    
} catch (error) {
    console.log(error);
}
}

async function filterRecord(tableID, field, conditional, val) {
var response = await $.ajax({
    type: "GET",
    url: "https://api.tadabase.io/api/v1/data-tables/"+tableID+"/records?filters[items][0][field_id]="+field+"&filters[items][0][operator]="+conditional+"&filters[items][0][val]="+val,
    contentType: "application/json",
    dataType: "json",
    headers: {
        'X-Tadabase-App-id': "PUT YOUR TADABASE APP ID using App Variables",
        'X-Tadabase-App-Key': "PUT YOUR TADABASE APP KEY",
        'X-Tadabase-App-Secret': "PUT YOUR TADABASE APP SECRET",
    }

}).then(function (response) {
    return response;
}).fail(function (failed) {
    return failed;
});
return response;
}

For this tutorial we use Momentjs to handle dates, if it is your case too add this line of code into your Custom Footer Code:

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>

If you liked this, please leave a comment below, we’d love to read it!

1 Like

Hey @Soluntech,

This is really awesome and super creative, I definitely do not want to take away from that! Credit where credit is due :trophy:

I just want to point out that this will expose your API credentials and under no circumstances do we recommend doing that.

I’d love to see if we can work together to find an alternative way of doing this :grinning:

Hello @tim.young ,

Thanks for your annotation! We’ve updated the post with a safer option: Creating an App Variable to keep hidden valuable data such as API credentials!

Best regards,