Modern UI - Controlling button placement in the SO301000 screen

Hi ​@lauras52,

In Modern UI, button placement is not controlled in TypeScript.
The TypeScript only exposes the action (via PXActionState).

Placement in the toolbar is determined by the PXAction declaration in the graph — including Category, Order, and whether DisplayOnMainToolbar is enabled.

There is no supported way to manually position a custom button next to a specific built-in button like Add Items using TypeScript alone.

Hii ​@lauras52 , For Modern Ui Button placements, just go into customization project open that particular screen 

In the ActionBar-Customsitems you can customize the postion as per ur requirement 

Here is the preview change 

Hope this solution works for you, please let me know if you want anything else.

If ,above solution did not work’s, you can try this way from .ts file of that particular screen 

@gridConfig({
    showFastFilter: GridFastFilterVisibility.False,
    autoAdjustColumns: true,
    syncPosition: true,
    preset: GridPreset.ReadOnly,

    topBarItems: {
        AddAttachment: {
            type: "menu-button",
            index: 1,
            
            config: {
                commandName: "AddAttachment",
                text: "Add Attachment"
            }
        },
        ViewAttachment: {
            type: "menu-button",
            index: 2,
            //command: "OpenFile",
            config: {
                text: "View Attachment"
            }
        },
        DeleteAttachment: {
            type: "menu-button",
            index: 3,
            //command: "DeleteAttachment",
            config: {
                text: "Delete Attachment"
            }
        }

Through “index:1” you can give the preferences

While this will affect Classic UI, it has no affect on Modern UI.

This is in fact how it is done.

Thank you. This is what I suspected.

Hii ​@lauras52 , For Modern Ui Button placements, just go into customization project open that particular screen 

In the ActionBar-Customsitems you can customize the postion as per ur requirement 

Here is the preview change 

Hope this solution works for you, please let me know if you want anything else.

 

If ,above solution did not work’s, you can try this way from .ts file of that particular screen 

@gridConfig({
    showFastFilter: GridFastFilterVisibility.False,
    autoAdjustColumns: true,
    syncPosition: true,
    preset: GridPreset.ReadOnly,

    topBarItems: {
        AddAttachment: {
            type: "menu-button",
            index: 1,
            
            config: {
                commandName: "AddAttachment",
                text: "Add Attachment"
            }
        },
        ViewAttachment: {
            type: "menu-button",
            index: 2,
            //command: "OpenFile",
            config: {
                text: "View Attachment"
            }
        },
        DeleteAttachment: {
            type: "menu-button",
            index: 3,
            //command: "DeleteAttachment",
            config: {
                text: "Delete Attachment"
            }
        }

 

Through “index:1” you can give the preferences

 

Thank you for your reply! This appears to work well for a custom screen, is it possible to do something similar when modifying an Acumatica screen? (Sales Order/SO301000). I need to insert my button between existing buttons.

Thank you for your reply. You are correct. I need to adjust the order of the buttons in the Modern UI. In the original UI, the button is in the desired position.

The typescript example that tareshpatil51 provided is for a custom screen. I need to modify an Acumatica screen (Sales Order/SO301000) - inserting my custom button between existing buttons.

There is no supported way to manually position a custom button next to a specific built-in button like Add Items

Just because you don’t know how to do something doesn’t mean it doesn’t exist.

 

import { PXActionState } from "client-controls";
import { SOLine } from "src/screens/SO/SO301000/SO301000";

export interface SOLine_DXReorderToolbar extends SOLine { }
export class SOLine_DXReorderToolbar {

    myButton: PXActionState;
}

<template>
    <qp-grid modify="#grid-Details"
        config.bind="{
            actionsConfig: {
                ShowItems: { index: 1 },
                myButton: { index: 2 }
            }
        }">
    </qp-grid>
</template>

 

​@darylbowman - Thank you! That’s exactly what I needed. It works!