Customizing an existing layout

You can extend existing layouts in the Sterling Field Sales application based on your business requirement. You can override the configuration of an existing layout by using $stateProvider and $urlRouterProvider.

Before you begin

You must set up a local development environment and configure Sterling Field Sales to run it in a browser in the local environment to view your customizations in real time before you deploy them to the production environment. For more information, see Setting up local development environment and Configuring Sterling Field Sales to run in a local development environment.

Procedure

Open the command line and run the following command from the <cpq_temp>/IBMFieldSales_UI directory: gulp serve-dev.

The Sterling Field Sales application is launched in a browser. Any customization changes that you make are reflected in real time in the browser.
Create an extensions directory in the <cpq_temp>/IBMFieldSales_UI/web/app directory.
Create a JavaScript file in the <cpq_temp>/IBMFieldSales_UI/web/app/extensions directory to define the layout configuration.
In the JavaScript file (non-minified), create an AngularJS constant routeConfig to override the existing layout.
```
angular.module('<module_name>').constant('<router config in corresponding router.js file>', {'<state_name>': {
      url: '<url in corresponding router.js>',
      templateUrl: "<path to the customized layout html file>",
      controller: '<controller>'
   }}
);
```
This state configuration overrides the existing state configuration. The HTML template and the controller that is provided in the configuration must be created in the <cpq_temp>/IBMFieldSales_UI/web/app/extensions directory.
After the customizations are complete, you must place all the extensions in the <INSTALL_DIR>/extensions/ifs/ directory.
Run the command gulp build from the <cpq_temp>/IBMFieldSales_UI directory to build the UI artifacts (minified files) and to deploy the changes in a production environment.
The UI artifacts are built in the <cpq_temp>/IBMFieldSales_UI/build directory. Copy the contents of this directory and place it in the <INSTALL_DIR>/repository/eardata/ifs/extn/ifs-ext directory. If the ifs-ext directory does not exist, you must first create it. The file index.html must not be copied.

What to do next

Build and deploy your extensions.