How to Convert Extended DAC Fields in the Sales order screen classic to Modern UI

The following information may help you:
https://help.acumatica.com/Help?ScreenId=ShowWiki&pageid=8986708d-04f6-4f26-ae47-8ce1486ae5a9

​@kpopova followed same, unable to convert the Extended DAC fields into the Modern UI . 

Hi ​@Sid,

Are you receiving any error? If so, kindly share more details like, the steps to reproduce the issue, error received, that would help us check this further. 

Hi ​@Sid ,

To add extended fields in the Modern UI by extending the default SO301000 screen's TypeScript and HTML files, follow the approach below. This might help you.

I have added the “TestField” to the Sales Order screen, as shown in the screenshot below.

Create DAC extension.

public sealed class TestSOField : PXCacheExtension<PX.Objects.SO.SOOrder>
{
    public static bool IsActive() { return true; }
    #region TestField
    [PXDBString(10)]
    [PXUIField(DisplayName = "Test Field")]
    public string TestField { get; set; }
    public abstract class testField : BqlString.Field<testField> { }
    #endregion
}

Extend the TypeScript file.

import {PXFieldState} from "client-controls";
import {SOOrderHeader } from "../SO301000";

export interface SOOrderHeader_TestField extends SOOrderHeader { }
export class SOOrderHeader_TestField { 
    TestField: PXFieldState;
}

Add the HTML code.

<template>
    <template modify="#fsColumnA-Order">
        <field name="TestField"></field>
    </template>
</template>

​@rakeshe45 , i have tried for single field, but we have 5 extended fields in header, below classic screen, extended fields in red box

tried with below code
 

but when switched to Modern UI , cannot see these fields in UI
 

no error received

Hi ​@Sid ,

Here in HTML you are trying to modify the fsColumnD-Order which we don’t have in default sales order html file.

We can modify only existing id’s.

As of my knowledge in modern UI we can add 3 columns at a time.

Since we have 3 columns in default screen you can add a new column below these columns.

Try to add after template id “form-Order”. Please try by using the “after” attribute.

 Hi ​@Sid,

Adding the 4th row could be tricky in this case but possible, please review response in the below thread, 

• How to add more than three columns to the Form template in Modern UI?

In this case, you can try the following approach,

• Delete the slot C, and define a qp-template with name 1-1
• Then you can create a two qp-fieldset, 1st one similar to the out-of-box slot c and new one to add the custom fields

Feel free to post back if you have any questions. Good Luck.! 

Vignesh Ponnusamy wrote:

 Hi ​@Sid,

Adding the 4th row could be tricky in this case but possible, please review response in the below thread, 

• How to add more than three columns to the Form template in Modern UI?

In this case, you can try the following approach,

• Delete the slot C, and define a qp-template with name 1-1
• Then you can create a two qp-fieldset, 1st one similar to the out-of-box slot c and new one to add the custom fields

Feel free to post back if you have any questions. Good Luck.! 

​@Vignesh Ponnusamy  In my requirement , 4th row contains all custom fields, for custom fields will generate new html, ts files, how we can remove the default Acumatica 3th row, can share the example data for adding the 4th row to the sales order screen 

Hi ​@Siddu,

I played around a bit, but couldn’t exactly implement what you are looking for, but below are few points you can explore,

<template>
    <template remove="#fsColumnC-Order">
    </template>
    <template modify="#form-Order" name="14-17-17">
        <qp-template id="split" after="#fsColumnB-Order" slot="C" name="1-1">
            <qp-fieldset id="fsColumnC-Order" slot="A" view.bind="Document" class="highlights-section">
                <field name="OrderQty" pinned="true"></field>
                <field name="CuryDetailExtPriceTotal"></field>
                <field name="CuryLineDiscTotal"></field>
                <field name="CuryDiscTot"></field>
                <field name="CuryFreightTot"></field>
                <field name="CuryTaxTotal" pinned="true"></field>
                <field name="CuryOrderTotal" pinned="true"></field>
                <field name="CuryControlTotal" pinned="true"></field>
            </qp-fieldset>
            <qp-fieldset id="fsColumnC1-Order" slot="A" view.bind="Document" class="highlights-section">
                <field name="OrderQty" pinned="true"></field>
            </qp-fieldset>
        </qp-template>
    </template>
</template>

As in the above template, 

• Firstly, remove the fscolumnC-Order
• modify the form-order and change the template(name=”14-17-17”) to allow more space to the 3rd column. You can use different template. For more info about templates refer, https://help.acumatica.com/(W(9))/Help?ScreenId=ShowWiki&pageid=df37e247-9176-46fe-b326-f1af81e5c547
• With the Slot C, define a template name=”1-1” so both the columns will be split equally, within which you can create two fieldset. 

Outcome of the above code, as there is no space for the 4th column it was just pushed beneath the 3rd.

Challenges about,

• Adding the fourth columns is not recommended 
• You might have to remove the #form-order section and just recreate the whole header part, you might have to spend sometime experimenting different templates to identify the ideal format that would work for 4 column layout  

Please feel free to post back if you have any questions. Good Luck,

Hi ​@Siddu,

That’s great, you were able to get it working.

From my testing using your code, I see the 3rd and 4th columns are filled rightly.

Just a quick check, is your browser zoom set to 100%? When its set to less than 100, I see space towards right of the 4th column.