Snippets | Tadabase

Change the Time Field to a Dropdown

The time picker field comes with a particular style that often isn't as mobile friendly. To chang...

Trigger Refresh When Integromat Completes

Using Ably you can create a 'websocket' to tell your app to do specific actions when an event out...

Converting an Index Match Setup to Tadabase

How to convert an Index Match setup to Tadabase:1. If you’re working with just a few basic value...

Set Link Button to Open in a New Tab

This snippet allows you to set a link button to open in a new browser tab. 1. Add the newTa...

How to Hide Component Based on “No Records” in Table

This snippet will teach you how to hide a component when a table doesn’t have any records showing...

Change Link Button Color CSS for Active/Hover

This snippet will teach you how to change a link button color (using CSS) for active/hover. H...

JS to Show/Hide Components Depending on Multiple Data Fields

This snippet will show you how to display certain form components (all others are hidden) dependi...

Google Charts Integration

This snippet will show you how to integrate Google Charts into Tadabase apps. You can use Data...

Change the Background Color of 2 Cards if the Numbers Match

This snippet will teach you how to change the background color of cards when the numbers on the c...

Save IP Address of Logged in User to the Record

In many cases, it may be helpful to have the User's IP address added to the record. In the follow...

Add Logged in User's IP Address to Form

To set up a form to Auto-fill an IP address, you can follow the following steps below. ...

Enlarge Thumbnail Images

Instead of opening an attachment field as full-size within a new tab, here is a way to stay on th...

Link Button Pop-up

Here are a few steps to view a linked page as a pop-up.First, in your builder, you will clic...

Field Title Language - Based on Logged in Users' Language

If you have multiple users who you would like to customize the language of your page for each, ...

Filter Tab - Background Color

To customize the design of your component to match the filter tabs, first, you will need to mak...

IF 2 Card Component Value's Match - Change Background Colors to Match

You can follow the following steps to get a tremendous visual of when 2 Card Values are the sam...

Show Progress Based on Field Value

Moving through progress on a task is excellent visual customization you can make to your page. ...

Export Multiple Tables in a Single File

You may want to simplify the export of many data tables within 1 page. Here I will show you jus...

Specify Size of Image Model Popup

Follow the steps listed below to customize the size of a file field's Image Model Popup. 1. ...

Refresh Entire Page after Form is Submitted

There as several use cases for why this may be beneficial to add to your page. For example, yo...

Change Labels Language

To change the language of the login component. Add the following Code to the JavaScript tab of ...

Run Basic Math in Real Time on a Form

Basic formulas work great, but sometimes, you’ll want to display a simple calculation on the form...

Set your Data Table to Auto-Refresh

There are many use cases for wanting your tables to refresh automatically to see the informatio...

CSS Color Gradient

This site generates code for you further customize your page's CSS in all areas. In most cases...

Embed Your App in a Webpage Without iFrame or Embed Code

You may want to embed your app into a webpage and have run into some issues. iFrames work well bu...

CSS for Table Component Title Text

We have many mobile app users who may need the title text of a table changed or many other cases ...

Vertical Text in Columns and Fields

If you need a little more room within a table to have the entire table visible, here is a gr...

Mobile Menu Logo - When Menu is Closed

Adding customization to a menu logo can significantly help the user experience for mobile user...

View Record Details on Parent Page

Here is a demo link to view the example Here is a great way to customize the details page to b...

Show loading GIF while Action Links Run

This is a great way to customize your action links. As they run the text will read "loading..."...

Show columns based on the Users Role

This is a way to customize a table with different views based on the logged-in user's role. ...

Change Checkbox Size

Here is a way you can customize a checkbox to be larger or smaller in one easy step. One E...

Quick and Easy PDF Preview

It can be helpful in many cases to have a page within your app to preview the PDF; follow th...

Card Component - Display Sales - Today vs. Yesterday

This example is easily customized for your use case. Here, a client requested to view a compari...

A Multi-Company Project Management Tool

To make a multi-company Project Management tool we will create an app template used in many oth...

Multi-Item Select for Form Input

Here is a solution if you have a table where you would like to add multiple products from a parti...

Set "Inputmode" on a Currency Field to a Decimal

This customization can be beneficial for many reasons. For example, it can be helpful on an app...

Remove Link from Signature Fields in Details Components

You may decide you do not want the link on your signature field and wish to remove it. Follow t...

Change Sub Menu Background Color and Text on Hover

As shown in the image, here’s some CSS that you can add to your layout or page to change the...

Change Image Thumbnail Sizes

For changing the thumb size of an image on a details page. Here is a CSS solution: Step 1 Ope...

Change the Default Record Count Text

This article is now archived. Changing the record names is now available directly in the compo...

