bpmn-js+vue3 property panel addition and Chineseization (2)

bpmn-js + vue3 property panel addition and Chineseization (2)

• • Install
  • Import the corresponding libraries and styles
  • Add property panel container
  • Configure Modeler parameters
  • Chinese

When fishing, I like to read some ancient poems. Today I saw a poem by Su Shi and I would like to offer this:

Begonia

[Author] Su Shi [Dynasty] Song Dynasty


The east wind is full of admiration,


The fragrant mist fills the moonlit corridor.


I’m just afraid that the flower will fall asleep late at night,


Therefore, burn a high candle to illuminate the red makeup.

Without further ado, let’s get back to the topic. This article introduces how to add a property panel to the bpmn-js process modeling tool in vue3 and localize it.

• bpmn-js-properties-panel 5.6.0

Installation

npm i bpmn-js-properties-panel

Import the corresponding libraries and styles

import {<!-- -->
  BpmnPropertiesPanelModule,
  BpmnPropertiesProviderModule,
} from "bpmn-js-properties-panel";

import "bpmn-js-properties-panel/dist/assets/properties-panel.css";

Add property panel container

<template>
  <div class="editor">
    <div ref="canvas"></div>
    <div ref="properties"></div>
  </div>
</template>

.editor {<!-- -->
  width: 100%;
  height: 100%;
  display: grid;
  grid-template-columns: minmax(300px, 1fr) 300px;
}

Configure Modeler parameters

//Property panel container
const properties = ref();

const modeler = new Modeler({<!-- -->
  container: canvas.value,
  //Properties panel
  propertiesPanel: {<!-- -->
    parent: properties.value,
  },
  additionalModules: [BpmnPropertiesPanelModule, BpmnPropertiesProviderModule],
});

The effect at this time is:

You can see that the property panel has come out, but the property panel is all in English. Fortunately, bpmn-js supports Chinese translation. Next, we will Chineseize the property panel.

Chinese

First, let’s try to Chineseize the three words General, Name, and ID in the attribute page in the picture above.

Create a translations.js file, the code shows:

const translations = {<!-- -->
  "Name":"Name",
  "Value":"value",
  "ID":"Unique identification (ID)",
  "General":"Basic properties",
};

export const customTranslate = (template, replacements) =>{<!-- -->
  replacements = replacements || {<!-- -->};

  // Translate
  template = translations[template] || template;

  // Replace
  return template.replace(/{([^}] + )}/g, (_, key)=> {<!-- -->
    return replacements[key] || '{' + key + '}';
  });
}

Then we configure customTranslate into the properties panel,

import {<!-- --> customTranslate } from "./translate/translations";

 additionalModules: [
      BpmnPropertiesPanelModule,
      BpmnPropertiesProviderModule,
      {<!-- -->
        translate: ["value", customTranslate],
      },
    ]

Effect

Successfully Chineseized. Finally, I will send you the complete Chinese code, which includes the Chinese language of the process element name and the Chinese language of the camunda attribute panel behind it. If the translation is not good, a professional can re-translate it.

/**
 *Reference https://github.com/bpmn-io/bpmn-js-i18n
 */

