Dynamic Tab Management in B‑Side Apps: Add and Remove Pages with a Repeater

Overview

This guide explains how to create a dynamic tab interface in a B‑side application using a repeater component. The tabs can be added and removed by the user at runtime, mimicking the behaviour of browser‑style tab pages.

Procedure

Create the repeater . Drag a Repeater – Table onto the canvas and rename it Tab Page Repeater . Delete the last two columns and the last two rows so that the repeater contains a single cell. Edit the cell content to display the initial tab title, e.g., “Brand Management”.

Adjust the internal layout . Double‑click the repeater to open its inner canvas. By default it contains three columns; delete the two unwanted columns (Backspace) and set the border width to 0 . Drag the column borders to set appropriate widths and change the layout direction to Horizontal .

Add tab elements . Inside the repeater you will find a rectangle named Menu Tab . Drag a Close‑icon component onto this rectangle; it will serve as the tab‑close button.

Configure spacing and add a menu button . Set the repeater layout’s Column spacing to 5 . Drag a rectangle onto the canvas to act as the “Add Tab” button. Attach a click event that creates a new row in the repeater and populates it with a tab title and a close icon.

// Pseudo‑code for the Add‑Tab button click event
function onAddTabClick() {
    const newRow = repeater.addRow();
    newRow.setCellValue(0, "New Tab"); // set title
    // the close‑icon component is already part of the row template
    // optionally set a unique identifier for later removal
}

Define selected‑tab style . For the most recently created tab, configure a selected style: create an Option Group (e.g., TabGroup ), set the selected fill colour to blue ( #007BFF ) and the font colour to white ( #FFFFFF ), then mark the tab as selected. Finally, clear the repeater’s Property checkbox so that the style is applied only to the chosen tab.

Enable tab removal . Add a click event to the close‑icon component that deletes the row (i.e., the tab) it belongs to.

// Pseudo‑code for the close‑icon click event
function onCloseIconClick(row) {
    repeater.removeRow(row);
}