Hi Team,
We are experiencing an issue in the custom screen: the success message is displayed in red color in the Modern UI.
It should be displayed the same way as in the Classic UI.
Please refer to the following files/screenshots:
Screenshot1:Setup Parameters screen – Classic UI

Screenshot2:Setup Parameters screen – Modern UI

The files we are using for the Modern UI are:
KNMC1010.html
<template>
<qp-tabbar id="tab">
<qp-tab id="tabMagento" caption="Magento">
<qp-template id="Magento_form" name="1-1" class="equal-height label-size-m">
<div slot="A" class="v-stack">
<qp-fieldset id="MagentoSetup_Connection" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="Connection Settings">
<field name="MagentoURL" class="control-size-xl" ></field>
<field name="AuthenticationType" class="control-size-xl"></field>
<field name="BearerToken" config-type.bind="2" class="control-size-xl"></field>
<field name="ConfirmBearerToken" config-type.bind="2" class="control-size-xl"></field>
<field name="AccessToken" config-type.bind="2" class="control-size-xl"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_Queue" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="Queue Processing Settings">
<field name="ThresholdCount"></field>
<field name="BatchCount"></field>
<field name="RetryCount"></field>
<field name="CheckProcessTime"></field>
<field name="CheckRetrytime"></field>
<field name="ProcessSleepTime"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_UOM" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="UOM Based Product Sync Preferences">
<field name="IncludeUOMbasedSalesSupport"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_Inventory" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="Inventory Sync Preferences">
<field name="QtyAvailable"></field>
<field name="QtyAvailableForShipping"></field>
<field name="QtyAvailableOnHand"></field>
<field name="WarehouseMonitored" class="control-size-xl"></field>
<field name="SyncQty" class="control-size-xl"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_KitQuantity" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="Kit Quantity Sync Preferences">
<field name="IncludeDefaultKitQty"></field>
<field name="IncludePossibleKitQtyComponent"></field>
<field name="NonstockQty"></field>
</qp-fieldset>
</div>
<div slot="B" class="v-stack">
<qp-fieldset id="MagentoSetup_CustomerSync" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="A to M Customer Sync Preferences">
<field name="CustomerClasses" class="control-size-xl"></field>
<field name="IncludeCustomerLocation"></field>
<field name="IncludeCustomerContact"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_OrderSync" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="A to M Order Sync Preferences">
<field name="OrderTypes" class="control-size-xl"></field>
<field name="IsSyncOrderEnabledCustomer"></field>
<field name="Atleastoneshipmentisconfirmed"></field>
<field name="OrderUnpaidbalancebecomesZero"></field>
<field name="OrderPaymentAuthorizationPresent"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_OrderUpdate" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="A to M Order Update Preferences">
<field name="IncludePaymentDetails"></field>
<field name="IncludeInvoiceDetails"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_ShipmentTrigger" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="Shipment Sync Trigger">
<field name="ShipmentSyncTrigger" config-class.bind="'vertical'"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_DropShip" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="A to M DropShip ShipVia Sync Preferences">
<field name="DropShipShipVia" class="control-size-l"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_Additional" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="Additional Settings">
<field name="EnableCustomerAttributeSync"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_EnableFeatures" caption="Individual Sync Status">
<qp-grid id="EnableFeatures_grid" view.bind="EnableFeatures"></qp-grid>
</qp-fieldset>
</div>
</qp-template>
</qp-tab>
<qp-tab id="tabLogging" caption="Logging">
<div class="v-stack">
<qp-fieldset id="MagentoSetup_LoggingLevel" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="Set Logging Level">
<field name="LogInfoLevel"></field>
<field name="LogErrorLevel"></field>
</qp-fieldset>
<qp-fieldset id="MagentoSetup_ClearLog" wg-container="MagentoSetup_tab" view.bind="MagentoSetup" caption="Set Clear Log Preferences">
<field name="ActivateClearLogProcess"></field>
<field name="DailyFrequency"></field>
<field name="ExecutionTime"></field>
<field name="NoOfDaysToRetainLogs"></field>
<field name="RecordsToDelete"></field>
</qp-fieldset>
</div>
</qp-tab>
</qp-tabbar>
<qp-panel id="ImportSetupParameters" caption="Import XML" auto-repaint="true">
<qp-fieldset id="ImportSetupParameters_form" wg-container="ImportSetupParameters_formImportXML" view.bind="ImportSetupParameters">
<field name="IsPackageDetailsInclude"></field>
</qp-fieldset>
<footer>
<qp-button id="btnOK" caption="OK" dialog-result="OK"></qp-button>
<qp-button id="btnCancel" caption="Cancel" dialog-result="Cancel"></qp-button>
</footer>
</qp-panel>
</template> KNMC1010.ts
import { Messages as SysMessages } from "client-controls/services/messages";
import { createCollection, createSingle, PXScreen, graphInfo, PXActionState, viewInfo, handleEvent, CustomEventType, actionConfig, RowSelectedHandlerArgs, PXViewCollection, PXPageLoadBehavior, ControlParameter } from "client-controls";
import { KNMCMagentoSetup, KNMCEnableSyncFeatures, KNMCMagentoSetup2 } from "./views";
@graphInfo({graphType: "KNMagentoConnector.KNMCMagentoSetupMaint", primaryView: "MagentoSetup", })
export class KNMC1010 extends PXScreen {
importSetup: PXActionState;
MagentoSetup = createSingle(KNMCMagentoSetup);
@viewInfo({containerName: "Magento"})
EnableFeatures = createCollection(KNMCEnableSyncFeatures);
@viewInfo({containerName: "Import XML"})
ImportSetupParameters = createSingle(KNMCMagentoSetup2);
}
views.ts
import { PXView, PXFieldState, gridConfig, treeConfig, fieldConfig, controlConfig, actionConfig, headerDescription, ICurrencyInfo, disabled, PXFieldOptions, linkCommand, columnConfig, GridColumnShowHideMode, GridColumnType, PXActionState, TextAlign, GridPreset, GridFilterBarVisibility, GridFastFilterVisibility, ISelectorControlConfig, ControlParameter } from "client-controls";
import { KNMC1010 } from "./KNMC1010";
// Views
export class KNMCMagentoSetup extends PXView {
MagentoURL : PXFieldState<PXFieldOptions.CommitChanges>;
AuthenticationType : PXFieldState<PXFieldOptions.CommitChanges>;
BearerToken : PXFieldState<PXFieldOptions.CommitChanges>;
ConfirmBearerToken : PXFieldState<PXFieldOptions.CommitChanges>;
AccessToken : PXFieldState<PXFieldOptions.CommitChanges>;
ThresholdCount : PXFieldState<PXFieldOptions.CommitChanges>;
BatchCount : PXFieldState<PXFieldOptions.CommitChanges>;
RetryCount : PXFieldState<PXFieldOptions.CommitChanges>;
CheckProcessTime : PXFieldState<PXFieldOptions.CommitChanges>;
CheckRetrytime : PXFieldState<PXFieldOptions.CommitChanges>;
ProcessSleepTime : PXFieldState<PXFieldOptions.CommitChanges>;
IncludeUOMbasedSalesSupport : PXFieldState;
QtyAvailable : PXFieldState;
QtyAvailableForShipping : PXFieldState;
QtyAvailableOnHand : PXFieldState;
WarehouseMonitored : PXFieldState;
SyncQty : PXFieldState;
IncludeDefaultKitQty : PXFieldState;
IncludePossibleKitQtyComponent : PXFieldState;
NonstockQty : PXFieldState<PXFieldOptions.CommitChanges>;
CustomerClasses : PXFieldState;
IncludeCustomerLocation : PXFieldState;
IncludeCustomerContact : PXFieldState;
OrderTypes : PXFieldState;
IsSyncOrderEnabledCustomer : PXFieldState;
Atleastoneshipmentisconfirmed : PXFieldState;
OrderUnpaidbalancebecomesZero : PXFieldState;
OrderPaymentAuthorizationPresent : PXFieldState;
IncludePaymentDetails : PXFieldState;
IncludeInvoiceDetails : PXFieldState;
@fieldConfig({
controlType: "qp-radio",
controlConfig: {
class: "vertical",
options: [
{
value: "On Shipment Confirmation",
text: "On Shipment Confirmation"
},
{
value: "On Invoice Release",
text: "On Invoice Release"
}
]
}
})
ShipmentSyncTrigger : PXFieldState<PXFieldOptions.CommitChanges>;
DropShipShipVia : PXFieldState<PXFieldOptions.CommitChanges>;
EnableCustomerAttributeSync : PXFieldState;
LogInfoLevel : PXFieldState;
LogErrorLevel : PXFieldState;
ActivateClearLogProcess : PXFieldState<PXFieldOptions.CommitChanges>;
DailyFrequency : PXFieldState<PXFieldOptions.CommitChanges>;
ExecutionTime : PXFieldState;
NoOfDaysToRetainLogs : PXFieldState<PXFieldOptions.CommitChanges>;
RecordsToDelete : PXFieldState;
}
@gridConfig({
syncPosition: true,
allowDelete : false,
allowInsert: false,
showFastFilter: GridFastFilterVisibility.False,
preset: GridPreset.Details
})
export class KNMCEnableSyncFeatures extends PXView {
@columnConfig({width: 180}) SyncName : PXFieldState;
@columnConfig({width: 80}) Active : PXFieldState;
@columnConfig({width: 100}) SchedulerFrequency : PXFieldState<PXFieldOptions.CommitChanges>;
}
export class KNMCMagentoSetup2 extends PXView {
IsPackageDetailsInclude : PXFieldState<PXFieldOptions.CommitChanges>;
}
Kindly review the files and suggest a solution so that the success message is displayed the same as in the Classic UI (Black color). Thanks in advance