const translations = {<!-- -->

  "Name":"Name",
  "Value":"value",
  "ID":"Unique identification (ID)",
  "General":"Basic properties",

  "Activate the create/remove space tool": "Activate the create/remove space tool",
  "Activate the global connect tool": "Activate the global connect tool",
  "Activate the hand tool": "Activate the hand tool",
  "Activate the lasso tool": "Activate the lasso tool",
  "Ad-hoc": "Ad-hoc sub-process",
  "Add Lane above": "Add to the lane above",
  "Add Lane below": "Add to lane below",
  "Append ConditionIntermediateCatchEvent": "Add intermediate condition capture event",
  "Append element": "Add element",
  "Append EndEvent": "Add end event",
  "Append Gateway": "Add Gateway",
  "Append Intermediate/Boundary Event": "Add intermediate/boundary event",
  "Append MessageIntermediateCatchEvent": "Add message intermediate capture event",
  "Append ReceiveTask": "Add receive task",
  "Append SignalIntermediateCatchEvent": "Add signal intermediate capture event",
  "Append Task": "Add task",
  "Append TimerIntermediateCatchEvent": "Add timer intermediate capture event",
  "Append compensation activity": "Append compensation activity",
  "Append {type}": "Append {type}",
  "Boundary Event": "Boundary Event",
  "Business Rule Task": "Rule Task",
  "Call Activity": "Reference Process",
  "Cancel Boundary Event": "Cancel Boundary Event",
  "Cancel End Event": "Cancel End Event",
  "Change type": "Change type",
  "Collapsed Pool": "Collapsed Pool",
  "Collection": "Collection",
  "Compensation Boundary Event": "Compensation Boundary Event",
  "Compensation End Event": "End compensation event",
  "Compensation Intermediate Throw Event": "Intermediate compensation throw event",
  "Compensation Start Event": "Compensation Start Event",
  "Complex Gateway": "Complex Gateway",
  "Conditional Boundary Event": "Conditional Boundary Event",
  "Conditional Boundary Event (non-interrupting)": "Conditional Boundary Event (non-interrupting)",
  "Conditional Flow": "Conditional Flow",
  "Conditional Intermediate Catch Event": "Intermediate conditional capture event",
  "Conditional Start Event": "Conditional Start Event",
  "Conditional Start Event (non-interrupting)": "Conditional Start Event (non-interrupting)",
  "Connect using Association": "Text Association",
  "Connect using DataInputAssociation": "Data Association",
  "Connect using Sequence/MessageFlow or Association": "Message Association",
  "Create IntermediateThrowEvent/BoundaryEvent": "Create intermediate throw/boundary event",
  "Create DataObjectReference": "Create data object reference",
  "Create DataStoreReference": "Create DataStoreReference",
  "Create element": "Create element",
  "Create EndEvent": "Create end event",
  "Create Gateway": "Create Gateway",
  "Create Group": "Create Group",
  "Create Intermediate/Boundary Event": "Create intermediate/boundary event",
  "Create Pool/Participant": "Create Pool/Participant",
  "Create StartEvent": "Create StartEvent",
  "Create Task": "Create Task",
  "Create expanded SubProcess": "Create expanded subprocess",
  "Create {type}": "Create {type}",
  "Data": "data",
  "Data Object Reference": "Data Object Reference",
  "Data Store Reference": "Data Store Reference",
  "Default Flow": "Default Flow",
  "Divide into three Lanes": "Divide into three lanes",
  "Divide into two Lanes": "Divide into two lanes",
  "Empty Pool": "Empty Pool",
  "Empty Pool (removes content)": "Empty Pool (removes content)",
  "End Event": "End Event",
  "Error Boundary Event": "Error Boundary Event",
  "Error End Event": "End error event",
  "Error Start Event": "Error Start Event",
  "Escalation Boundary Event": "Escalation Boundary Event",
  "Escalation Boundary Event (non-interrupting)": "Escalation Boundary Event (non-interrupting)",
  "Escalation End Event": "End upgrade event",
  "Escalation Intermediate Throw Event": "Escalation Intermediate Throw Event",
  "Escalation Start Event": "Escalation Start Event",
  "Escalation Start Event (non-interrupting)": "Escalation Start Event (non-interrupting)",
  "Events": "Events",
  "Event Sub Process": "Event Sub Process",
  "Event based Gateway": "Event based Gateway",
  "Exclusive Gateway": "Exclusive Gateway",
  "Expanded Pool": "Expanded Pool",
  "Gateways": "Gateways",
  "Inclusive Gateway": "Inclusive Gateway",
  "Intermediate Throw Event": "Intermediate throw event",
  "Link Intermediate Catch Event": "Intermediate link capture event",
  "Link Intermediate Throw Event": "Intermediate link throw event",
  "Loop": "Loop",
  "Manual Task": "Manual Task",
  "Message Boundary Event": "Message Boundary Event",
  "Message Boundary Event (non-interrupting)": "Message Boundary Event (non-interrupting)",
  "Message End Event": "End message event",
  "Message Intermediate Catch Event": "Intermediate message capture event",
  "Message Intermediate Throw Event": "Intermediate message throw event",
  "Message Start Event": "Message Start Event",
  "Message Start Event (non-interrupting)": "Message Start Event (non-interrupting)",
  "Parallel Gateway": "Parallel Gateway",
  "Parallel Multi Instance": "Parallel Multi Instance",
  "Participants": "Participants",
  "Participant Multiplicity": "Participant Multiplicity",
  "Receive Task": "Receive Task",
  "Remove": "Remove",
  "Script Task": "Script Task",
  "Send Task": "Send Task",
  "Sequence Flow": "Sequence Flow",
  "Sequential Multi Instance": "Sequential Multi Instance",
  "Service Task": "Service Task",
  "Signal Boundary Event": "Signal Boundary Event",
  "Signal Boundary Event (non-interrupting)": "Signal Boundary Event (non-interrupting)",
  "Signal End Event": "End signal event",
  "Signal Intermediate Catch Event": "Intermediate signal capture event",
  "Signal Intermediate Throw Event": "Intermediate signal throw event",
  "Signal Start Event": "Signal Start Event",
  "Signal Start Event (non-interrupting)": "Signal Start Event (non-interrupting)",
  "Start Event": "Start event",
  "Sub Process": "Sub Process",
  "Sub Processes": "Sub Processes",
  "Sub Process (collapsed)": "Collapsed sub-process",
  "Sub Process (expanded)": "Expandable sub-process",
  "Task": "Task",
  "Tasks": "Tasks",
  "Terminate End Event": "Terminate boundary event",
  "Timer Boundary Event": "Timer Boundary Event",
  "Timer Boundary Event (non-interrupting)": "Timer Boundary Event (non-interrupting)",
  "Timer Intermediate Catch Event": "Intermediate timing capture event",
  "Timer Start Event": "Timer Start Event",
  "Timer Start Event (non-interrupting)": "Timer Start Event (non-interrupting)",
  "Transaction": "Transaction",
  "User Task": "User Task",
  "already rendered {element}": "{element} has been rendered",
  "diagram not part of bpmn:Definitions": "diagram not part of bpmn:Definitions",
  "element required": "element required",
  "correcting missing bpmnElement on {plane} to {rootElement}": "Correcting missing bpmnElement on {plane} to {rootElement}",
  "element {element} referenced by {referenced}#{property} not yet drawn": "Element {element} referenced by {referenced}#{property} not yet drawn",
  "failed to import {element}": "{element} failed to import",
  "flow elements must be children of pools/participants": "Elements must be children of pools/participants",
  "more than {count} child lanes": "more than {count} child lanes",
  "missing {semantic}#attachedToRef": "Missing {semantic}#attachedToRef in {element}",
  "multiple DI elements defined for {element}": "Multiple DI elements defined for {element}",
  "no bpmnElement referenced in {element}": "no bpmnElement referenced in {element}",
  "no diagram to display": "No diagram to display",
  "no shape type specified": "No shape type specified",
  "no parent for {element} in {parent}": "There is no parent element {parent} in {element}",
  "no process or collaboration to display": "No process or collaboration to display",
  "out of bounds release": "Out of bounds release",
  "Version tag":"Version tag",
  "Change element":"Change element",
  "Documentation":"Documentation",
  "PROCESS":"Process",
  "Element documentation":"Element documentation",
  "User assignment":"Assign user",
  "History cleanup":"History cleanup",
  "Time to live":"History record survival time",
  "Tasklist":"Task list",
  "Candidate starter":"Candidate starter",
  "Candidate starter groups":"Candidate starter groups",
  "Specify more than one group as a comma separated list.":"Multiple groups are separated by ','.",
  "Candidate starter users":"Candidate starter",
  "Specify more than one user as a comma separated list.":"Multiple users are separated by ','.",
  "External task":"External task",
  "Startable":"Startable(Startable)",
  "Executable":"Can be executed directly",
  "Job execution":"Job execution",
  "Priority":"Priority",
  "Forms":"Form",
  "Execution listeners":"Execution listeners",
  "Extension properties":"Extension properties",
  "Event type":"Event type",
  "Listener type":"Listener type",
  "Field injection":"Field injection",
  "Start initiator":"Start initiator",
  "Initiator":"Initiator",
  "Asynchronous continuations":"Asynchronous continuations",
  "Before":"before",
  "After":"after",
  "Inputs":"input",
  "Outputs":"Output",
  "Local variable name":"Local variable name",
  "Assignment type":"Assignment type",
  "Format":"Format",
  "Type":"Type",
  "Expression":"Expression (Expression)",
  "Script":"Script(Script)",
  "Delegate expression":"Delegate expression (Delegate expression)",
  "Java class":"Java class (Java class)",
  "start":"start(start)",
  "end":"End(end)",
  "Start typing "${}" to create an expression.":"Start typing "${}" to create an expression.",
  "Process variable name":"Process variable name",
  "List values":"List values",
  "Map entries":"Map entries",
  "Key":"key",
  "Values":"value",
  "Form reference":"Reference form ID",
  "Binding":"combination",
  "Version":"version",
  "Form fields":"Form fields",
  "Form key":"Form ID",
  "Embedded or External Task Forms":"Extended Forms",
  "Camunda Forms":"Standard Forms",
  "Generated Task Forms":"Built-in forms",
  "Refers to the process variable name":"Refers to (references) the process variable name",
  "Label":"Label",
  "Default value":"Default value",
  "Constraints":"Restrictions",
  "Properties":"Properties",
  "Config":"Configuration",
  "Implementation":"Implementation",
  "Field injections":"Field injections",
  "Task listeners":"Task listeners",
  "Listener ID":"Listener ID",
  "Message":"Message",
  "Global message reference":"Reference global message ID",
  "Result variable":"Result variable",
  "Resource":"Resource",
  "External resource":"External resource",
  "Inline script":"Inline script",
  "Process variables":"Process variables",
  "Global signal reference":"Reference global signal ID",
  "Signal":"signal",
  "Called element":"Called element",
  "In mapping propagation":"In mapping propagation",
  "Propagate all variables":"Propagate all variables",
  "Out mapping propagation":"Out mapping propagation",
  "In mappings":"In mappings",
  "Source":"source",
  "Target":"target",
  "Local":"Local",
  "Out mappings":"Output mappings",
  "Link":"Link",
  "Timer":"Timer",
  "Retry time cycle":"Retry time cycle",
  "Variable name":"Variable name",
  "Condition Expression":"Conditional expression",
  "Condition":"Condition",
  "Process documentation":"Process documentation",
  "Assignee":"Assignee",
  "Candidate groups":"Candidate groups",
  "Candidate users":"Candidate users",
  "Due date":"due date",
  "The due date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"The due date is an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00)." ISO date (for example 2015-06-26T09:54:00)",
  "Follow up date":"Follow up date",
  "The follow up date as an EL expression (e.g. ${someDate}) or an ISO date (e.g. 2015-06-26T09:54:00).":"As an EL expression (e.g. ${someDate}) or an ISO date (for example, 2015-06-26T09:54:00) follow-up date",
  "Connector ID":"Connector ID",
  "Connector inputs":"Connector inputs",
  "Connector outputs":"Connector outputs",
  "Topic":"topic",
  "Errors":"Error",
  "Global error reference":"Reference global error ID",
  "Throw expression":"Throw expression",
  "Decision reference":"Reference decision ID",
  "Tenant ID":"Tenant ID",
  "Multi-instance":"Multi-instance",
  "Loop cardinality":"Loop cardinality",
  "Completion condition":"Completion condition",
  "Element variable":"Element variable",
  "Asynchronous before":"Asynchronous before",
  "Asynchronous after":"Asynchronous after",
};

export const customTranslate = (template, replacements) =>{<!-- -->
  replacements = replacements || {<!-- -->};
  // Translate
  template = translations[template] || template;
  // Replace
  return template.replace(/{([^}] + )}/g, (_, key)=> {<!-- -->
    return replacements[key] || '{' + key + '}';
  });
}