Copy Text on Click

Suppose you want to make an element copyable by simply clicking on it. Here are some brief ins...

Delete Connected Child Records Along with the Parent Record

This is how you can set up a Pipe using the Tadabase REST API and an Action Link to delete conn...

Limit Text- Show more

Here’s a solution you can use to limit the number of characters text inside a table component ...

Pause a Redirect of the Form

You may want to pause your form's redirect for many reasons. In this instance, a user wanted to...

Display Addresses in a Single Line in Table Components

This is a great solution that you can use to display addresses in a table component across a si...

CSS Option for Connection Fields in a Form Component.

If you would like a CSS customization to change the display of a connected field in the form...

Generate Static Map Image

This snippet will show you how to generate a static map image. Step 1 To start, add a T...

Delete Link on Child Page

This method can create a scenario where users can delete a record from the child detail or edi...

Convert your Calendar's Language

Here is code you can use to update every button and text in the Calendar component to Spanish. ...

Include “Add New” Text Button When Using "table-style-2"

If you use “table-style-2” as your design... ...and want to include the text for the “Add Ne...

Keep Columns Horizontally side by side on Mobile Devices

Step 1 In each column, add the CSS class of "small-screen-column." Step 2 Get the...

Using Javascript to Manipulate Records Without Tadabase REST API

This method will expose your API credentials, which we highly recommend not doing and recommend l...

Hide Columns Based on User Role

This solution involves hiding columns based on the role of the logged-in user. This may be usef...

Add Speech Recognition to Your Form

Add Speech Recognition to record your words into a text field with this customization. Ste...

Create an Anchor Link Button

This is a way to create a button that goes to the row you would like your page to scroll to. ...

Refresh all Tables When Form is Submitted

This is a solution to refresh only the tables after a form's submit button is clicked without r...

Customize Pagination Colors

This CSS method can be applied to a page to customize the colors of the pagination buttons t...

Keep Active Menu Item Highlighted

When working with the Menu Component, you may decide to keep the active menu item highlighted, ...

Remove Background Color on Menu Item Hover and Focus

This is a solution to remove the background for menu items when hovering or clicking on them, a...

Hide Submit Button Unless all Radio Options are “Yes”

Since submit button display rules do not currently have the functionality to hide the submit bu...

Set a date based on a Quarter and Year

Here is how you can use the Custom JavaScript pipe > Moment.js call to set a date field base...

Hover text - Buttons

The following solution will show you how to have hover text displayed when the cursor is over a...

How to use (space) delimiters in an input-field for numbers in text-field

This solution is to set a text field with a predefined space between numbers. Step 1 Add the ...

Back Button

The following is a custom button and JavaScript solution to go back to a page according to t...

Customize the Form Submission Dialog Box.

Customize the colors of the dialog box that appears after form submission and set it to disa...

Change Theme Button Colors

You can change the primary button or other aspects of your theme by adding code to the Custom H...

Fire Confetti🎉 When Submitting a Form

Have you ever wanted to really celebrate a user submitting a form in your app? Well, now you c...

How to Add Checkboxes to Your Table and Add Logic to Them!

The following is a solution for adding checkboxes with logic to your table. As well as a sol...

Photos in Gallery Display

This is a great solution to display pictures stored in an attachment field as a gallery view...

Use Buttons to Search a Date Within a Range

The idea behind this method is to create a user experience where a user can click a date button...

Link highlighting Without Underline

Here’s some CSS for the modern blue link color. One Easy Step Add the following code t...

Hide the Refresh Box and Records Display in a Table.

The following solution will allow you to select which tables you may like to hide parts of, suc...

Move Form “Save” Button to Top of Form Page

The following solution uses CSS to move the location of the save button from the bottom of the ...

Card Component Enhancement

You can apply CSS to enhance the look and feel of cards like the image above. Step 1 Ad...

Apply CSS class to PDF Print/Download Button

This is a way to add a class to your print/download button. This way, you can edit the CSS o...

How to Hide Arrows from Input Number

This is a solution to hide the arrows shown in the image above. One Easy Step Add the fol...

Only Show Component if it’s the First Week of the Month

This is a solution to hide your component unless it is the first day of the month. One Eas...

Hide Components when there are no Records

You can add a little JavaScript to a page that will hide a Data Component if there are no re...

Multi-Step Background and Number/Icon Text Color

Here’s some CSS you may use to change the color of a form’s steps. One Easy Step Add t...

Use a Custom Icon in Card

If you have created icons and would like to use these custom icons on a few cards' this is a so...

Left Align Radio Buttons

Here is a solution to left-align radio buttons. One Easy Step Add the following cod...

Table Thumbnail Image Percentage Related Sizing

