Customizing an existing modal pop-ups

You can extend existing modal pop-ups of the native quote management application as per your business requirement. You can override the modal properties of an existing modal by configuring the AngularJS provider.

Before you begin

  • You must have enabled customization while setting up CPQ parameters.
  • To view your customization changes in real-time in a browser before deploying the changes in a production environment, you must have set up a local development environment and configured Sterling™ Field Sales to run in the local development environment. For more information about setting up a local development environment, refer to Setting up local development environment.

Procedure

  1. Open the command prompt and run the following command from the FieldSales_UI directory: gulp serve-dev.

    This command will launch Sterling Field Sales in a stand-alone mode in a browser. Any customization changes that you make will be reflected in real-time in the browser.

    Note: If you create or modify any directory within the extensions directory while the gulp serve-dev command is running, kill the command and run gulp serve-dev again from the FieldSales_UI directory.
  2. Create an extensions\fieldSales directory in the CPQ_UI\FieldSales_UI\web\app directory.
  3. Create a JavaScript file in the extensions\fieldSales directory to configure the modal.
  4. In the JavaScript file, configure an existing modal using the AngularJS provider, fieldSalesConfig in the config() method of the module: 
    angular.module("ibmFieldSalesApp").config(['fieldSalesConfigProvider', function (fieldSalesConfigProvider) {        
                 fieldSalesConfigProvider.setModalConfigurationByDirectiveName ("attachment", {
                           templateUrl: 'app/extensions/fieldSales/Actions/Attachment/newAttachment.html',
                           controller: 'attachmentCtrl'
                 });
         }]);

    The configuration provided for the modal pop-up, newAttachment will override the configuration of the existing modal pop-up, attachment. The HTML template and the controller provided in the configuration should be created in the extensions directory.

  5. Once you are ready with your customization changes and you want to deploy the changes in a production environment, build the production ready UI artifacts by running the following command from the FieldSales_UI directory: gulp build.
  6. Create a cpqui_ext.zip file by archiving the contents of the build directory.
    Note: Exclude the index.html file and then create the cpqui_ext.zip file.
  7. Upload the production ready UI artifacts, cpqui_ext.zip as a static resource in Salesforce.com by performing the following steps:
    1. Log in to your Salesforce.com account.
    2. Navigate to the Static Resources page, and then click New button.

      If a static resource by the name cpqui_ext already exists, click Edit to update the existing file instead of creating a new resource.

      The Static Resources page is displayed.
    3. Enter the name of the static resource: cpqui_ext.
    4. Click Browse to select the cpqui_ext.zip file that you created in the previous steps.
    5. Click Save.