Logo
For example "scheduled tasks"
Search
Info
Content
Category Navigation
  •   Snippets

  • Change the Time Field to a Dropdown

  • Trigger Refresh When Integromat Completes

  • Converting an Index Match Setup to Tadabase

  • Set Link Button to Open in a New Tab

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

  • Change Link Button Color CSS for Active/Hover

  • JS to Show/Hide Components Depending on Multiple Data Fields

  • Google Charts Integration

  • Change the Background Color of 2 Cards if the Numbers Match

  • Save IP Address of Logged in User to the Record

  • Add Logged in User's IP Address to Form

  • Enlarge Thumbnail Images

  • Link Button Pop-up

  • Field Title Language - Based on Logged in Users' Language

  • Filter Tab - Background Color

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

  • Show Progress Based on Field Value

  • Export Multiple Tables in a Single File

  • Specify Size of Image Model Popup

  • Refresh Entire Page after Form is Submitted

  • Change Labels Language

  • Run Basic Math in Real Time on a Form

  • Set your Data Table to Auto-Refresh

  • CSS Color Gradient

  • Embed Your App in a Webpage Without iFrame or Embed Code

  • CSS for Table Component Title Text

  • Vertical Text in Columns and Fields

  • Mobile Menu Logo - When Menu is Closed

  • View Record Details on Parent Page

  • Show loading GIF while Action Links Run

  • Show columns based on the Users Role

  • Change Checkbox Size

  • Quick and Easy PDF Preview

  • Card Component - Display Sales - Today vs. Yesterday

  • A Multi-Company Project Management Tool

  • Multi-Item Select for Form Input

  • Set "Inputmode" on a Currency Field to a Decimal

  • Remove Link from Signature Fields in Details Components

  • Change Sub Menu Background Color and Text on Hover

  • Change Image Thumbnail Sizes

  • Change the Default Record Count Text

  • Copy Text on Click

  • Delete Connected Child Records Along with the Parent Record

  • Limit Text- Show more

  • Pause a Redirect of the Form

  • Display Addresses in a Single Line in Table Components

  • CSS Option for Connection Fields in a Form Component.

  • Generate Static Map Image

  • Delete Link on Child Page

  • Convert your Calendar's Language

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

  • Keep Columns Horizontally side by side on Mobile Devices

  • Using Javascript to Manipulate Records Without Tadabase REST API

  • Hide Columns Based on User Role

  • Add Speech Recognition to Your Form

  • Create an Anchor Link Button

  • Refresh all Tables When Form is Submitted

  • Customize Pagination Colors

  • Keep Active Menu Item Highlighted

  • Remove Background Color on Menu Item Hover and Focus

  • Hide Submit Button Unless all Radio Options are “Yes”

  • Set a date based on a Quarter and Year

  • Hover text - Buttons

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

  • Back Button

  • Customize the Form Submission Dialog Box.

  • Change Theme Button Colors

  • Fire Confetti🎉 When Submitting a Form

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

  • Photos in Gallery Display

  • Use Buttons to Search a Date Within a Range

  • Link highlighting Without Underline

  • Hide the Refresh Box and Records Display in a Table.

  • Move Form “Save” Button to Top of Form Page

  • Card Component Enhancement

  • Apply CSS class to PDF Print/Download Button

  • How to Hide Arrows from Input Number

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

  • Hide Components when there are no Records

  • Multi-Step Background and Number/Icon Text Color

  • Use a Custom Icon in Card

  • Left Align Radio Buttons

  • Table Thumbnail Image Percentage Related Sizing

  • How to Round Filter Tabs

  • Table Style 2

  • Table Style 3

  • Table Style 4

  • Table Style 5

  • Details Style 1

  • Form Style One

  • Form Style 2

  • Form Style 3

  • Form Style Three

  • Form Style 4

  • Form Style 5

  • Animated Save Button - Grab Attention

  • Trigger Submit Button of the Other Form

  • Mask Sensitive Form Values

  • Capitalize First Letter in Fields

  • Change Header Size - Resource Component

  • Wrap Navigation Tabs for Mobile

  • Custom Print

  • Run JavaScript from an HTML Button Onclick Event

  • Record Validation for a Specific Word.

  • Remove "Years" from a Date Formatted as Age

  • Create a Record Entry Alternative to Using a QR Code Scan

  • JSChart Custom Component

  • Concatenate Multi-Select Connections

  • Add Freshdesk for Certain Roles or Pages

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

  • Simple Scraper Setup

  • Validation rule - Validate against a connected field using a pipe

  • Change Button Based on Record Value

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

  • How to add Delete Functionality Inside a Modal

  • Add a 360 tour to a Page.

  • Create X Amount of Connected Records Based on a Number Field

  • Pre Populate & Disable Date Range

  • Covert Action button to Text when Pushed

  • Access Data Table Records from JS

  • Concat Multiple Checkboxes While Filtering Duplicates

  • Read Receipts for When User Views the Details Page.

  • Number Count in Badge With Extra Filters

  • How to Customize the Language of your Tadabase Charts

  • Save records to Google in batches

  • Override Action Link with Confirmation Popup

  • How to Add Custom Themes to your Tadabase Charts

