Unsupported content This version of the documentation is no longer supported. However, the documentation is available for your convenience. You will not be able to leave comments.

Customizing the Cart Checkout page

Users see the Cart Checkout page on the new My Cloud Services console just before submitting their requests for services.

Checkout_Default.png

By default, this page includes two fields: Charge Code (which specifies the cost center to charge for the services) and Decommission Date. You can customize this page to remove these field or show other fields from customized AR System forms or an external system. This topic outlines how to add and remove fields in these sections:

The following video (6:02) describes how you can customize the Cart Checkout page of the My Cloud Services console.

icon-play.png http://youtu.be/6M5JFziXEuU

Note

This topic discusses one way to customize the cart checkout page. An alternate way to customize the page is to remove the page that is included with BMC Cloud Lifecycle Management by default, and add a new custom Checkout panel as described in Adding-custom-panels-or-sections-to-the-Catalog-service-details-page.

Before you begin

Note

Modifying the Cart Checkout page requires that you be proficient with JavaScript code and HTML markup.

 

NoteBack up your VM or your file system before you start. If you make a mistake, you can revert to a saved snapshot and try again.
  1. Verify that your configuration specifies the default location property of the custom directory. 
    For example: com.bmc.cloud.ui.custom.resource.dir=installDirectory/custom
    If the property is missing and not properly configured, you will not see your changes. Add this property with your custom directory as the value if it is missing. Depending on how you installed the My Cloud Services console (clmui), verify that the custom directory is set: 
    • If you installed the My Cloud Services console (clmui) on its own host, open the Config.properties file (by default /opt/bmc/CloudPortalWebApplication/tomcat/webapps/clmui/WEB-INF/classes or C:\Program Files\BMC Software\CloudPortalWebApplication\tomcat\webapps\clmui\WEB-INF\classes).
      You should see the following property and value:
      com.bmc.cloud.ui.custom.resource.dir=installDirectory      \\Cloud_UI\\custom
      For example:
      com.bmc.cloud.ui.custom.resource.dir=/opt/bmc/CloudPortalWebApplication/Cloud_UI/custom (Linux)
      com.bmc.cloud.ui.custom.resource.dir=C:\\Program Files\\BMC Software\\CloudPortalWebApplication\\Cloud_UI\\custom (Windows)
    • If you did not install the My Cloud Services console (clmui) on its own host but on the Platform Manager host, open the cloudservices.json file (by default C:\Program Files\BMC Software\BMCCloudLifeCycleManagement\Platform_Manager\configuration\cloudservices.json). 
      In the CustomDir section, you should see the attributeValue property whose value is the custom directory:
      {
           "cloudClass" : "com.bmc.cloud.model.beans.AccessAttribute",
           "datatype" : "String",
           "description" : "Directory that contains customization web content",
           "guid" : "780a47aa-d6a9-4894-9aa5-a5fa2ce26cb1",
           "hasValueObject" :
             [
               {
                   "cloudClass" : "com.bmc.cloud.model.beans.AccessAttributeValue",
                   "attributeValue" : "C:\\Program Files\\BMC Software\\BMCCloudLifeCycleManagement\\Cloud_UI\\custom",
                   "guid" : "8b03984d-7750-4ba2-a8f7-8f7ef48fb43d",
                   "name" : "CustomDir"
               }
             ],
            "isOptional" : true,
            "isPassword" : false,
            "modifiableWithoutRestart" : false,
            "name" : "CustomDir"
      }
      NoteIf the attributeValue property is missing or has no value, update it to specify your custom directory (by default, C:\\Program Files\\BMC Software\\BMCCloudLifeCycleManagement\\Cloud_UI\\custom).
      TipDo not confuse the custom directory here with the custom directory in installationDirectory\tomcat\webapps\clmui.
  2. Copy the contents of the installDirectory\Cloud_UI\custom_sample directory to the installDirectory\Cloud_UI\custom directory on the My Cloud Services Console host.
  3. When you add resource or angular files for your locale, make sure that the encoding in your editor is set to Unicode (UTF-8). Otherwise, your text might be corrupted. 

