To create a custom tab panel widget, a tab panel style must first be added to the pui.widgets.tabStyles associative array.  Each entry in pui.widgets.tabStyles is an object with name/value pairs; the following are possible names:

<div class="table-wrap">
  <table cellpadding="10px" align="center" style="width:85%; border-spacing:0px; border:3px solid #ccc; border-collapse:collapse; table-layout:auto;">
    <tbody style="border-collapse:collapse;">
<!-- Table Titles -->
      <tr>
        <th style="text-align: center; border:1px solid #ccc; border-collapse:collapse; padding:4px;">
          Property Name
        </th>
        <th style="text-align: center; border:1px solid #ccc; border-collapse:collapse; padding:4px;">
          Possible Values
        </th>
        <th style="text-align: center; border:1px solid #ccc; border-collapse:collapse; padding:4px;">
          Description
        </th>
        <th style="text-align: center; border:1px solid #ccc; border-collapse:collapse; padding:4px;">
          Requirement(s)
        </th>
        </tr>
<!-- useImages Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          useImages
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><em>true</em>/<em>false</em></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if images are provided and used in the drawing of a tab panel.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse">
          <div>
            The following images are needed in the IFS Directory location <code><small>/www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name</small></code>:
          </div>
          <ul>
            <li>left.gif - the left side image of an <em>inactive</em> tab
            </li>
            <li>left-sel.gif - the left side image of an <em>active</em> tab
            </li>
            <li>middle.gif - horizontally repeated middle image of an <em>inactive</em> tab
            </li>
            <li>middle-sel.gif - <span>horizontally repeated middle image of an</span> of an <em>active</em> tab
            </li>
            <li>right.gif - the right side image of an <em>inactive</em> tab
            </li>
            <li>right-sel.gif - the ride side image of an <em>active</em> tab
            </li>
          </ul>
        </td>
      </tr>
<!-- hiImages Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          hiImages
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><span><em>true</em>/<em>false</em></span></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <span>Determines if highlight images are provided and used when the cursor hovers over a tab.</span>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <div>
            The following images are needed in the IFS Directory location <code><small>/www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name</small></code>:
          </div>
          <ul>
            <li>left-hi.gif - the left side image of a <em>highlighted</em>, <em>inactive</em> tab
            </li>
            <li>middle-hi.gif - horizontally repeated middle image of a <em>highlighted</em>, <em>inactive</em> tab
            </li>
            <li>right-hi.gif - the right side image of a <em>highlighted</em>,<em>inactive</em> tab
            </li>
          </ul>
        </td>
      </tr>
<!-- imageFileExtension Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          imageFileExtension
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <p style="text-align: center;">
            <code>Any valid image file extension</code><br>
            <code><em>Default</em>: .gif</code>
          </p>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Specifies image file extension used for Tab Panel images.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <em>Optional</em>
          </p>
        </td>
      </tr>
<!-- height Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          height
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid pixel value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines the tab height in pixels.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <em>Digits Only</em>
        </td>
      </tr>
<!-- defaultBackColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          defaultBackColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the default background color of the active tab.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <em>false</em></code>
        </td>
      </tr>
<!-- hiColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          hiColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code style="text-align: center;">Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the highlight color of non-selected tabs when cursor hovers over.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <em>false</em></code>
        </td>
      </tr>
<!-- leftWidth Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          leftWidth
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid pixel value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the width of the left side image.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <em>Digits Only</em>
          </p>
          <p>
            Should match width of provided image.
          </p>
          <p>
            <code><strong>useImages</strong> needs to be set to <em>true</em></code>
          </p>
        </td>
      </tr>
<!-- rightWidth Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          rightWidth
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid pixel value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the width of the right side image.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <em>Digits Only</em>
          </p>
          <p>
            Should match width of provided image.
          </p>
          <p>
            <code><strong>useImages</strong> needs to be set to <em>true</em></code>
          </p>
        </td>
      </tr>
<!-- selColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          selColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines color of <em>active</em> tab.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <em>true</em></code>
        </td>
      </tr>
<!-- selBold Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          selBold
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><em>true</em>/<em>false</em></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if <em>active</em> tab header is also bold.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <span><em>true</em></span></code>
        </td>
      </tr>