Categories
Snippets
Field Title Language -...

Field Title Language - Based on Logged in Users' Language

0e605b7aa647a1b0037d5fc151f0ad5b121bc6a9-(1).jpeg

If you have multiple users who you would like to customize the language of your page for each, this is how you can do so.

1. Inside your Users table, add a field called “Language."

2022-08-23_22-51-32.png


2. Create a dictionary or words that will be converted into different languages. The word on the left is what we will search for, and the right is what will be replaced depending on the chosen language".

const translations = {
    // English translations
    "English": {
        "Customer": "Customers Name",
        "Email": "Enter your email address",
        "Save": "Save Record",
    },
    // Spanish translations
    "Spanish": {
        "Customer": "Nombre del cliente",
        "Save": "Guardar registro",
        "Email": "Dirección de correo electrónico",
    },
};

 

 

3. Let’s add the code in the JavaScript of the Layout.

First, you will need to get the logged in User’s language:

var language = "{loggedInUser.Language}";

Then, we need to be sure if no language is selected, we have a default language (or if they are not logged in.

if(!language){ language = 'English' }

Finally, we need the code that finds and replaces the text. I’m finding the text for table headers, form labels, buttons, and field labels in this setup. We’re also setting this to run for all components, so there is no need to do this for each component.
TB.render('any', function(data) {
    $(".lbl, label, th, button span").each(function(index) {
        const text = $.trim($(this).text());
        if (typeof translations[language][text] !== 'undefined') {
            $(this).text(translations[language][text]);
        }
    });
});

 

For this example, the entire code would be as follows:
var language = "{loggedInUser.Language}";

if (!language) {
    language = 'English'
}

const translations = {
    // English translations
    "English": {
        "Customer": "Customers Name",
        "Email": "Enter your email address",
        "Save": "Save Record",
    },
    // Spanish translations
    "Spanish": {
        "Customer": "Nombre del cliente",
        "Save": "Guardar registro",
        "Email": "Dirección de correo electrónico",
    },
};

TB.render('any', function(data) {
    $(".lbl, label, th, button span").each(function(index) {
        const text = $.trim($(this).text());
        if (typeof translations[language][text] !== 'undefined') {
            $(this).text(translations[language][text]);
        }
    });
});

Original Community Post:

https://community.tadabase.io/t/multiple-language-options-for-fied-title-name/2357

How did we do ?

Previous Article
Link Button Pop-up
Next Article
Filter Tab - Background Color
Article Navigation
  • 1. Inside your Users table, add a field called “Language."2. Create a dictionary or words that will
  • 3. Let’s add the code in the JavaScript of the Layout.
  • First, you will need to get the logged in User’s language:
  • Then, we need to be sure if no language is selected, we have a default language (or if they are not
  • Finally, we need the code that finds and replaces the text. I’m finding the text for table headers,
  • For this example, the entire code would be as follows:
  • Original Community Post:
  • Back to top
    API
    100% Operational
    Apps
    100% Operational
    Builder
    100% Operational
    Overall Status
    100% Operational