To remove the Charge Code and Decommission Date fields

  1. In the CLMInstallationFolder/Cloud_UI/custom/cart/views/customFieldsTemplate.html file, comment out or remove the sections related to Charge Code and Decommission Date fields (as needed).
    For example, if you comment out the text as shown below, you will hide the Charge Code field:

    <!--
            <div class="cart_cost-center">
                <label class="cart_cost-label" ng-bind="'customfields.label.chargecode' | i18n"></label>
                <div class="input-group btn-group">
                    <input type="text" class="form-control" ng-model="customFieldsNameValueMap.costCenter">
                    <div class="input-group-btn">
                        <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown"><span class="caret"></span></button>
                        <ul id="customfields_costcenter-menu" class="dropdown-menu dropdown-menu-right" role="menu">
                            <li ng-repeat="item in costCenterItems" class="input-lg"><a href="" ng-bind="item.code ? item.code + ' - ' + item.name : item.code" ng-click="setCostCenterSelectedItem(item.code)"></a></li>
                        </ul>
                    </div>
                </div>
            </div>
    -->

    Tip

    Do not confuse the CLMInstallationFolder/Cloud_UI/custom directory here with the custom directory in installationDirectory\tomcat\webapps\clmui.

  2. If you want to hide the Decommission Date field, complete the following steps in addition to step 1:
    1. Open the CLMInstallationFolder/Cloud_UI/custom/cart/scripts/customFieldsController.js file.

    2. Modify the $scope.doValidation() method by commenting out or removing the decommissionDate related code.
      The modified code should look something like this:

                      $scope.doValidation = function() {
                         // Do the field validation here
                         var checkFlag = true;
      /*                    
                          var decommissionDateValue;
                          if (angular.element($("#decommissionDateField"))[0].value != "") {
                              // enable manually typed in date for FF and IE
                              decommissionDateValue = Date.parse(angular.element($("#decommissionDateField"))[0].value);
                              if (decommissionDateValue == null) {
                                  $scope.showDecommissionDateErrorMsg = true;
                                  checkFlag = false;
                              } else {
                                  var d = new Date();
                                  if ((new Date(d.getFullYear(), d.getMonth(), d.getDate())).getTime() > decommissionDateValue.getTime()) {
                                      $scope.showDecommissionDateErrorMsg = true;
                                      checkFlag = false;
                                  }
                              }
                              if (checkFlag) {
                                  $scope.showDecommissionDateErrorMsg = false;
                              }
                          } else {
                              $scope.showDecommissionDateErrorMsg = false;
                          }
                          $scope.customFieldsNameValueMap["decommissionDate"] = angular.element($("#decommissionDateField"))[0].value;
      */                          
                         customFieldsService.isValidated.flag = checkFlag;
                         return checkFlag;
                      };
  3. To see that the fields were removed, flush the cache in your browser and add a request to the cart.

To add fields to the Cart Checkout page (beginner)

The following example shows how to add two text fields, Confidentiality and Visibility, on the Cart Checkout page. Even though text fields are used in this example, you could use drop-down fields with values populated (hard-coded in the HTML/javascript) so that the user can select a value rather than typing it in.

  1. Stop the Platform Manager. 
  2. If the CLMInstallationFolder\Cloud_UI\custom folder is empty, copy the contents of the custom_sample folder to the custom folder.
    These directories are in one of two places:
    • CLMInstallationFolder/BMCSoftware/BMCCloudLifecycleManagement/Cloud_UI (if you installed the Cloud Portal Web Application as part of your BMC Cloud Lifecycle Management installation)
    • CLMInstallationFolder/BMCSoftware/CloudPortalWebApplication/Cloud_UI (if you installed the Cloud Portal Web Application separately from your BMC Cloud Lifecycle Management installation)
  3. Add the new fields to the Cart Checkout user interface:
    1. Open the custom/cart/views/customFieldsTemplate.html file for editing.

    2. Add the following code snippet:
      Place the <div> snippet to the same level as Cost Center and Decommission Date. 

      <div>
         <label for="confidentiality_id" ng-bind="'customfields.label.confidentiality' | i18n"></label>
         <input type="text" id="confidentiality_id" name="confidentiality" ng-model="customFieldsNameValueMap.confidentiality">
         <label for="visibility_id" ng-bind="'customfields.label.visibility' | i18n"></label>
         <input type="text" id="visibility_id" name="visibility" ng-model="customFieldsNameValueMap.visibility">
      </div>
    3. Save and close the customFieldsTemplate.html file.
  4. (Optional) In a text editor, open the CLMInstallationFolder/Cloud_UI/custom/cart/scripts/customFieldsController.js file for editing. This file is used for validation and other logic related to the new field.

    1. Locate the validation section of the file:

      ////////////////////////////////////////////////////////////////////////////////////////////////////////
      //          Modify the following part for customization
      ////////////////////////////////////////////////////////////////////////////////////////////////////////
      /**
       * Validate all the custom fields
       * @returns {boolean} true if valid, false otherwise
       */
      $scope.doValidation = function() {

      // Do the field validation here

      return true;

      };

    2. Modify the doValidation method to validate each custom field. For example, to make the Application ID field required enter the following code:

      if ($scope.customFieldsNameValueMap.confidentiality == "")
      return false;
      else
      return true;
    3. Save and close the customFieldsController.js file.
  5. Prepare the localization files for the new fields:
    1. In a text editor, open the CLMInstallationFolder/Cloud_UI/custom/i18n/resources-locale_en.js file for editing.
    2. Add code that maps the field's key to a label value that is displayed in the Cart.

    3. Add localized strings for the labels:

      {
         "key" : "customfields.label.confidentiality",
         "value" : "Confidentiality"
      },
      {
         "key": "customfields.label.visibility",
         "value": "Visibility"
      }
    4. Save and close the resources-locale_en.js file.
  6. Add the metadata for these two fields in the BMC_CLM_Install_folder/Platform_Manager/configuration/customField/metadata.json file.
    1. On the machine where Platform Manager is installed, open the BMC_CLM_Install_folder/Platform_Manager/configuration/customField/metadata.json file for editing.

    2. Add lines for your new fields. For example:

      {
         "fieldName": "confidentiality",
         "localizationKey": "customfields.label.confidentiality",
         "dataType": "string"
      },
      {
         "fieldName": "visibility",
         "localizationKey": "customfields.label.visibility",
         "dataType": "string"
      }
    3. Save and close the metadata.json file.
  1. Restart the Platform Manager. 

  1. Flush the cache in your browser and add a request to the Cart. 
    When you open the Cart Checkout page,  you can now see these two new fields - Confidentiality and Visibility – are present. The values entered in these fields will be saved at the backend after you submit the cart. Those values will then be displayed in the service and server details screens after provisioning.

    Note

    If the custom fields do not work as expected, verify that the default custom folder value in the configuration uses the correct folder separator (\\) as mentioned in the "Before you begin" section of  Localizing-the-My-Cloud-Services-console-for-version-4-6.

