Modifying application-provided modals
The modal dialogs are used to present critical information or to request user input that is needed to complete specific user actions. User actions include canceling an order, viewing serials, adding or viewing notes for an order or order line, and so on.
A modal dialog is similar to a pop-up screen, which opens a dialog box to display a screen over the main application content. All modal dialogs are displayed in the parent screen. When a modal dialog is open, users cannot return to the parent screen. Also, any user action is ignored until the modal task is completed or the modal dialog closed.
You can customize the application-provided modals as needed for your business.
Before you begin
- The cancel order modal component is displayed when you click the Cancel order related task in the Order summary screen. The cancel order modal component is present in the <store-temp>/packages/features/orders/src/app/features/orders/order-summary-page/modals/cancel-order-modal directory.
- The record shortage modal component is displayed when you want to mark a product quantity as shortage in the Pick page of the move inventory flow. The record shortage modal component is present in the <store-temp>/packages/features/move-inventory/src/app/features/move-inventory/move-inventory-wizard-page/modals/record-shortage directory.
To override any application-provided modal, you must know the modalId
of the
modal. The modalId
is used to uniquely identify the application-provided modal.
Therefore, it is used by the override-modal command that enables you customize the modal.
modalId
is defined as a variable within the application-provided modal
component class as illustrated in the following
example:export class OrderTotalModalComponent implements OnInit {
public static modalId = 'orders.order-total-modal';
...
...
To map the application-provided modal with the custom or override modal, use the <store-temp>/extensions/features/override-modals/src/assets/override-modals/config/isf-modal-config.json configuration file. You can easily determine the application-provided modal that is overridden, and the custom modal component that is used to override.
isf-modal-config.json
file:
Attribute name | Description |
---|---|
applicationProvidedModalId | A unique identifier that is assigned to the application-provided modals for which the naming
convention is,<feature-name>.<parent-page-name>.<modal-name> .
For example, orders.order-summary-page.cancel-order-modal . |
overrideModalId | A unique identifier that is assigned to the overridden or custom modals for which the naming
convention is, custom-<applicationProvidedModalId> . For
example,custom-orders.order-summary-page.cancel-order-modal . |
Procedure
What to do next
- To locally verify the extended application-provided screen, start the application by running the
following command, and navigate to the screen where the modal is
displayed.
yarn start-app
- To verify the changes in the developer toolkit, extract and deploy the customizations. For more information about extracting and deploying customizations, see Extracting customizations.