How to Dynamically Add Panels to a Panel Navigator


Panels (Panel Cards, Panel Layouts, and child Panel Navigators) can be dynamically added to a Panel Navigator at run-time.


When you create UX component that uses a Panel Navigator, the Panels (Cards, Layouts, and child Navigators) in the Panel Navigator are usually created at design-time. It is not required, however, that the Panels in a Panel Navigator be created at design-time.

You can create Panels at run-time and dynamically add them to the Panel Navigator. The Panel Navigator's .addPanel() method can be called to add Panels. Similarly, you can remove Panels from a Panel Navigator at run-time.

function addPanel() {
    var id = {dialog.object}.getValue('panelNum');
    if (id == '') {
        alert('Please type a number in the textbox before clicking the button');
        return false;

    //specify a unique name for the new Panel
    var panelName = 'NEWPANEL_' + id;
    var panelTitle = 'Pane ' + id;

    //define a new Panel Card
    var myNewPanelCard = new A5.PanelCard({
        theme : '{}',
        body: {
            content: {
                type: 'html',
                src: 'this is my new panel text for: ' + panelName

    //get a pointer to the Panel Navigator where the new Panel will be added
    var pNav = {dialog.object}.panelGet('PANELNAVIGATOR_1');

    //add the new Panel Card to the Panel Navigator

        name: panelName,
        title: panelTitle,
        src: myNewPanelCard

    //optionally, set focus to the new Panel


Watch the video below to learn more about how to dynamically add Panels to a Panel Navigator.

Click here to download the component shown in the videos above.