<!-- borderColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          borderColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the color of the Border.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <code><strong>borderSize</strong> needs to be set to a digit pixel value greater than zero (Otherwise, color will not be seen.)</code>
          </p>
        </td>
      </tr>
<!-- leftMargin Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          leftMargin
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
              <code><span>Any valid pixel value</span></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the width of the left side margin of the tabs in pixels.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <em>Digits Only</em>
          </p>
          <p>
            <code><strong>useImages</strong> needs to be set to <span><em>true</em></span></code>
          </p>
        </td>
      </tr>
<!-- hiUnderline Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          hiUnderline
    </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><em style="text-align: center;">true</em><span>/</span><em style="text-align: center;">false</em></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if <em>highlighted</em>, <em>inactive</em> tab header is also underlined.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <em>Optional</em>
        </td>
      </tr>
<!-- separated Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          separated
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><em style="text-align: center;">true</em><span>/</span><em style="text-align: center;">false</em></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if there is a separation gab between the tabs.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>useImages</strong> needs to be set to <span><em>true</em></span></code>
        </td>
      </tr>
<!-- backBar Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          backBar
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <code><em style="text-align: center;">true</em>/<em style="text-align: center;">false</em></code>
          </p>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Determines if the area behind the tabs, the Back Bar, is visible or transparent.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <em>Optional</em>
		  <p>
			If set to <em>true</em>, it is required for either <strong>backBarColor</strong> to be set to a valid color value or an image named <code>middle.gif</code> be provided in the IFS Directory location <code><small>/www/profoundui/htdocs/profoundui/proddata/images/tabs/custom_widget_style_name</small></code> in order to be visible.
		  </p>
        </td>
      </tr>
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          backBarColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code>Any valid color name or hex value</code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the color of the Back Bar.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <code><strong>backBar</strong> needs to be set to <em>true</em></code>
        </td>
      </tr>
<!-- borderSize Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          borderSize
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <p style="text-align: center;">
            <code>Any valid pixel value</code><br>
            <code><em>Default</em>: 1</code>
          </p>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the tab panel's border size in pixels.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <em>Digits Only</em>
        </td>
      </tr>
<!-- defaultTabColor Property -->
      <tr>
        <th style="background:#F0F0F0; border:1px solid #ccc; text-align: right;">
          defaultTabColor
        </th>
        <td valign="center" style="text-align: center; border:1px solid #ccc; border-collapse:collapse;">
          <code><span>Any valid color name or hex value</span></code>
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          Sets the background color of inactive tabs.
        </td>
        <td valign="center" style="border:1px solid #ccc; border-collapse:collapse;">
          <p>
            <code><strong>useImages</strong> needs to be set to <em>false</em></code>
          </p>
          <p>
            <em><em>ProfoundUI Version 5, Fix Pack 13.0 and later.</em></em>
          </p>
        </td>
      </tr>
    </tbody>
  </table>
</div>

JavaScript Syntax for Adding a Tab Panel Style

pui.widgets.tabStyles["tab panel style name"] = {
  property1: value1, property2: value2, etc.
}

The "tab panel style name" will then appear as an option in the Visual Designer under the "tab panel style" property.

After adding a new tab style, the next step is to add an entry into the Widgets Toolbox by using the pui.toolbox.add() API.  For more details about this API, refer to the Widgets Development API section of the documentation.  You should create a tab panel proxy image and a tab panel icon image before using the API.  The "defaults" configuration option should assign the "tab panel style" property to the new tab panel style name. 

All JavaScript code should be saved into an external file that is placed in the /www/profoundui/htdocs/profoundui/userdata/custom/widgets IFS directory.

Example: JavaScript Code to Create a Custom Tab Panel

// Add a new tab panel style
pui.widgets.tabStyles["Custom Tab Panel"] = {
  useImages: false,
  height: 15,
  defaultBackColor: "#FAE5AF",
  hiColor: "#666699"
}

// Now, add an entry to the Widgets Toolbox
pui.toolbox.add({
  category: "Custom Widgets",
  widget: "tab panel",
  text: "Custom Tab Panel",
  icon: "/profoundui/proddata/images/tabs/Custom/icon.png",

  proxyHeight: 202,
  proxyWidth: 302,
  proxyHTML: '<img src="/profoundui/proddata/images/tabs/Custom/proxy.png" style="height: 202px; width: 302px;">',

  defaults: {
    "tab panel style": "Custom Tab Panel"
  }
});