Translation Issues and Requests

1. No Translation for ‘No Data’ (NoDataMessage):

The translation for the ‘No Data’ message (NoDataMessage) seems to be missing. When attempting to display a message for an empty data set, the translation is not being applied.

2. Incorrect ID for ‘Required’ Error (error.required):

The translation ID for the ‘Required’ error message (error.required) seems to be incorrect. It appears to be using ‘error.custom’ as the ID instead.

3. Incorrect Input Handling (input):

The translation for ‘input’ does not seem to be handled correctly. When attempting to translate the term ‘input,’ it does not retrieve the appropriate translation.

this is my code:

import { ArrayTranslationEnum, ArrayTranslations, JsonFormsI18nState, Translator } from "@jsonforms/core"

export const translateZhCN: Translator = ( id, defaultMessage, values ) => {
    if ( id.includes( "error.required" ) ) {
        return '必须填写的字段'

    const key = id.split( '.' ).pop() // 去掉前缀
    const translated = arrayTranslationsZhCN[ key as keyof ArrayTranslations ]
    if ( typeof translated === 'function' ) {
        return translated( values )

    console.log( "cant traslate " + id )
    return defaultMessage || id

export const i18n_ZhCN: JsonFormsI18nState = {
    translate: translateZhCN

export const arrayTranslationsZhCN = {
    [ ArrayTranslationEnum.addTooltip ]: ( input: any ) => ( input ? `添加到 ${ input }` : '添加' ),
    [ ArrayTranslationEnum.addAriaLabel ]: ( input: any ) => ( input ? `添加到 ${ input } 按钮` : '添加按钮' ),
    [ ArrayTranslationEnum.removeTooltip ]: () => '删除',
    [ ArrayTranslationEnum.removeAriaLabel ]: () => '删除按钮',
    [ ArrayTranslationEnum.upAriaLabel ]: () => '上移项目',
    [ ArrayTranslationEnum.up ]: () => '上移',
    [ ArrayTranslationEnum.down ]: () => '下移',
    [ ArrayTranslationEnum.downAriaLabel ]: () => '下移项目',
    [ ArrayTranslationEnum.noDataMessage ]: () => '空',
    [ ArrayTranslationEnum.noSelection ]: () => '无选项',
    [ ArrayTranslationEnum.deleteDialogTitle ]: () => '确认删除',
    [ ArrayTranslationEnum.deleteDialogMessage ]: () => '确定要删除所选条目吗?',
    [ ArrayTranslationEnum.deleteDialogAccept ]: () => '是',
    [ ArrayTranslationEnum.deleteDialogDecline ]: () => '否',

And I also got a problem in coding,on the Translator last return,I can’t just return defaultMessage. It ask me to return a string.So I change it to defaultMessage || id,which might be wrong.
Seeking guidance, is there something wrong with what I wrote?


The No Data message currently can’t be translated. There is already a PR open to improve this. As a workaround you can use a custom renderer until then.

Usually we first ask for custom and only for required afterwards, see here for the documentation. You probably don’t see the required key coming in because you don’t return the defaultMessage in case it’s undefined. However you definitely need to do that, see the documentation.

If the defaultMessage is undefined , you should also return undefined if there is no translation for the given key. Returning an empty string (or something similar) instead may result in undesired behavior. JSON Forms will use undefined when the message could be skipped or another more generic key could be tried.

I’m not sure what you mean by this? What is not translated correctly?

Regarding the code:

  • Why are you splitting the key (called id in your case)? That should not be necessary
  • Please make sure to return the defaultMessage when you don’t have a translation. Do NOT use defaultMessage || something-else. In case you have a type error, use for example the any type. What version of JSON Forms are you using? We improved the Translator type so that this issue should no longer occur.

for the default message , my typescript don’t allow me to just return defaultMessage :upside_down_face:

My version is 3.1.0

the value problem is the translator for add:
[ ArrayTranslationEnum.addTooltip ]: ( input: any ) => ( input ? 添加到 ${ input } : '添加' ),
the translator always got no input.
But without the translator,it can display the input:

You either need to update JSON Forms or you cast the defaultMessage, for example to any

JSON Forms currently hands over the label only as part of the defaultMessage, see here. So at the moment you need to parse the label out of the handed over defaultMessage.

This should be improved, JSON Forms should hand over the label within the third parameter of translate, so that translators like yours can access it directly, instead of needing to parse it out of the defaultMessage.

thanks you! I’ll try it later.