React Diagram - Templates

The Diagram UI component allows you to create templates for shapes and their presentation in the toolbox.

IMPORTANT
Template content must be presented as SVG elements.

Shape Template

Use the following properties to create a shape template:

  • The customShapeTemplate property defines a common template for all shapes in the UI component.
  • The template property defines a template for an individual shape.

View Demo

App.js
CustomShapeTemplate.js
  • import Diagram, { CustomShape, ContextToolbox, PropertiesPanel, Group, Tab, Toolbox, Nodes, AutoLayout } from 'devextreme-react/diagram';
  • import CustomShapeTemplate from './CustomShapeTemplate.js';
  •  
  • class App extends React.Component {
  • constructor(props) {
  • this.diagramRef = React.createRef();
  • this.customShapeTemplate = this.customShapeTemplate.bind(this);
  • ...
  • }
  •  
  • render() {
  • return (
  • <div id="container">
  • <Diagram id="diagram" ref={this.diagramRef} customShapeRender={this.customShapeTemplate}>
  • ...
  • export default function CustomShapeTemplate(employee, editEmployee, deleteEmployee) {
  • var employeeName = employee ? employee.Full_Name : 'Employee\'s Name';
  • var employeeTitle = employee ? employee.Title : 'Employee\'s Title';
  • return (
  • <svg className="template">
  • <text className="template-name" x="50%" y="20%">{employeeName}</text>
  • <text className="template-title" x="50%" y="45%">{employeeTitle}</text>
  • <text className="template-button" x="40%" y="85%" onClick={editEmployee}>Edit</text>
  • <text className="template-button" x="62%" y="85%" onClick={deleteEmployee}>Delete</text>
  • </svg>
  • );
  • }