Replies: 1 comment 1 reply
-
|
Hi @darbandi, Take a look at the i18n property https://formengine.io/documentation/api-reference/interfaces/react_form_builder_designer.FormBuilderProps#i18n. Example: import {
ltrCssLoader,
rsErrorMessage,
RsLocalizationWrapper,
rsTooltip,
rSuiteComponents,
rtlCssLoader
} from '@react-form-builder/components-rsuite'
import {BiDi, Language} from '@react-form-builder/core'
import {BuilderView, FormBuilder} from '@react-form-builder/designer'
import React from 'react'
import * as SampleForm from './SampleForm.json'
const builderComponents = rSuiteComponents.map(c => c.build())
const builderView = new BuilderView(builderComponents)
.withErrorMeta(rsErrorMessage.build())
.withTooltipMeta(rsTooltip.build())
.withViewerWrapper(RsLocalizationWrapper)
.withCssLoader(BiDi.LTR, ltrCssLoader)
.withCssLoader(BiDi.RTL, rtlCssLoader)
const getForm = (_?: string) => JSON.stringify(SampleForm)
const myLang = new Language('en-EN', 'EN', 'English (UK)', '')
const langData = {
"common": {
"apply": "Apply",
"name": "Name",
"save": "Save",
"cancel": "Cancel",
"clone": "Clone",
"close": "Close",
"edit": "Edit",
"remove": "Remove",
"test": "Test"
},
"annotation": {
"errorConfig": {
"show": "Show"
},
"htmlAttributes": {
"name": "HTML attributes",
"hint": "HTML attributes in React (camelCase) format"
},
"tooltipProps": {
"tooltip": "Tooltip",
"hint": "Use tooltip for this element"
},
"objectPosition": {
"name": "Position"
},
"justifyContent": {
"name": "Justify"
},
"objectFit": {
"name": "Fit"
},
"textAlign": {
"name": "Alignment"
},
"passwordMask": {
"name": "Password mask",
"hint": "Use password mask"
},
"allowLeadingZeros": {
"name": "Allow leading zeros",
"hint": "This allows enabling or disabling leading zeros in the input field. By default, on blur of an input, leading zeros are removed"
},
"allowNegative": {
"name": "Allow negative",
"hint": "If set to false, negative numbers will not be allowed"
},
"allowedDecimalSeparators": {
"name": "Allowed decimal separators",
"hint": "Characters which when pressed result in a decimal separator. When missing, decimal separator and '.' are used"
},
"decimalScale": {
"name": "Decimal scale",
"hint": "If defined, it limits the number of digits after the decimal point"
},
"decimalSeparator": {
"name": "Decimal separator",
"hint": "Defines the decimal character"
},
"fixedDecimalScale": {
"name": "Fixed decimal scale",
"hint": "If set to true, it adds trailing 0s after decimalSeparator to match given decimalScale"
},
"prefix": {
"name": "Prefix",
"hint": "Adds the prefix character before the input value"
},
"suffix": {
"name": "Suffix ",
"hint": "Adds the suffix after the input value"
},
"thousandsGroupStyle": {
"name": "Thousands group style",
"hint": "Thousand style (thousand) : 123,456,789, indian style (lakh) : 12,34,56,789, chinese style (wan) : 1,2345,6789"
},
"allowEmptyFormatting": {
"name": "Allow empty formatting ",
"hint": "By default PatternFormat component does not apply formatting when value is empty (null, undefined or ‘’)"
},
"format": {
"name": "Format",
"hint": "Format pattern using the # (or a Pattern char) character. # is the placeholder character for numbers. Example: '### ###'"
},
"mask": {
"name": "Mask",
"hint": "Used as mask character for numeric places, until any numeric character is provided for that position"
},
"patternChar": {
"name": "Pattern char",
"hint": "This helps define the format pattern character"
},
"bodyFill": {
"name": "Body fill",
"hint": "Content area filled with containers"
},
"eventKey": {
"name": "Event key",
"hint": "The event key corresponding to this element"
},
"action": {
"name": "Action",
"hint": "Uploading URL"
},
"accept": {
"name": "Accept",
"hint": "File types that can be accepted. See standard HTML attribute: accept"
},
"autoUpload": {
"name": "Auto upload",
"hint": "Automatically upload files after selecting them"
},
"disableMultipart": {
"name": "Disable multipart",
"hint": "If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form"
},
"draggable": {
"name": "Draggable",
"hint": "Enabled drag and drop to upload"
},
"method": {
"name": "Method",
"hint": "The HTTP method of upload request"
},
"name": {
"name": "Name",
"hint": "Upload the parameter name of the corresponding file"
},
"withCredentials": {
"name": "With credentials",
"hint": "Whether to carry cookies when uploading requests"
},
"block": {
"name": "Block",
"hint": "Blocking an entire row"
},
"cleanable": {
"name": "Cleanable",
"hint": "Whether the option can be emptied"
},
"creatable": {
"name": "Creatable",
"hint": "Settings can create new options"
},
"data": {
"name": "Data",
"hint": "Selectable data"
},
"disabled": {
"name": "Disabled",
"hint": "Whether or not component is disabled"
},
"placeholder": {
"name": "Placeholder",
"hint": "Setting placeholders"
},
"placement": {
"name": "Placement",
"hint": "The placement of component"
},
"size": {
"name": "Size",
"hint": "Component can have different sizes"
},
"label": {
"name": "Label",
"hint": "Setting label"
},
"groupBy": {
"name": "Group by",
"hint": "Set grouping criteria 'key' in 'data'"
},
"code": {
"name": "Code",
"hint": "Edit code"
},
"flexDirection": {
"name": "Direction",
"hint": "Flex direction of container children"
}
},
"leftMenu": {
"translation": "Translation",
"undo": "Undo",
"menu": "Menu",
"download": "Download",
"upload": "Upload",
"print": "Print",
"settings": "Settings",
"clear": "Clear",
"save": "Save",
"saveAs": "Save as...",
"validateForm": "Validate form",
"currentFormName": "The name of the current form",
"formSaved": "The form is saved",
"formSaveError": "Failed to save form! See the logs in the browser console",
"enterFormName": "Please enter form name",
"formNamePlaceholder": "My beautiful form",
"exportForms": "Export forms",
"exportFormsSuccess": "Forms exported",
"exportFormsError": "Failed to export forms! See the logs in the browser console",
"importForms": "Import forms",
"importFormsSuccess": "Forms imported",
"importFormsError": "Failed to import forms! See the logs in the browser console"
},
"formsList": {
"noFormsInFormStorage": "Save the form so that it appears in the list of forms.",
"addNewForm": "Add a new form"
},
"rightMenu": {
"toggleTheme": "Toggle theme",
"modes": {
"builder": "PREVIEW",
"viewer": "Edit",
"desktop": "Desktop",
"mobile": "Mobile",
"tablet": "Tablet"
}
},
"componentsModal": {
"clickToAdd": "Click to add control"
},
"componentsList": {
"categories": {
"fields": "Fields",
"static": "Static",
"structure": "Structure",
"templates": "Templates"
}
},
"componentToolbar": {
"add": "Add new element",
"before": "Before",
"after": "After",
"inside": "Inside"
},
"codeEditor": {
"codeActionHeader": "Code action editor",
"ok": "OK",
"compilationResult": "Compilation result:",
"codePlaceholder": "// enter your code here",
"compile": "Compile"
},
"propertiesEditor": {
"selectElementForEdit": "Select element on form for edit properties",
"sectionName": {
"main": "Main",
"style": "Style",
"actions": "Actions",
"rules": "Rules",
"withTarget": "With Target",
"withoutTarget": "Without Target",
"linkedProperty": "Linked property",
"expression": "Expression"
},
"subSection": {
"additionalProperties": "Additional properties"
},
"codeButton": {
"hintCalculable": "Make this property calculable",
"hintLocalizable": "Localize this property with Fluent",
"hintCalculableAndLocalizable": "Make this property calculable or localize with Fluent",
"editCalculable": "Edit calculable",
"editLocalizable": "Edit Fluent localization",
"neitherCalculableNorLocalizable": "Neither calculable nor localizable"
},
"setInputHint": "Press Enter to add a value",
"applyKey": "Apply key changes",
"keyMustBeUnique": "Key must be unique",
"keyMustNotBeEmpty": "Key must not be empty"
},
"toolbar": {
"elements": "Elements",
"notFound": "Not found",
"reset": "Reset",
"cloneComponent": "Clone component",
"removeComponent": "Remove component"
},
"errorsPanel": {
"data": "Data",
"errors": "Errors"
},
"searchForm": {
"search": "Search..."
},
"tree": {
"expand": "Expand all",
"collapse": "Collapse all"
},
"style": {
"other": "Other",
"forDevice": "For device",
"component": "Component",
"componentHint": "Styles that apply to the component",
"wrapper": "Wrapper",
"wrapperHint": "Styles that apply to the component wrapper",
"any": "Any",
"desktop": "Desktop",
"mobile": "Mobile",
"tablet": "Tablet"
},
"actions": {
"arguments": "Arguments",
"code": "Code",
"custom": "Custom",
"common": "Common",
"edit": "Edit",
"duplicate": "Duplicate",
"delete": "Delete",
"addCodeAction": "Add a code action",
"addAction": "Add an action",
"parameters": "Parameters",
"add": "Add",
"name": "Name",
"type": "Type"
},
"validation": {
"showFormErrors": "Show form errors",
"formErrors": "Form errors",
"chooseValidation": "Choose your type",
"addRule": "Add a validation rule",
"editCustomValidationCode": "Edit custom validation code for component",
"rule": {
"required": "Required",
"nonEmpty": "Non empty",
"length": "Length",
"min": "Min",
"max": "Max",
"regex": "Regex",
"email": "Email",
"url": "Url",
"uuid": "Uuid",
"ip": "Ip",
"datetime": "Datetime",
"includes": "Includes",
"startsWith": "Starts with",
"endsWith": "Ends with",
"code": "Code",
"custom": "Custom",
"truthy": "Truthy",
"falsy": "Falsy",
"lessThan": "Less than",
"moreThan": "More than",
"integer": "Integer",
"multipleOf": "Multiple of",
"finite": "Finite"
}
},
"promptDialog": {
"ok": "OK",
"cancel": "Cancel"
},
"localization": {
"messageNotFound": "Localization message not found",
"messageIsNull": "Localization message is null"
},
"leftPanel": {
"sectionName": {
"components": "Components",
"tree": "Tree",
"forms": "Forms",
"settings": "Settings"
},
"formSettings": {
"actions": "Actions",
"error": "Error settings",
"tooltip": "Tooltip",
"language": "Language settings"
}
},
"bottomPanel": {
"use": "Use",
"localization": "Fluent localization",
"function": "Calculable value",
"simpleValue": "Simple value",
"simpleValueHint": "Edit the property in the right panel",
"editProperty": "Edit property",
"editCodeAction": "Edit code action"
},
"codeActionEditor": {
"actionNameExists": "Action with this name already exists",
"nameIsRequired": "Action name is required",
"parameterNameExists": "Parameter with this name already exists",
"parameterNameIsRequired": "Parameter name is required",
"parameterNameIsNotValid": "Parameter name is not valid"
},
"testingEditor": {
"run": "Run",
"autorun": "Autorun",
"testFormData": "Test form data",
"hasNotReturnedValue": "Has not returned value",
"compilationOk": "Compilation result: OK"
},
"editJson": "Edit JSON"
}
export const FormBuilderExample = () => {
return <FormBuilder view={builderView} formName="SampleForm" getForm={getForm}
i18n={{
languages: [myLang],
getData: async languageFullCode => {
return {
data: langData
}
}
}}/>
}Lang filies: |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
Thank you @optimajet |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
Hi guys
I use the library you wrote
First of all, thank you
Next, I want to know if it is possible to localize the static content of the form builder?
For example, the parts shown in the image below:
Actually, I want to add a new language
Beta Was this translation helpful? Give feedback.
All reactions