Basic Customization > User Interface Customization > Customizing HTML Clients Using the Windchill JSP Framework > Split Pane / Two Pane > Solution
  
Solution
Use the two pane common component tag, renderTwoPanes. This is included in the JCA common components library (http://www.ptc.com/windchill/taglib/components).
Prerequisite knowledge
To use the two pane component, you need to have an understanding of the following:
• JSPs, tag libraries, and JSTL
• The JSP-based client architecture framework in Windchill
Solution Elements
Using this component, a developer needs to configure the left and right pane JSP, while the layout of the page is provided by the renderTwoPanes taglib.
Element
Type
Description
RenderTwoPanesTag.java
Java class
The tag that renders out the two pane component in a JSP
navigation.jsfrag
JavaScript Fragment
Renders the component to the DOM
<your_left_pane>.jsp
JSP
The JSP to have displayed in the left or top pane, depending on the orientation value (horizontal|vertical).
<your_right_pane>.jsp
JSP
The JSP to have displayed in the right or bottom pane, depending on the orientation value (horizontal|vertical).
<your_header_pane>.jsp
JSP
The JSP to have displayed in the top pane when orientation is set to horizontal.
<your_javascript_file>.js
JavaScript file
Contains your click handler function (if specified). The click handler is a Javascript function that will be called for every click event fired from either pane (left/right or top/bottom). The click handle will most likely make an AJAX call to get the data to display. Typically, when something is clicked in one pane you’ll want to have something happen in the other pane.
Two pane in wizard step
This component can also be used in wizard step but the following pieces are required. Place the following fragments in the wizard step JSP where the two pane component will be used:
1. Create an empty DIV element. The two pane component will render itself to this DIV: <div id="twoPaneExample"></div>
2. Override the viewport object. The two pane component will be added to the viewport. By default, the wizard does not create a viewport object, thus we need to define the PTC.navigation.loadViewPort JavaScript function.
* 
Ensure the value for the “renderTo” attribute matches the id given to the DIV element in previous step.
PTC.navigation.loadViewPort = function(pageItems){

var verticalPanel = new PTC.Panel({
layout:'fit',
id: 'jca_viewport',
renderTo: 'twoPaneExample',
width : 800,
height: 600,
items: pageItems
});
}
3. Load the pop-up shell by calling the following JavaScript function:
PTC.navigation.loadShell (PTC.navigation.POPUP_SHELL);
4. If the wizard step is not the first step, then you may need to add this JavaScript code snippet so that your split pane component will be visible when the step is rendered:
PTC.wizard.on(‘wizardStepReady’, function(stepId) {
if (stepId === “thisWizardStepId”) {
PTC.wizard.showSplitPaneOnWizardStep(“jca_viewport”,
{left:20, right: 80}, “vertical”);
}
});
In the above code example, you would substitute “thisWizardStepId” for the actual Id of your wizard step. The left and right parameters correspond to the leftPaneSize and rightPaneSize that you configured using the renderTwoPanes tag, as does the orientation (“vertical” in this example).
For wizard references, please see Constructing Wizards.