Prakash Hinduja (Switzerland) How do I create a custom block type that isn't included by default?

[Prakash Hinduja]

Hi I am Prakash Hinduja a Financial Strategist, born in Amritsar, India and now resides in Geneva, Switzerland (Swiss). I'm trying to create a custom block type that isn't included by default in the Syncfusion JavaScript Block Editor. If anyone have any suggestion or tips please share with me. 

Regards

Prakash Hinduja Geneva, Switzerland (Swiss) 

 

[Vigneshwaran Govindharajan]

Hi Prakash,

Sorry for the delay in getting back to you.

You can create custom block types in the Syncfusion JavaScript Block Editor in following two ways:

#1 Using template Property (Initial Load)

To define custom blocks when the control loads, use the template property in the blocks configuration. Please refer to the following code snippet and sample for reference.

Sample - link

Index.js

let blocksData = [

    {

        type: 'Template',

        template: `<div class="notification-card">

            <div class="notification-header">

                <span class="notification-icon">📢</span>

                <h3 class="notification-title">Important Announcement</h3>

            </div>

            ….

        </div>`

    }

];

var blockEditor = new ej.blockeditor.BlockEditor({

    blocks: blocksData

});

blockEditor.appendTo('#blockEditor');

#2 Using Slash Commands (commandMenu)

You can also define custom blocks triggered via slash commands, by using the commands property inside the commandMenu model. Please refer to the following code snippet and sample for reference.

Sample - link

Index.js

import { scheduleData, chartData, blockCommends } from './datasource.js';

ej.schedule.Schedule.Inject(ej.schedule.Week, ej.schedule.WorkWeek, ej.schedule.Month);

 

const blockEditor = new ej.blockeditor.BlockEditor({

  commandMenu: {

    popupWidth: '350px',

    popupHeight: '400px',

    commands: blockCommends,

    itemClicked: (args) => {

      if (args.command.id === 'calendar-cmd') {

        const uniqueId = generateUniqueId('calendar');

        addTemplateBlock(blockEditor, 'calendar', uniqueId, (id) => {

          renderScheduler(id);

        });

      } else if (args.command.id === 'chart-cmd') {

        const uniqueId = generateUniqueId('chart');

        addTemplateBlock(blockEditor, 'chart', uniqueId, (id) => {

          renderChart(id);

        });

      }

    },

  },

});

 

blockEditor.appendTo('#blockEditor');

 

// Generates a unique ID for rendering same control multiple times

function generateUniqueId(prefix = 'id') {

  return `${prefix}-${Date.now()}-${Math.floor(Math.random() * 10000)}`;

}

 

function addTemplateBlock(blockEditor, type, uniqueId, initWidget) {

  const block = {

    id: `${type}-${Date.now()}`,

    type: 'Template',

    ….

  };

  blockEditor.addBlock(block);

  setTimeout(() => initWidget(uniqueId), 0);

}

 

function renderScheduler(id) {

  var scheduleObj = new ej.schedule.Schedule({

    width: '100%',

    ….

  });

 

  scheduleObj.appendTo(`#${id}`);

  return scheduleObj;

}

 

function renderChart(id) {

  var chart = new ej.charts.Chart({

    primaryXAxis: { valueType: 'Category' },

    ….

  });

  chart.appendTo(`#${id}`);

  return chart;

}

Please get back to us if you need any further assistance.

Regards,

Vigneshwaran