Dynamically adding Components

Often you'd want to give your users the ability to add new items to an existing layout. Strelit Layout offers a number of ways to do this.

• You can turn any DOM element on the page into a 'dragSource' that turns into a layoutItem when dragged
• You can let the user select an element and add items to it
• You can add items to a specified element

Creating a layout

For this tutorial we won't insert the layout directly into the body, but rather into a div to leave some space for a component menu.

<div id="wrapper">
    <ul id="menuContainer"></ul>
    <div id="layoutContainer"></div>
</div>

Let's keep things simple: Create a basic layout with two components in a row

const config = {
  root: {
    type: 'row',
    content: [
      {
        type: 'component',
        componentType: 'example',
        title: 'Panel 1',
        componentState: { text: 'Component 1' }
      },
      {
        type: 'component',
        componentType: 'example',
        title: 'Panel 2',
        componentState: { text: 'Component 2' }
      }
    ]
  }
};

const layoutContainer = document.getElementById('layoutContainer');
const myLayout = new StrelitLayout(layoutContainer);

myLayout.registerComponentFactoryFunction('example', (container, itemConfig) => {
  const state = itemConfig.componentState || {};
  container.element.innerHTML = '<h2>' + state.text + '</h2>';
});

myLayout.loadLayout(config);

Creating the "insert component" menu

We'll create the "insert component" menu items using standard DOM APIs:

const menuContainer = document.getElementById('menuContainer');

const addMenuItem = (text) => {
  const element = document.createElement('li');
  element.textContent = text;
  element.className = 'menu-item';
  menuContainer.appendChild(element);
  return element;
};

const itemA = addMenuItem('User Added Component A');
const itemB = addMenuItem('User Added Component B');

Method 1: Creating a Drag Source

Strelit Layout allows any DOM element to become a drag source. Dragging the element directly drops a new tabbed component into the layout workspace.

In modern Strelit UI Kit, call newDragSource(element, itemConfigCallback). The callback dynamically generates the component configuration whenever a drag interaction begins:

myLayout.newDragSource(itemA, () => ({
  type: 'component',
  componentType: 'example',
  title: 'Component A',
  componentState: { text: 'Created from Drag Source A' }
}));

myLayout.newDragSource(itemB, () => ({
  type: 'component',
  componentType: 'example',
  title: 'Component B',
  componentState: { text: 'Created from Drag Source B' }
}));

Dragging either menu item into the layout will display a drag proxy and dock smoothly anywhere in the layout tree.

Method 2: Programmatic Insertion via addComponent()

To append components on click without dragging, use myLayout.addComponent(). This automatically docks the new component into the currently active or focused stack:

itemA.addEventListener('click', () => {
  myLayout.addComponent(
    'example',
    { text: 'Added via Click A' },
    'Clicked Component A'
  );
});

Method 3: Adding items to a specific parent container

You can also add a component directly to a specific target item in the tree (such as the root container, a specific row, column, or stack):

itemB.addEventListener('click', () => {
  const newComp = myLayout.newComponent(
    'example',
    { text: 'Added to Root Row' },
    'New Row Tab'
  );

  // Add as child to the root row/stack item
  if (myLayout.rootItem) {
    myLayout.rootItem.addChild(newComp);
  }
});

Community & Support