The following is a solution to make the thumbnail images on a table larger with consistent heig...

How to Round Filter Tabs

A few of our newer themes will automatically have tabs displayed rounded on a table if you woul...

Table Style 2

The following example is how to customize any table you wish into the table style seen here by ...

Table Style 3

The following is a customization to add table style 3 to any table you wish in your app. ...

Table Style 4

The following is a solution to customize a hover background color on a table's search box, relo...

Table Style 5

This is a way to customize any table you wish by adding a class selector of table-style-5 to yo...

Details Style 1

This is a solution to style your pages by adding "details-style-1" to any details component you...

Form Style One

The following is an example of style you may add to any form component. Step 1 Add the follow...

Form Style 2

Original Community Post: UI/UX CSS works - Community Discussions / Gettin...

Form Style 3

This option is to style your forms by adding "form-style-3" to any form you'd like to style. ...

Form Style Three

Style any form you like, as seen in the image here, by adding form-style-three to any form comp...

Form Style 4

Add form-style-4 to any form component you wish to style, like the image above. Step...

Form Style 5

Here is a solution to customize your form to the image by adding "form-style-5" to any form ...

Animated Save Button - Grab Attention

Grab a user's attention to the save button of the form, allowing them to stay on the page, and ...

Trigger Submit Button of the Other Form

The following is a solution to submit one form at the same time as another. If you hit the subm...

Mask Sensitive Form Values

Here’s a solution for setting up text fields to behave as masked passwords on the front end. ...

Capitalize First Letter in Fields

We have two options. Add code that will change all inputs on that page Find the ID of ...

Change Header Size - Resource Component

If you have ever wanted to change the width of the header column in the resource component, the...

Wrap Navigation Tabs for Mobile

This is a solution for making tabs wrap onto a new line for small screens. This tutorial assume...

Custom Print

Here is an option to use the Ctrl+P function with some JavaScript to create a custom print func...

Run JavaScript from an HTML Button Onclick Event

This is a solution to add a button anywhere on the page that would open a popup. Step 1 Ad...

Record Validation for a Specific Word.

Use a form/validation rule to find if the word added to the form is specific. If the word is no...

Remove "Years" from a Date Formatted as Age

The following CSS is a solution to remove the year's text from a table with a date formatted as...

Create a Record Entry Alternative to Using a QR Code Scan

This is a way to scan an NFC to create the record entry without allowing a form to be filled...

JSChart Custom Component

For more options on custom charts, here is a walkthrough on how you can complete this JSChart. ...

Concatenate Multi-Select Connections

This is a solution if you have many tables that are children of the other and want to rollup mu...

Add Freshdesk for Certain Roles or Pages

If you want to start using Freshdesk to support your clients but don't want to show the help/ch...

Hide Specific Part of a Menu Based on Logged in User Status/Role

We recommend creating more than one menu per layout to specify users' views based on their role...

Simple Scraper Setup

This is a great solution extract data from any website in seconds by setting up Simple Scraper ...

Validation rule - Validate against a connected field using a pipe

In this example, we are creating a validation rule with a pipe to prevent users from using more...

Change Button Based on Record Value

In this example, we are doing three comparisons using the {{#is}} helper to check if the status...

Hide Menu Links Based on Roles, Status or Logged in Users

This can natively have achieved by adding multiple rows in a layout and then protecting each of...

How to add Delete Functionality Inside a Modal

Here’s a way to add the delete functionality inside an edit popup modal. Step 1 Create a ...

Add a 360 tour to a Page.

Here is an example of how you can use an equation field to build and display HTML. The followin...

Create X Amount of Connected Records Based on a Number Field

The following demonstration will show you how to create X amount of connected Child records bas...

Pre Populate & Disable Date Range

This example could be used for a booking tool; here, we will use a date range field with the ti...

Covert Action button to Text when Pushed

In this example, we will use the equation value as the display for the action link, so we will ...

Access Data Table Records from JS

Here is a list of a few options can use a few options to access an array of records for program...

Concat Multiple Checkboxes While Filtering Duplicates

This is a solution to find only the unique checkbox choices with the custom JavaScript pi...

Read Receipts for When User Views the Details Page.

This is a way to create read receipts for users who click on the detail page in the table compo...

Number Count in Badge With Extra Filters

This is a solution to display a count of the total number of records connected to the logged-in...

How to Customize the Language of your Tadabase Charts

This snippet will teach you how to change the language of your charts using JavaScript. Step ...

How to Add Custom Themes to your Tadabase Charts

This snippet will teach you how to add custom themes to your charts using CSS. Step 1 Click ...

Using DataTables to show external Data

If you're looking to pull in dynamic data using rest API and show it in your app, you can do so w...