How to Dynamically Add Panels to a Panel Navigator

Description

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

Discussion

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 : '{dialog.style}',
        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

    pNav.addPanel({
        name: panelName,
        title: panelTitle,
        src: myNewPanelCard
    });

    //optionally, set focus to the new Panel
    pNav.setActivePanel(panelName);

}

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

Dynamically Adding Panels to a Panel Navigator

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

Dynamic Panel Behaviors

UX Component - Dynamic Panel - onBeforeHide Event: With build 8719, UX components opened in a Dynamic Panel and then closed by the user will have an onBeforeHide event fire if the UX is cached or an onBeforeRemove event fire if the UX is not cached.

UX Component - Action Javascript - Edit List Row Data in a UX Component - Dynamic Panel: With build 8417 and newer, you can specify that the UX to edit a row in a List should be opened in a new dynamic panel (previously, only one dynamic panel was used). To create a new dynamic panel for each row in the List that you edit, uncheck the Re-use dynamic panel property.

Panel Navigator - Indicator Icons - Panel Hide: Prior to build 8719, if a UX was opened in a Dynamic Panel in a Panel Navigator and the UX was cached and if the Panel Navigator mode was set to Tab Band and if the Dynamic Panel was configured to allow users to close the panel, the Indicator icons did not refresh to indicate that a Panel had been closed. This was because the Dynamic Panel was actually only hidden (and not closed). Currently, when a Dynamic Panel is hidden the indicator icons refresh correctly.