To add fields to the Cart Checkout page that retrieve data from external systems (advanced)

If you want to customize the new My Cloud Services console and retrieve data from an external system, you must use a web service or RESTful APIs.

Note

This procedure is an advanced example of adding an Application ID field to the Cart Checkout page and retrieving data from an external system. In this particular example, the new field calls a BMC Remedy AR System web service to populate data from a previously-created BMC Remedy AR System form. Instructions for creating the form and web service follow this procedure. However, you could use other web services or RESTful API calls to access data from your own systems.

If you do not want to retrieve data from the AR System server, you could hardcode the possible values directly in HTML. You could then skip the web-service related steps.

  1. If the CLMInstallationFolder/Cloud_UI/custom folder is empty, copy the contents of the custom_sample folder to the custom folder.
    These directories are in one of two places:
    • CLMInstallationFolder/BMCSoftware/BMCCloudLifecycleManagement/Cloud_UI (if you installed the Cloud Portal Web Application as part of your BMC Cloud Lifecycle Management installation)

    • CLMInstallationFolder/BMCSoftware/CloudPortalWebApplication/Cloud_UI (if you installed the Cloud Portal Web Application separately from your BMC Cloud Lifecycle Management installation)

      Note

      For example, to add an Application ID drop-down field to the Cart Checkout page, uncomment the webService related code in the following files:

      • custom\customResourcesToInclude.txt
      • custom\cart\scripts\customFieldsController.js
      • custom\cart\scripts\customFieldsService.js
      • custom\views\customFieldsTemplate.html
  2. Add the new field to the Cart Checkout user interface:
    1. Open the custom/cart/views/customFieldsTemplate.html file for editing.
    2. Add a field in the file as you want it to appear in the custom fields section of the Cart Checkout page.
    3. Save and close the customFieldsTemplate.html file.
  3. Provide metadata for the new field. This is used primarily to obtain the localization key , and to know whether the field should be indexed.
    1. On the machine where Platform Manager is installed, open the BMC_CLM_Install_folder/Platform_Manager/configuration/customField/metadata.json file for editing.

    2. Add lines for your new field. For example:

      {
      "fieldName": "appid",
      "localizationKey": "customfields.label.appid",
      "dataType": "String"
      }
    3. Save and close the metadata.json file.
    4. Restart the Platform Manager.
  4. In a text editor, open the CLMInstallationFolder/Cloud_UI/custom/cart/scripts/customFieldsController.js file for editing. This file is used for validation and other logic related to the new field.

    1. Locate the validation section of the file:

      ////////////////////////////////////////////////////////////////////////////////////////////////////////
      //          Modify the following part for customization
      ////////////////////////////////////////////////////////////////////////////////////////////////////////
      /**
       * Validate all the custom fields
       * @returns {boolean} true if valid, false otherwise
       */
      $scope.doValidation = function() {

      // Do the field validation here

      return true;

      };

    2. Modify the doValidation method to validate each custom field. For example, to make the Application ID field required enter the following code:

      if ($scope.customFieldsNameValueMap.appId == "")
      return false;
      else
      return true;
    3. Save and close the customFieldsController.js file.

  5. Prepare the localization files for the new field as follows:

    1. In a text editor, open the CLMInstallationFolder/Cloud_UI/custom/i18n/resources-locale_en.js file for editing.

    2. Add code that maps the field's key to a label value that is displayed in the Cart. For example, the mapping for the Application ID field is already present in the file and merely needs to be uncommented:

      {
      "key": "customfields.label.appid",
      "value": "Application ID"
      }

      Note

      The localized strings for Application ID are already present in the custom\i18n folder.

    3. Save and close the resources-locale_en.js file.
    4. If needed, repeat this series of steps for other language files in the i18n folder.

    Note

    To reference the localized field in HTML files, use the following format:

    ng-bind="'customfields.label.fieldName' | i18n"

    To reference the localized field in JavaScript files, use the following format:

    var errorMsg = $filter('i18n')('customfields.msg.error.fieldName.failed');

  6. If you have defined additional JavaScript or CSS files to be used in conjunction with your new field, specify those files in the customResourcesToInclude.txt file:

    1. In a text editor, open the CLMInstallationFolder/Cloud_UI/custom/customResourcesToInclude.txt file for editing.

      Tip

      Edit the customResourcesToInclude.txt file carefully. If it contains any errors, the browser window might be blank (with no error message) when a user tries to open the BMC My Cloud Services console.

    2. Add a new line for the file to be used by your new field. For example, uncomment the following line to reference a JavaScript file to be used by the new appid field:

      <script type="text/javascript" src="custom/cart/scripts/arWebserviceClient.js"></script>

      Note

      Ensure that the src path begins with custom.

    3. Save and close the customResourcesToInclude.txt file.
  7. If you want to add new functionality related to the new field (such as a webservice call), update the custom\cart\scripts\customFieldsService.js file.
  8. Restart the Platform Manager.
    The new field appears on the Cart Checkout page.
    Checkout_Modified.png

