Hi Team
In the Sales Order screen, I have an action button with a refresh Icon and tooltip next to the Cost field in the Classic UI.
How can we Convert this to Modern UI?
Solved
Refresh symbol Pricing Details Action button in Modern UI
Best answer by SaiKrishnaV
To Add a Refresh button behind the your cost field
@actionConfig({ toolTip: "Refresh Pricing Details", imageSet: "main", imageKey: "Refresh" })
YourActioView: PXActionState; <field prepend="#YourFieldSetId field[name='View.YourCostField']">
<qp-button id="btnPricingDetails" state.bind="View.PricingDetails"
config.bind="{ images: { normal: 'svg:main@Refresh' }, displayIconAndText: false }">
</qp-button>
<qp-tooltip target.bind="btnPricingDetails">Refresh Pricing Details</qp-tooltip>
</field>Hope this works!
+2Hi
You can use the standard Checks and Payments (AP302000) screen as an example, where a Refresh icon button is used next to the Payment Amount field.
Example from the AP302000 HTML:
<qp-button id="buttonAdjustDocumentAmount"
wg-name="SetPaymentAmounttoAppliedtoDocumentsAmount"
state.bind="Document.AdjustDocAmt"
class="col-2"
config.bind="{imageSet: 'main', imageKey: 'Refresh'}"
pinned>
</qp-button>The Refresh icon is configured using:
config.bind="{imageSet: 'main', imageKey: 'Refresh'}"The tooltip can be defined directly on the action in C#:
[PXButton(Tooltip = "Refresh Pricing Details")]This works in both Modern UI and Classic UI.
Alternatively, the tooltip can also be defined in the HTML using:
tooltip.bind="LocalizableStrings.myTooltip"Here are also some relevant Acumatica Help articles and a Community discussion:
Using Localizable Strings Defined in TypeScript in HTML Code
To Add a Refresh button behind the your cost field
@actionConfig({ toolTip: "Refresh Pricing Details", imageSet: "main", imageKey: "Refresh" })
YourActioView: PXActionState; <field prepend="#YourFieldSetId field[name='View.YourCostField']">
<qp-button id="btnPricingDetails" state.bind="View.PricingDetails"
config.bind="{ images: { normal: 'svg:main@Refresh' }, displayIconAndText: false }">
</qp-button>
<qp-tooltip target.bind="btnPricingDetails">Refresh Pricing Details</qp-tooltip>
</field>Hope this works!
Login to the community
No account yet? Create an account
Social Login
Login with your Acumatica accountEnter your E-mail address. We'll send you an e-mail with instructions to reset your password.