Configuring Configurator UI widget integration with external applications

You can seamlessly integrate Configurator UI into an external channel application UI and can make this widget interact with other external components or widgets in the UI. You can also integrate the Configurator UI into your application UI page (which could be an internal application like WCS or a 3rd party page that they own) and make this Configurator UI interact with other external components or widgets (such as marketing or e-spot) on that page.

Before you begin

It is assumed that you have adequate understanding of web technologies such as HTML, CSS, JavaScript, and AngularJS.
You must ensure that the Omni-Configurator backend is up and running and you must be aware of the IP address and port number of the machine where the Configurator backend is running.
Ensure that at least one model is created and you must be aware of the model details, such as modelPath, organizationCode, modellanguage, modelcountry, and currency.

About this task

Omni-Configurator is designed as an AngularJS based widget and uses bootstrap style framework. Bower is used to manage the third-party dependencies for Omni-Configurator. For more information about the list of defined dependencies, refer to the bower.json file present in the Configurator_UI directory.

Procedure

From the supplied Sterling Configurator Visual Modeler (with omni-configurator) DVD or DVD image, extract the Configurator UI add-on artifacts from the Configurator_UI.zip file, present inside the omni-configurator folder.
Perform any customizations that you require and run the gulp build command from the Configurator_UI directory to build the production ready Configurator UI artifacts.
A build folder is created within the Configurator_UI directory that contains the relevant JavaScript and CSS files, such as config, fonts, images, js, styles, translation_data, and index.html.

For more information about customizing Omni-Configurator, refer to the Developing customizations for Omni-Configurator documentation.
Copy the build folder into your application container.

Include the following production ready Configurator UI files (CSS and JavaScript files) into your application UI page:

/styles/lib.css
/styles/app.css
/js/lib.js
/js/app.js

For example, you can include these files into the application page as following:

<link rel="stylesheet" type="text/css" href="<Path_to_build_folder>/styles/lib.css"/>
<link rel="stylesheet" type="text/css" href="<Path_to_build_folder>/styles/app.css"/>
<script type="text/javascript" src="<Path_to_build_folder>/js/lib.js"></script>
<script type="text/javascript" src="<Path_to_build_folder>/js/app.js"/></script>

Include the following sample code in your application UI page. This enables you to pass the inputs required by the Configurator_UI widget.

<script type="text/javascript">
        var configModelData = {                                            
                'modelPath': '',                                            
                'organizationCode': '',                                            
                'modellanguage': '',                                            
                'modelcountry': '',
		'customerID': '',
		'ignoreCustomerEntitlements':,
                'currency': ''                           
                }; 
        var configuratorServer = "http://<IP address>:<port>/configurator";
	var standAloneMode = false;
</script>

The following code snippet provides an example:

<script type="text/javascript">
        var configModelData = {                                            
                'modelPath': 'Matrix/Badminton/BadmintonKit',                                            
                'organizationCode': 'Matrix',                                            
                'modellanguage': 'en',                                            
                'modelcountry': 'US',
		'customerID': "1234567",
		'ignoreCustomerEntitlements': false
                'currency': 'USD'                           
                }; 
        var configuratorServer = "http://<IP address>:<port>/configurator";
	var standAloneMode = false;
</script>

The values provided in the above code snippet are examples. Based on your model, enter the appropriate values for modelPath, organizationCode, modellanguage, modelCountry, and currency. The IP address and port number are of the server where the Configurator server is running.

Include the Configurator UI widget in the application UI page as following:

<div ng-app="ibmConfiguratorApp">
           <div class="shell ibm-omni-configurator" ng-controller="ShellController as vm" id="divId">
             <section class="well">
               <ibm-configurator resize="vm.resize()" model="vm.data"/>
             </section>
           </div>
</div>

You can include the above code snippet in multiple pages from where you want to launch Omni-Configurator.

(Optional) Include the progress bar for the Configurator UI widget as following.

      <div id="loadingMask" ng-show="showLoadingMask">
        <div class="page-splash">
          <div class="page-splash-message">
            <img id="loadingImg" src="{!$Resource.configloading}" /
          </div>
        </div>
</div>

Note: If you do not want to use the out-of-the-box provided progress bar implementation, you can use your own custom progress bar implementation.

Invoke the following method to generate the bill of material (BOM) based on the user selections in the Configurator_UI widget: generateBOM(callback function).
This method generates the BOM XML based on the configurations made by the user. The callback function is called when the BOM is generated. The function has one string argument, the generated BOM XML.
The following code snippet provides an example to generate the BOM XML:
```
generateBOM(function (bomXML) {
                  console.log(bomXML);
                  // Logic to process the BOM XML
});
```