panelObject.addPanel Method
Syntax
Arguments
- panelSettings
Settings that define properties for the new panel. Can have the following properties:
- namestring
The Name of the new Panel.
- titlestring
The title for the new Panel.
- srcA5.PanelCard
A panel card object that defines the contents of the Panel.
- closeboolean
true/false. Adds close button to panel if true. For use with Panel Navigator with Tab Bands.
Description
Adds a panel to a Panel Navigator
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 addNewPanel() { 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'); if (pNav) { //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); } }
Closing Dynamically Added Panel
If the dynamic panel is added to a Panel Navigator that has been configured to use Tab Bands as the method for navigating the child Panels, you can allow the user to close a dynamically added Panel. When the .addPanel() method is called, the JSON object that defines the new Panel can specify that the close button should be included by defining the close property in the panel settings object:
close: true
For example
//get a pointer to the Panel Navigator where the new Panel will be added var pNav = {dialog.object}.panelGet('PANELNAVIGATOR_1'); if (pNav) { //add the new Panel Card to the Panel Navigator pNav.addPanel({ name: panelName , title: panelTitle, src : myNewPanelCard, close: true }); }
In the image below, Pane4 was added dynamically with the close option set to true. As you can see, the Tab Band label for the Pane includes a close icon. If you tap on the close icon, the Pane is closed and is removed from the Panel Navigator.