We will cover 2 examples here.

• Passing Data to Custom Tool
• Passing Data to Property Editor (Dropdown)

---

In this example, we will create a custom tool and pass data to the tool from our application.

Let's start by creating the custom tool first.

custom.js

unlayer.registerTool({
  name: 'my_tool',
  label: 'My Tool',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  options: {},
  values: {},
  renderer: {
    Viewer: unlayer.createViewer({
      render(values) {
        return `<div>
          <img src="${values.data.photo}" />
          <div>My name is <strong>${values.data.name}</strong> and I am <strong>${values.data.age}</strong> years old.</div>
        </div>`;
      },
    }),
    exporters: {
      web: function (values) {
        return `<div>
          <img src="${values.data.photo}" />
          <div>My name is <strong>${values.data.name}</strong> and I am <strong>${values.data.age}</strong> years old.</div>
        </div>`;
      },
      email: function (values) {
        return `<div>
          <img src="${values.data.photo}" />
          <div>My name is <strong>${values.data.name}</strong> and I am <strong>${values.data.age}</strong> years old.</div>
        </div>`;
      },
    },
    head: {
      css: function (values) {},
      js: function (values) {},
    },
  },
});

As you can see, the renderer (Viewer and exporters) are expecting some values: photo, name and age.

We will now load our editor with the custom.js and also pass the above values required to the tool.

unlayer.init({
  id: 'editor-container',
  displayMode: 'email',
  customJS: [
    'https://examples.unlayer.com/examples/custom-tool-data/custom.js',
  ],
  tools: {
    // my_tool is the name of our custom tool
    // It is required to add custom# before the name of your custom tool
    'custom#my_tool': {
      data: {
        name: 'John Doe',
        age: '27',
        photo: 'https://picsum.photos/id/1005/200',
      },
    },
  },
});

Live Demo

Here's a live running preview of our custom tool with the data being passed to the tool. Drag and drop the custom tool with a smiley face.

You can see the following data in action:

• Name: John Doe
• Age: 27
• Photo: https://picsum.photos/id/1005/200

---

Pass Data to Property Editor (Dropdown)

Along with the data we passed to our tool above, we will now additionally add a dropdown and pass it some values. This method is not limited to a dropdown and can be used by any custom property editor as well.

We will create a dropdown property called occupation and fill it with some values.

custom.js

unlayer.registerTool({
  name: 'my_tool',
  label: 'My Tool',
  icon: 'fa-smile',
  supportedDisplayModes: ['web', 'email'],
  options: {
    occupation: {
      title: 'Occupation',
      position: 1,
      options: {
        occupation: {
          label: 'Occupation',
          defaultValue: 'Software Engineer',
          widget: 'dropdown',
        },
      },
    },
  },
  values: {},
  renderer: {
    Viewer: unlayer.createViewer({
      render(values) {
        return `<div>
          <img src="${values.data.photo}" />
          <div>My name is <strong>${values.data.name}</strong> and I am <strong>${values.data.age}</strong> years old.</div>
          <div>My occupation is <strong>${values.occupation}</strong>.</div>
        </div>`;
      },
    }),
    exporters: {
      web: function (values) {
        return `<div>
          <img src="${values.data.photo}" />
          <div>My name is <strong>${values.data.name}</strong> and I am <strong>${values.data.age}</strong> years old.</div>
          <div>My occupation is <strong>${values.occupation}</strong>.</div>
        </div>`;
      },
      email: function (values) {
        return `<div>
          <img src="${values.data.photo}" />
          <div>My name is <strong>${values.data.name}</strong> and I am <strong>${values.data.age}</strong> years old.</div>
          <div>My occupation is <strong>${values.occupation}</strong>.</div>
        </div>`;
      },
    },
    head: {
      css: function (values) {},
      js: function (values) {},
    },
  },
});

Now, we'll load our editor with the custom.js and along with the other data, we will pass values required to the dropdown property.

unlayer.init({
  id: 'editor-container',
  displayMode: 'email',
  customJS: [
    'https://examples.unlayer.com/examples/custom-tool-data/custom.js',
  ],
  editor: {
    autoSelectOnDrop: true,
  },
  tools: {
    // my_tool is the name of our custom tool
    // It is required to add custom# before the name of your custom tool
    'custom#my_tool': {
      data: {
        name: 'John Doe',
        age: '27',
        photo: 'https://picsum.photos/id/1005/200',
      },
      properties: {
        // occupation is the name of our property
        occupation: {
          editor: {
            data: {
              options: [
                { label: 'Software Engineer', value: 'Software Engineer' },
                { label: 'Product Manager', value: 'Product Manager' },
                { label: 'CTO', value: 'CTO' },
                { label: 'CEO', value: 'CEO' },
                { label: 'Other', value: 'Other' },
              ],
            },
          },
        },
      },
    },
  },
});

Live Demo

Here's a live running preview of our custom tool using the dropdown property editor. Drag and drop the custom tool with a smiley face.

You can see the following data in action:

• Name: John Doe
• Age: 27
• Photo: https://picsum.photos/id/1005/200

Dropdown Property

• Occupation: Software Engineer