Info
Content
Home Document
⌘K
Version 1.0

Snippets

Helpful code snippets have been collected from the Tadabase Community. Please note that these snippets are gradually being converted into plugins. As they become plugins, they will be removed from this page.

Converted to Plugin

Change the Time Field to a Dropdown

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Set Link Button to Open in a New Tab

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

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

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Change Link Button Color CSS for Active/Hover

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Google Charts Integration

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Add Logged in User's IP Address to Form

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Enlarge Thumbnail Images

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Link Button Pop-up

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Field Title Language - Based on Logged in Users' Language

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Filter Tab - Background Color

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Show Progress Based on Field Value

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Export Multiple Tables in a Single File

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Specify Size of Image Model Popup

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Refresh Entire Page after Form is Submitted

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Change Labels Language

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Run Basic Math in Real Time on a Form

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Set your Data Table to Auto-Refresh

Please note that this is now available as a plugin for easier installation. While you can use thi...

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 ...
Converted to Plugin

Vertical Text in Columns and Fields

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Mobile Menu Logo - When Menu is Closed

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

View Record Details on Parent Page

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Show loading GIF while Action Links Run

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Show columns based on the Users Role

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Change Checkbox Size

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Quick and Easy PDF Preview

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Set "Inputmode" on a Currency Field to a Decimal

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Remove Link from Signature Fields in Details Components

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Change Sub Menu Background Color and Text on Hover

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Change Image Thumbnail Sizes

Please note that this is now available as a plugin for easier installation. While you can use thi...

Change the Default Record Count Text

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

Copy Text on Click

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Limit Text- Show more

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Pause a Redirect of the Form

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Display Addresses in a Single Line in Table Components

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

CSS Option for Connection Fields in a Form Component.

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Convert your Calendar's Language

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Keep Columns Horizontally side by side on Mobile Devices

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Hide Columns Based on User Role

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Add Speech Recognition to Your Form

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Create an Anchor Link Button

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Refresh all Tables When Form is Submitted

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Customize Pagination Colors

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Keep Active Menu Item Highlighted

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Remove Background Color on Menu Item Hover and Focus

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Hide Submit Button Unless all Radio Options are “Yes”

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Hover text - Buttons

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

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

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Back Button

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Customize the Form Submission Dialog Box.

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Change Theme Button Colors

Please note that this is now available as a plugin for easier installation. While you can use thi...
Converted to Plugin

Fire Confetti🎉 When Submitting a Form

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Photos in Gallery Display

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Link highlighting Without Underline

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Move Form “Save” Button to Top of Form Page

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

How to Hide Arrows from Input Number

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Hide Components when there are no Records

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Mask Sensitive Form Values

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

Remove "Years" from a Date Formatted as Age

Please note that this is now available as a plugin for easier installation. While you can use thi...

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...
Converted to Plugin

How to add Delete Functionality Inside a Modal

Please note that this is now available as a plugin for easier installation. While you can use thi...

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

Save records to Google in batches

  /************* * Variables **************/ var Tadabase_App_Id = '

Override Action Link with Confirmation Popup

Add a CSS class to the action link column. In this example the CSS class is 'udaterecord'   2) ...

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

Converting a phone field to Country Dropdown

Please note that this is now available as a plugin for easier installation. While you can use thi...

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

Show multiple dates in a single calendar

Pasted in from this community post: https://community.tadabase.io/t/using-a-calendar-component-to...

Search Results

Clear Search
Back to top