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.
Click here to download the component shown in the videos above.