Tab: Reference Information

In the tables of this topic, you can find reference information about tabs.

Conversion from ASPX to HTML and TypeScript

The following tables will help you to convert tab-related ASPX elements to HTML or TypeScript elements.

Table 1. PXTabThe following table shows the correspondence between the PXTab ASPX control and HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
PXTab
<px:PXTab ID="tab" runat="server"
  Width="100%" Height="100%">
  <Items>
    <px:PXTabItem Text="Material">
    </px:PXTabItem>
    <px:PXTabItem Text="Tools">
    </px:PXTabItem>
  </Items>
  <AutoSize Enabled="True"/>
</px:PXTab>
 Use the qp-tabbar control, as shown in the following code. The control represents a tab bar in HTML.
<qp-tabbar id="tab">
</qp-tabbar>
ID
<px:PXTab ID="tabsSOOrder">
</px:PXTab>
 Use the id attribute of the qp-tabbar control. The attribute specifies the ID of the tab bar, as shown in the following example.
<qp-tabbar
  id="tabsSOOrder"
</qp-tabbar>
SelectedIndex
<px:PXTab SelectedIndex="1">
</px:PXTab>
 Use the active-tab-id attribute of the qp-tabbar control. The attribute specifies the ID of the active tab on the tab bar, as shown in the following example.
<qp-tabbar 
  active-tab-id="tabSettings"
</qp-tabbar>
TabIndex
<px:PXTab TabIndex="23">
</px:PXTab>
 Use the tabIndex property of the config attribute of the qp-tabbar control.
Table 2. PXTabItemThe following table shows the correspondence between the PXTabItem ASPX control and HTML or TypeScript elements. During the conversion of ASPX pages to HTML and TypeScript, you need to replace these ASPX elements with their analogs in HTML or TypeScript.
ASPX HTML or TypeScript
PXTabItem
<px:PXTabItem
  Text="Estimates"
  BindingContext="form"
  RepaintOnDemand="false">
  <Template>
    <px:PXGrid>
     </px:PXGrid>
  </Template>
</px:PXTabItem>
 Use the qp-tab control, as shown in the following code. The control represents a tab in HTML.
<qp-tab
  id="tabEstimates"
  caption="Estimates">
  <qp-grid>
  </qp-grid>
</qp-tab>
LoadOnDemand
<px:PXTabItem 
  LoadOnDemand="true">
</px:PXTabItem>
 Use the load-on-demand attribute of the qp-tab control. The attribute makes the system load the tab, even if the tab is inactive. The following code uses this attribute.
<qp-tab load-on-demand="true">
</qp-tab>
Text
<px:PXTabItem Text="Options">
</px:PXTabItem>
 Use the caption attribute of the qp-tab control. The attribute specifies the title of the tab. The following code uses this attribute.
<qp-tab caption="Options">
</qp-tab>
Visible
<px:PXTabItem Visible="True">
</px:PXTabItem>
 Use the visible attribute of the qp-tab control. The attribute specifies whether the tab appears on the form. The following code uses this attribute.
<qp-tab visible="true">
</qp-tab>
VisibleExp
<px:PXTabItem
  VisibleExp=
    "DataControls[&quot;IsGroup&quot;]
      .Value!=True"
>
</px:PXTabItem>
Use if.bind='<condition>' for the qp-tab tag, as shown in the following example.
<qp-tab 
  if.bind=
    "StateView.IsGroup.value != true"
>
</qp-tab>
Table 3. Obsolete ASPX Controls and PropertiesThe following table lists obsolete ASPX elements that are related to tabs. You do not need to replace these ASPX elements with any HTML or TypeScript elements.
ASPX Control Properties
AutoSize
<px:PXTab>
  <AutoSize Enabled="True"/>
</px:PXTab>
 All properties
PXTab
<px:PXTab 
  AllowAutoHide="True"
  BindingContext="form"
  DataKeyNames="ProdOrdID"
  DataMember="AMBSetupRecord"
  DataSourceID="ds"
  DefaultControlID="edBatchID"
  DynamicTabs="False"
  FilesIndicator="False" 
  Height="100%"
  MarkRequired="Dynamic"
  NoteIndicator="False"
  runat="server"
  SelectedIndexExpr=''
  Style="z-index: 100"
  Width="100%" >
</px:PXTab>
  • AllowAutoHide
  • BindingContext
  • DataKeyNames
  • DataMember
  • DataSourceID
  • DefaultControlID
  • DynamicTabs
  • FilesIndicator
  • Height
  • MarkRequired
  • NoteIndicator
  • runat
  • SelectedIndexExpr
  • Style
  • Width
PXTabItem
<px:PXTabItem 
  BindingContext="TreeNodeSelectedForm"
  DependsOnView="ComplianceDocuments"
  RepaintOnDemand="true">
</px:PXTabItem>
  • BindingContext
  • DependsOnView
  • RepaintOnDemand

qp-tabbar

The following table lists the properties of the qp-tabbar control, which represents a tab bar in HTML.

Property Description
active-tab-id Specifies the ID of the active tab on the tab bar, as shown in the following example.
<qp-tabbar 
  active-tab-id="tabSettings"
</qp-tabbar>
id Specifies the ID of the tab bar, as shown in the following example.
<qp-tab
  id="tabsSOOrder"
</qp-tab>
config Includes the following properties:
  • hidden: Specifies (if the value is true) that the control does not appear on the form.
  • tabIndex: Specifies the index of the tab bar during navigation with the Tab key.

qp-tab

The following table lists the properties of the qp-tab control, which represents a tab in HTML.

Property Description
caption Specifies the title of the tab. The following code uses this attribute.
<qp-tab caption="Options">
</qp-tab>
id Specifies the ID of the tab, as shown in the following example.
<qp-tab
  id="tabEstimates"
</qp-tab>
load-on-demand Makes the system load the tab even if the tab is inactive. The following code uses this attribute.
<qp-tab load-on-demand="true">
</qp-tab>
ref

Specifies the ID of the tab that is defined in an extension, as shown in the following code.

<qp-tab
  ref="tabUserInfo_Content">
</qp-tab>
The tab in an extension can be defined as the following code shows. In this example, you need to use nested template tags. The first template tag is a template for the whole extension, and the second one is a template for the tab content.
<template>
  <template id="tabUserInfo_Content">
    <qp-template ...>
    </qp-template>
  </template>
</template>
tabbar-id Specifies the ID of the tab bar to which the tab belongs. Generally, you do not need to specify this attribute.
visible Specifies whether the tab appears on the form. The following code uses this attribute.
<qp-tab visible="true">
</qp-tab>