To complete the Application ID example with a back-end AR form and AR web service

The preceding procedure included an example that added an Application ID field to the Cart Checkout page. This drop-down field contains no information unless it has a source from which to retrieve that information. In this section, the example is expanded to create a BMC Remedy AR System form to contain the data, and an BMC Remedy AR System web service to call the data on behalf of the new custom field.

  1. Create a new BMC Remedy AR System form, as described in Creating-forms.
    • Name the form SAMPLE:ApplicationId.
    • Set the permission of the form to Public.
    • In the form, add a character field named Application ID.
    • Set the permission of the field to Public.
  2. Open the form, and create entries with the following Application ID field values:
    • Collaboration Team
    • Data Services
    • Enterprise Development
    • Mobile Applications
  3. Create a basic BMC Remedy AR System web service, as described in Creating-a-basic-web-service.
    Name the web service SAMPLE_ApplicationId_Service.
    The WSDL of the web service will be structured as http://midtierServer/arsys/WSDL/public/serverName/SAMPLE_ApplicationId_Service.

  4. Enable cross-domain requests for the Mid Tier.

    Note

    By default, BMC Remedy AR System web services do not allow cross-domain requests. Since the BMC Cloud Lifecycle Management console is running on a different port than the BMC Remedy AR Mid Tier, web service requests initiated from the BMC Cloud Lifecycle Management console are considered to be coming from a different origin, and therefore will not work unless CORS is configured for the Mid Tier. (CORS is a mechanism to allow cross-domain requests.)

     

    • For Tomcat version 7.0.41 and later, add the following lines to the ARSystemFolder\midtier\WEB-INF\web.xml file, and then restart the Mid Tier:

      <filter>
      <filter-name>CorsFilter</filter-name>
      <filter-class>org.apache.catalina.filters.CorsFilter</filter-class>
      </filter>
      <filter-mapping>
      <filter-name>CorsFilter</filter-name>
      <url-pattern>/*</url-pattern>
      </filter-mapping>
    • For Tomcat versions earlier than 7.0.41, CORS is not supported, and you must use a different mechanism:
      1. Download and enable CORS.
        For example, see http://software.dzhuvinov.com/cors-filter.html.
      2. Extract the cors-filter-version.jar and java-property-utils-version.jar files to the ARSystemFolder\midtier\WEB-INF\lib folder.

      3. Add the following lines to the ARSystemFolder/midtier/WEB-INF/web.xml file, and then restart the Mid Tier:

        <filter>
        <filter-name>CORS</filter-name>        
        <filter-class>com.thetransactioncompany.cors.CORSFilter</filter-class>    
        </filter>    
        <filter-mapping>        
        <filter-name>CORS</filter-name>        
        <url-pattern>/*</url-pattern>    
        </filter-mapping>

Related topics

Adding-custom-panels-or-sections-to-the-Catalog-service-details-page

Localizing-the-My-Cloud-Services-console-for-version-4-6

 

Tip: For faster searching, add an asterisk to the end of your partial query. Example: cert*