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:
- Create a Custom Component
- Select a Data table
- Edit the template with HTML code
- Code your custom validation in the JavaScript tab
- Bring your existing records with Tadabase API
- 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!
