UltimatePanel Designer Interface

UltimatePanelDesigner is the design tool to create your UltimatePanel visually. You can build a panel from scratch, or update a presaved panel. UltimatePanelDesigner is an ASP.NET application, and requires .NET framework to be installed on your machine. Here is a snapshot from the UltimatePanelDesigner.htm page, which is followed by explanations for each component.
Panel Source
 Browse To browse an XML document as Panel Source. Choose file dialog box appears when clicked. Name of the file selected is shown in the text box on the left.

This button does not load the XML file selected. To load an XML document as Panel Source, click on Load Panel button after browsing.
 New Panel To create a new panel from scratch. Panel Source, Panel Tree, Panel/Group/Item property tabs, Panel CSS and Generated DHTML Panel are cleared when clicked.
 Load Panel To load a panel from an XML document either selected by the Browse button or typed in Panel Source text box. Panel Source, Panel Tree, Panel/Group/Item property tabs, Panel CSS and Generated DHTML Panel are populated with the contents of the XML document selected.

"File not found" error is shown when Panel Source text box is empty or file does not exist.
 Save Panel To save the panel. Panel Source XML document and Panel Css file are saved when clicked. Panel Source XML document is saved into the file name defined in Panel Source text box. Panel Css file is saved into the file name defined in CssFile property in Panel tab.

Note: ASPNET user should be given Write permissions to be able to save Panel Source XML files and Panel Css files. Otherwise you will get an error as "Panel XML file cannot be saved".
Panel Source DB ConnString & Panel ID
 Load Panel To load a panel from database specified by a connection string and a panel ID in the text boxes. It will connect to the database and load the panel from the three tables: KaramasoftPanel, KaramasoftPanelGroup and KaramasoftPanelItem.
 Save Panel To save the panel to database. Panel is saved into the three tables: KaramasoftPanel, KaramasoftPanelGroup and KaramasoftPanelItem. Panel Css file is saved into the file name defined in the CssFile property in the Panel tab.
Panel Tree
You can easily Add and Delete panel items and Move them in the panel hierarchy.
 Add Item To add a new item into the panel hierarchy. When a new item is added, it becomes the child of the item selected before Add Item button is clicked. If the new item is a group header its default group properties are shown in the Group tab. The new item added is highlighted in Panel Tree and its default item properties are shown in the Item tab.

Note that items inside a group cannot have child nodes since nested groups are not allowed in a panel.
 Delete To delete an item or group from the panel hierarchy. When an item is deleted, all of its children is deleted automatically and its parent is highlighted in Panel Tree.

Note that panel root cannot be removed.
 Move Up To move an item or group up in the panel hierarchy.
 Move Down To move an item or group down in the panel hierarchy.
 Move Left To move an item to the left in the panel hierarchy. When moved to the left, the item becomes a group header below the group it is in.

Note that group headers cannot move left.
 Move Right To move a group header to the right in the panel hierarchy. The group header becomes an item in the group above it.

Note that items and group headers that have items in their group cannot move right.
Panel/Group/Item Tabs
Please refer to UltimatePanel document to see the panel attributes.
Panel Css
You can manipulate Panel styles in Panel Css text area, and Refresh the panel to see the changes instantly.
 Refresh Panel To refresh panel after making changes in Panel Css text area. Panel will be displayed instantly according to the changes made.
Generated DHTML Panel
Panel is rendered accordingly after any change is made.