Customizing quote management application modals

The native quote management application layouts and widgets are made up of various modal pop-ups, such as attachments, notes, abandon quote, copy quote, and so on. You can either create new modals or customize existing modals based on your business requirements.

The following table lists the modals that are provided as part of the quote management application:
Modal Pop-up Modal Name Description Template URL
Proposal proposal Enables you to generate a proposal for the quote app/Actions/Proposal/proposal.html
Notes notes Enables you to view or add notes to the quote app/Actions/Notes/notes.html
Attachments attachment Enables you to upload attachments to the quote app/Actions/Attachment/attachment.html
Terms terms Enables you to specify the payment and shipment terms for the quote app/Actions/Terms/terms.html
Next Action Note nextActionNote Enables you to add notes before sending the quote to a customer app/Actions/NextActions/action-note.html
View Approvals approvals Enables you to view approval details for the quote app/Actions/Approvals/approvals.html
Validation Error Details validate Enables you to view error messages that are generated when the quote fails validation app/Actions/Validate/validate.html
Abandon Quote abandon Enables you to abandon the quote app/Actions/Abandon/abandon.html
Copy Quote copyQuote Enables you to copy a quote and create a new quote for an existing customer app/Counteraction/copy.html
Payment Details payment Enables you to add or modify the payment details before converting the quote to an order app/Actions/Payment/payment.html
Approval Violations violations Enables you to view the violations on the quote app/Actions/Approvals/ViolationDetails/violations.html
Manual Price Adjustment adjustment Enables you to adjust the pricing details for the quote app/Product/Common/adjustmentModal.html
Price Summary break-up quotePricingDetails Enables you to view the price break-up details of the quote app/Product/PriceSummary/quotePricingDetails.html
Related Products relatedProducts Enables you to view the related products app/Product/RelatedProducts/related Products.html
Configurator configurator Enables you to configure a configurable product that is added to the quote app/Product/Configurator/configurator.html
View Components viewComponent Enables you to view the bundle components of a bundle product that is added to the quote app/Product/ProductComponent/view Component.html
Upfront charges upfrontCharges Displays the upfront charges that are immediately billed on order. For example, activation charges app/Product/UpfrontCharges/upfront Charges.html
Non-upfront charges nonUpfrontCharges Displays the non-upfront charges that are mainly for information purpose. For example, cancellation fee app/Product/NonUpfrontCharges/nonUpfrontCharges.hmtl
Overall Price overAllPrice Displays the overall price details of a quote line when the application is accessed using a mobile device app/Product/OverAllPrice/overAllPrice.html
New Quote newQuote Enables you to create a new quote app/Quote/NewQuoteModal/new Quote.html
Product Search productSearch Enables you to search for a particular product and add it to the quote app/Product/SearchProduct/productSearchModal.html
These modals are modeled as AngularJS modal pop-ups. You can customize the modals that are provided out-of-the-box or create new modals. Each modal is defined using the following parameters:
  • Template URL
  • Controller
  • Size
You can use the AngularJS provider, fieldSalesConfig to configure the modal pop-ups. The provider offers the following configuration methods:
  • Configuration method for multiple modals
    The setModalConfigurations (aModalConfig) method can be used to configure multiple modals in the following manner:
    * Sample aModalConfig configuration
           {
                <modal_name_1>: {
                        templateUrl: '',
                        controller: '',
                        size: ''
                        }
                 },
                 <modal_name_2>: {
                        templateUrl: '',
                        controller: '',
                        size: ''
                        }
                 },
            }
  • Configuration method for a specific modal using the modal name
    The setModalConfigurationByModalName (aModalName, aModalConfig) method can be used to configure a specific modal in the following manner:
    * Sample aModalConfig configuration
           {
                templateUrl: '',
                controller: '',
                size: ''
            }
The following customizations are supported by the quote management application:
  • Customizing existing modals
  • Creating new modals