How to change order of the tabs in Sales Orders page

Question

Is there a way to change the order of the tabs in the Sales Orders page?

Answer 1

Some clarification on the previous answer using PxTabItem Text and OriginalIndex="n" based on a few things that tripped me up initially.

The OriginalIndex is a Zero Based index of where the tab is BEFORE it is moved. eg for the Projects form: Sample of Projects original Tab Order

The trick is to list the Children Key="Items" in the Order that you want to seem them - with their original zero based index as the parameter. Best to include ALL the tabs in the correct order - after you add the code to the aspx page - the Cust Proj editor will eliminate the unnecessary ones and only leave what is needed. This is very helpful - but tricky if you don't know this.. If you don't want to include all the tags - you have to at least include the last unchanged tab before your changes.

Also PS - don't forget to add the /Page tag at the end...after adding code after the pageSource tag. ie change /> to > at the end of the existing code then add:-

Example of re-ordering for Projects...

<PXTab ID="tab" ParentId="phG_tab" TypeFullName="PX.Web.UI.PXTab">
    <Children Key="Items">
        <PXTabItem Text="Tasks" OriginalIndex="1" />
        <PXTabItem Text="Balances" OriginalIndex="4" />
        <PXTabItem Text="Cost Budget" OriginalIndex="3" />
        <PXTabItem Text="Change Requests" OriginalIndex="8" />
        <PXTabItem Text="Attributes" OriginalIndex="14" />
        <PXTabItem Text="Compliance" OriginalIndex="17" />
        <PXTabItem Text="Contacts" OriginalIndex="19" />
        <PXTabItem Text="Lien Waiver Settings" OriginalIndex="18" />
        <PXTabItem Text="Activity History" OriginalIndex="10" />
        <PXTabItem Text="Settings" OriginalIndex="13" />
        <PXTabItem Text="Mailing Settings" OriginalIndex="16" />
        <PXTabItem Text="Approval Details" OriginalIndex="15" />
        <PXTabItem Text="Equipment" OriginalIndex="12" />
        <PXTabItem Text="Union Locals" OriginalIndex="9" />
        <PXTabItem Text="Estimates" OriginalIndex="21" />
        <PXTabItem Text="Production Orders" OriginalIndex="20" />
    </Children>
</PXTab>

Answer 2

Noticed this is an old question with an answer but just wanted to update/add another alternative to change the order of the tabs via Customization Editor Tool, see below:

-Make sure you add your screen to the Screen section of the Customization Project.

-Then Click on File->Edit Project Items, see below:

-Then select/highlight the screen for which you want to change the tab order.

-Then once selected on the bottom part edit the page by adding a PXTab tag piece of code (snippet) to change order of tabs, see below:

<Page path="~/pages/so/so301000.aspx" pageSource="YOURPAGESOURCE">
<PXTab ID="tab" ParentId="phG_tab" TypeFullName="PX.Web.UI.PXTab">
    <Children Key="Items" >
               <PXTabItem Text="Document Details" OriginalIndex="3" />
               <PXTabItem Text="Financial Settings" OriginalIndex="2" />
               <PXTabItem Text="Commissions" OriginalIndex="1" />
            </Children>
</PXTab>

-Publish your Customization, and Refresh your browser with Ctrl + F5 (Windows). See results below:

Hope this helps.

Answer 3

Disclaimer
The shown approach is just an example of how to change the order of the tabs.
Please make sure that this approach is safe for your product before using it in it.

There is no option to specify the Tab Position from Customization, Screen Editor doesn't support drag and drop of the Tabs and even if you change the order of the tabs from Edit ASPX page pressing Generate Customization Script will roll back all the changes, so the only remaining way is to play with tabs from Javascript.

If we check the DOM structure of the page we will found the following part corresponding to the tabs table:

I will use the swap function from the answer to this question and write a function for swapping Details and Taxes tabs:

function swapElements(parent,elemA,elemB){
    if(!parent||parent.constructor.toString().search('HTML')===-1) return;
    var children = parent.children;
    if(typeof elemA!=='number' || typeof elemB!=='number' || elemA===elemB || !children[elemA] || !children[elemB]) return;

    elemB = elemA<elemB ? elemB--:elemB;
    var childNumb = children.length - 1;

    var a = parent.removeChild(children[elemA]);
    var b = parent.removeChild(children[elemB]);
    append(elemB,a);
    append(elemA,b);

       function append(a,b){
          childNumb===a ? parent.appendChild(b) : parent.insertBefore(b,children[a]);
       }
}

function swapDetailsAndTaxes()
{
    swapElements(document.querySelector("#"+px_all.ctl00_phG_tab.tabTable.id+ " tr"),0,1)
}

Now we need to add this Javascript to the page and set it as a startup script:

and add it under the Initialize Client Event of the DataSource

Now after the customization is published if you open Sales Orders page you will see that Taxes Tab is the first tab