EasyQuery.JS widgets localization

EasyQuery.JS widgets allows to translate all texts shown to the users to any language by your choice. All you need to do for that - is to perform the next 3 simple steps:

Step 1: Prepare the object with locale settings

First of all you need to define an object which will contain some locale settings and the translations for all messages used inside EasyQuery.JS library.

Here is an example of such object for English language:


var englishLocaleInfo = {
    englishName: "English",
    displayName: "English",
    settings : {
        dateFormat: 'MM/dd/yyyy',
        decimalSeparator: '.'
    },
    texts: {
        AltMenuAttribute: "Attribute",
        AltMenuConstantExpression: "Constant expression",
        ButtonApply: "Apply",
        ButtonCancel: "Cancel",
        ButtonOK: "OK",
        ButtonClear: "Clear",
        ButtonEnable: "Toggle enable",
        MenuEnable: "Enabled",
        MenuParameterization: "Parameterized",
        MenuJoinCond: "Use in JOIN",
        ButtonDelete: "Delete",
        ButtonAddCondition: "Add condition",
        ButtonAddPredicate: "Add group of conditions",
        ButtonSelectAll: "Select all",
        ButtonDeselectAll: "Clear selection",
        ButtonAddColumns: "Add column(s)",
        ButtonAddConditions: "Add condition(s)",

        CmdAddConditionAfter: "Add a new condition after the current row",
        CmdAddConditionInto: "Add a new condition",
        CmdAddPredicateAfter: "Open a bracket after the current row",
        CmdAddPredicateInto: "Open a bracket",
        CmdClickToAddCondition: "[Add new condition]",
        CmdDeleteRow: "Delete this row",
        ErrIncorrectPredicateTitleFormat: "Incorrect predicate title format",
        ErrNotNumber: " is not a number",
        ErrIncorrectInteger: "Incorrect integer value",
        ErrIncorrectNumberList: "Incorrect list format",
        False: "False",
        LinkTypeAll: "all",
        LinkTypeAny: "any",
        LinkTypeNone: "none",
        LinkTypeNotAll: "not all",
        ConjAll: "and",
        ConjAny: "or",
        ConjNotAll: "and",
        ConjNone: "or",
        MsgApplySelection: "[Apply selection]",
        MsgAs: "as",
        MsgEmptyList: "(empty list)",
        MsgEmptyListValue: "[select value]",
        MsgEmptyScalarValue: "[enter value]",
        MsgSubQueryValue: "[edit sub-query]",
        MsgEmptyAttrValue: "[select attribute]",
        MsgEmptyCustomSql: "[enter SQL expression]",
        MsgCustomSql: "[Custom SQL]",
        MsgNoResult: "No result",
        MsgResultCount: "{0} records found",

        MsgOf: "of",
        PredicateTitle: "{lt} of the following apply",
        RootPredicateTitle: "Select records where {lt} of the following apply",
        StrAddConditions: "Add conditions",
        SubQueryDialogTitle: "Edit sub-query",
        SubQueryColumnTitle: "Column:",
        SubQueryEmptyColumn: "[select column]",
        SubQueryQueryPanelCaption: "Conditions",
        True: "True",

        ButtonSorting: "Sorting",
        ButtonToAggr: "Change to aggregate column",
        ButtonToSimple: "Change to simple column",
        CmdAscending: "Ascending",
        CmdClickToAddColumn: "[Add new column]",
        CmdDeleteColumn: "Delete column",
        CmdDeleteSorting: "Delete sorting",
        CmdDescending: "Descending",
        CmdGroupSort: "Sorting",
        CmdNotSorted: "Not sorted",
        ColTypeAggrFunc: "Aggregate function",
        ColTypeCompound: "Calculated",
        ColTypeGroup: "Column type",
        ColTypeSimple: "Simple column",
        HeaderExpression: "Expression",
        HeaderSorting: "Sorting",
        HeaderTitle: "Title",
        SortHeaderColumn: "Column",
        SortHeaderSorting: "Sorting",
        StrAddColumns: "Add columns",
        CustomExpression: "Custom Expression",

        CmdMoveToStart: "Move to start",
        CmdMoveRight: "Move right",
        CmdMoveLeft: "Move left",
        CmdMoveToEnd: "Move to the end",
        ButtonMenu: "Show menu",
        CmdToSimple: "Not aggregated",

        CmdMoveToFirst: "Move to the first",
        CmdMoveToPrev: "Move to the previous",
        CmdMoveToNext: "Move to the next",
        CmdMoveToLast: "Move to the last",

        //FilterBar
        StrNoFilterDefined: "No filter defined",
        StrNoFilterClickToAdd: "No filter defined. Click to add a new condition",

        //DateTime macroses
        Today: "Today",
        Yesterday: "Yesterday",
        Tomorrow: "Tomorrow",
        FirstDayOfMonth: "First day of the month",
        LastDayOfMonth: "Last day of the month",
        FirstDayOfWeek: "First day of the week",
        FirstDayOfYear: "First day of the year",
        FirstDayOfNextWeek: "First day of the next week",
        FirstDayOfNextMonth: "First day of the next month",
        FirstDayOfNextYear: "First day of the next week",
        Now: "Now",
        HourStart: "This hour start",
        Midnight: "Midnight",
        Noon: "Noon",

        Entities: {},
        Attributes: {},
        Operators: {},
        AggreateFunction: {}
    }
};

Of course, you don't really need to replace all text messages listed above. If you want to replace just a few messages - you can add only those messages to the texts object and skip all others.

Step 2: Update your locale info

Now you need to update your locale information using the object defined on the previous step. If you are using EasyQuery NPM packages you will need to import eqi18n module from @easyquery/core and then call updateLocaleInfo function.

import { eqi18n }  from '@easyquery/core'

.    .    .   

eqi18n.updateLocaleInfo('en', englishLocaleInfo);

if you include easyquery scripts in a bundle (e.g. from our CDN) then you can access all those functions via easyquery.core namespace:

easyquery.core.eqi18n.updateLocaleInfo('en', englishLocaleInfo);

Step 3: Set current locale

The updating of locale settings can be done once at the start of your application and for all locales you plan to use. After that, at the moment when you need to switch your current locale you can call setCurrentLocale function:

import { eqi18n }  from '@easyquery/core'

   .    .    .    .
   
eqi18n.setCurrentLocale('en');

or bundle/CDN version:

easyquery.core.eqi18n.setCurrentLocale('en');