Translation of Properties Panel

Developers Modeler
1

Hi,

I found this for translation of tooltips for palette and so (which goes in diagram-js) :https://github.com/bpmn-io/bpmn-js-examples/tree/master/i18n

But I am not able to get how to translate properties panel text such as Id, Documentation, Name, etc.

Is this supported in BPMN io?

Thanks!

2

You can use the following code. Run this after properties panel initialization. Ok, it uses jQuery in some place, but feel free to modify it.

function translatePropertiesPanel() {
            //translate the tab panels of property panel
            var errors = $('.bpp-error-message');
            [].forEach.call(errors, function(el) {
                el.setAttribute("id", el.innerHTML.toLowerCase().replace(/\s/g, "_"));
                el.innerHTML = translations[el.attributes[el.attributes.length - 1].value] || el.innerHTML;
            });
            var options = $('.bpp-properties-panel option');
            [].forEach.call(options, function(el) {
                el.innerHTML = translations[el.attributes[0].value] || el.innerHTML;
            });
            var simpleLabels = $("label");
            [].forEach.call(simpleLabels, function(el) {
                if (el.getAttribute("for") === null) {
                    el.setAttribute("id", el.innerHTML.toLowerCase().replace(/\s/g, "_"));
                    el.innerHTML = translations[el.attributes[el.attributes.length - 1].value] || el.innerHTML;
                }
            });
            var groups = $('.group-label');
            [].forEach.call(groups, function(el) {
                el.setAttribute("id", el.innerHTML.toLowerCase().replace(/\s/g, "_"));
                el.innerHTML = translations[el.attributes[1].value] || el.innerHTML;
            });
            var entryLabels = $("[for]");
            [].forEach.call(entryLabels, function(el) {
                el.innerHTML = translations[el.attributes[0].value.replace(/-[0-9]+/g, "")] || el.innerHTML;
            });
            var propertyPanelTabs = $('.bpp-properties-panel [data-tab-target]');
            [].forEach.call(propertyPanelTabs, function(el) {
                var translation = el.dataset;
                if (translation !== undefined) {
                    el.innerHTML = translations[el.dataset.tabTarget] || el.innerHTML;
                }
            });
        }

Translations variable is the array of keywords which contains the translated text such as:

// Properties panel translation.
‘general’: ‘General’,
‘variables’: ‘Variables’,
‘connector’: ‘Connector’,
‘forms’: ‘Forms’,
‘listeners’: ‘Listeners’,
‘input-output’: ‘Input/Output’,
‘extensionElements’: ‘Extensions’,
‘camunda-id’: ‘Id’,
‘camunda-name’: ‘Name’,
‘camunda-elementTemplate-chooser’: ‘Element Template’,
‘camunda-implementation’: ‘Implementation’,
‘camunda-versionTag’: ‘Version Tag’,
‘camunda-process-is-executable’: ‘Executable’,
‘camunda-resultVariable’: ‘Result Variable’,
‘camunda-externalTopic’: ‘Topic’,
‘camunda-externalTaskPriority’: ‘Task Priority’,
‘camunda-asyncBefore’: ‘Asynchronous Before’,
‘camunda-asyncAfter’: ‘Asynchronous After’,
‘camunda-exclusive’: ‘Exclusive’,
‘camunda-jobPriority’: ‘Job Priority’,
‘camunda-retryTimeCycle’: ‘Retry Time Cycle’,
‘camunda-documentation’: ‘Element Documentation’,
‘camunda-connectorId’: ‘Connector Id’,
‘cam-extensionElements-connector-inputs’: ‘Input Parameters’,
‘cam-extensionElements-connector-outputs’: ‘Output Parameters’,
‘camunda-connector-parameterName’: ‘Name’,
‘camunda-connector-parameterType’: ‘Type’,
‘camunda-connector-parameterType-text’: ‘Value’,
‘cam-script-format’: ‘Script Format’,
‘cam-script-type’: ‘Script Type’,
‘cam-script-resource-val’: ‘Resource’,
‘cam-script-val’: ‘Script’,
‘cam-event-type’: ‘Event Type’,
‘cam-listener-type’: ‘Listener Type’,
‘parameter_must_have_a_name’: ‘Parameter must have a name’,
‘must_provide_a_value’: ‘Must provide a value’,
‘text’: ‘Text’,
‘list’: ‘List’,
‘map’: ‘Map’,
‘script’: ‘Inline Script’,
‘scriptResource’: ‘External Resource’,
‘start’: ‘start’,
‘end’: ‘end’,
‘class’: ‘Java Class’,
‘expression’: ‘Expression’,
‘delegateExpression’: ‘Delegate Expression’,
‘external’: ‘External’,
‘addListener’: 'Add Execution Listener ',
‘cam-extensionElements-inputs’: ‘Input Parameters’,
‘cam-extensionElements-outputs’: ‘Output Parameters’,
‘camunda-parameterName’: ‘Name’,
‘camunda-parameterType’: ‘Type’,
‘camunda-parameterType-text’: ‘Value’,
‘camunda-initiator’: ‘Initiator’,
‘camunda-formType’: ‘Form Type’,
‘camunda-form-key’: ‘Form Key’,
‘modelType’: ‘Model type’,
‘state’: ‘State’,
‘schemaType’: ‘Schema type’,
‘schemaName’: ‘Schema name’,
‘schemaComment’: ‘Comment’,
‘scriptType’: ‘Script language’,
‘processType’: ‘Process type’,
‘diagramName’: ‘Model name’,
‘custom_fields’: ‘Custom Fields’,
‘details’: ‘Details’,
‘external_task_configuration’: ‘External Task Configuration’,
‘multi_instance’: ‘Multi Instance’,
‘asynchronous_continuations’: ‘Asynchronous Continuations’,
‘job_configuration’: ‘Job Configuration’,
‘documentation’: ‘Documentation’,
‘input/output’: ‘Input/Output’,
‘execution_listeners’: ‘Execution Listeners’,
‘task_listeners’: ‘Task Listeners’,
‘parameters’: ‘Parameters’,
‘properties’: ‘Properties’,
‘input_parameter’: ‘Input Parameter’,
‘add_value’: ‘Add Value’,
‘add_entry’: ‘Add Entry’,
‘add_property’: ‘Add Property’,
‘value’: ‘Value’,
‘name’: ‘Name’

3

Hi!

I am getting issues on using this. The palette components are not draggable on workspace + id is washed out.

I invoked this method after the properties panel and diagram is rendered.

Thanks!