Frontend API: Statuses Highlighted with Colors

Starting in MYOB Acumatica 2025.2.1, records’ statuses are highlighted with intuitive color coding on data entry forms with workflows.

Need different colors? You can update the default colors to match your users’ expectations—or apply the same visual treatment to any box with a list of drop-down values (the PXStringList attribute).

How This Improves the User Experience

• Faster decision-making: Users intuitively grasp whether the record is in progress, paused, or needing their attention.
• Smoother record processing: Visual cues quickly convey whether users can process the record.
• Improved workflow efficiency: Teams can assess record statuses at a glance across forms.

Colored Statuses on Data Entry Forms

On data entry forms that use workflows, the Status box is now highlighted with a color (also called a connotation) based on the specified status. For example, on the Sales Orders (SO301000) form, the following statuses are highlighted with the listed colors:

Below you can see the Open status highlighted in blue.

Changing the Default Color or Defining a New One

You can specify a connotation for any box that has the PXStringList attribute on the corresponding DAC field. Some forms, such as data entry forms with workflows, have default connotations defined in the style.scss file of the screen folder or in the common folder of the module.

You can change the default connotation or create a new one by doing the following:

1. In the screen folder, open the style.scss file or create a new one.

   If you’re creating a new file, in the style.scss file, import the mixin from the WebSites/Pure/Site/FrontendSources/screen/static/status-colors.scss file.

2. Define the correspondence between the PXStringList attribute values and the colors, as shown in the following example.

   @import 'static/status-colors.scss';
   @include colored-status('N', var(--status-blue-color));
   @include colored-status('H', var(--status-orange-color));
   @include colored-status('P', var(--status-red-color));
   @include colored-status('V', var(--status-red-color));
   @include colored-status('E', var(--status-orange-color));
   @include colored-status('A', var(--status-orange-color));
   @include colored-status('R', var(--status-red-color));
   @include colored-status('C', var(--status-gray-color));
   @include colored-status('L', var(--status-gray-color));
   @include colored-status('B', var(--status-orange-color));
   @include colored-status('S', var(--status-blue-color));
   @include colored-status('I', var(--status-blue-color));
   @include colored-status('D', var(--status-orange-color));

Specifying the Connotation for a Box

To specify connotations that have been defined in the style.scss file, do the following:

1. In the HTML template of the screen, import the styles.scss file that defines the connotations.

   <template>
       <require from="./style.scss"></require>
       ...
   </template>

2. For the field that you want to highlight, specify class="colored" in the corresponding field tag.

   <qp-fieldset id="fsColumnA-Order" slot="A" view.bind="Document">
     ...
     <field name="Status" class="colored" pinned="true"></field>
   </qp-fieldset>

Key Takeaways

• Visual aid: On data entry forms, statuses are now highlighted with different colors to immediately give users information about the record.
• Simple activation: Just add class="colored" to any field with the PXStringList attribute on backend.
• Flexible customization: You can modify or define value-to-color mappings in the style.scss file.
• Consistent UX: Leverage predefined color variables for consistency.

Learn More

To learn how to define drop-down values, see:

• Combo Box: Configuration
• PXStringListAttribute

To explore how status values are defined through workflows, see:

• For Workflow UI:Workflow Creation: To Add States
• For Workflow API: Defining Workflow States