Enabling and using the customization toolkit

NEW IN 4.6.06

This toolkit helps to generate the initial form of files for custom panel. You must be a cloud administrator to use the customization toolkit.

This topic includes:

Enabling the customization toolkit

By default, the customization toolkit is disabled. To enable the toolkit, you must modify the configuration file. There are two methods for modifying the configuration file, depending on the infrastructure platform you require and the complexity of your cloud: 

• If the My Cloud Services console UI is installed as a standalone (Apache Tomcat based), use the config.properties file.

1. 1. 1. 1. Open the config.properties file.
            • (Windows) <CLMUIInstallDirectory>\tomcat\webapps\clmui\WEB-INF\classes\config.properties
            • (Linux) <CLMUIInstallDirectory>/tomcat/webapps/clmui/WEB-INF/classes/config.properties
         2. In config.properties, search for  com.bmc.cloud.ui.isCustomToolKitEnabled property.
         3. Set the value of the com.bmc.cloud.ui.isCustomToolKitEnabled property to True. By default, the value of the property is False.
         4. Save the config.properties file.
         5. Restart BMC Cloud Portal service.
         6. Log on to the My Cloud Services console (EUP) as Cloud Administrator. A new Configurations tab is added that enables you to create custom panels.

• If the My Cloud Services console UI is installed as part of the Platform Manager (Jetty based), use the cloudservices.json file.

1. 1. 1. 1. Open the  cloudservices.json file.

            • (Windows)<PMInstallDirectory>\Platform_Manager\configuration\cloudservices.json
            • (Linux)  <PMInstallDirectory>/Platform_Manager/configuration/cloudservices.json

         2. In the cloudservices.json , search for   "name" : "isCustomToolKitEnabled" attribute.

         3. Set the value of the isCustomToolKitEnabled attribute to True. By default, the value of the attribute is False.

         4. Save the cloudservices.json file. You need not restart Platform Manager. 
         5. Log on to the My Cloud Services console (EUP)  as Cloud Administrator. A new Configurations tab is added that enables you to create custom panels.

Using the customization toolkit

With the help of the customization toolkit, the cloud administrator can create custom panels for the following actions:

• Catalog (Day 1 - DRO)
• Server details (Day 2)
• Advanced configuration actions (Day 2 - TRO)
  

The toolkit creates HTML and JavaScript files automatically based on the inputs provided from UI. The toolkit also updates the customPanelsConfig.json and customResourcesToInclude.txt files that decides for which user or requestable offering, the custom panel panel should appear. It also updates the custom field and its type in <PMInstallDirectory>/Platform_Manager/configuration/customField/metadata.json file.

Creating custom panel

You can create the custom panel by performing the following steps:

1. Log on to the My Cloud Services console as Cloud Administrator.

2. Go to Configurations tab > Custom  Panel.

3. Click Create to open the HTML File Details page.
   

4. Enter the value of the required fields.
   The following table lists the fields that you can specify for a HTML file:

   Field	Instruction
   File Name	(Required) Enter a valid name for the HTML file.
   Description	(Optional) Enter the purpose of the HTML file.
   Panel Name	(Required) Name for the panel. The name should be unique among the custom panels. This is the directory name in <Custom-resource-directory>/custom/ where the HTML and JavaScript files are stored.
   Label	(Required) Enter the name of Label.
   ID	(Required) Enter an unique ID for field.
   Data Type	(Required) Specify the data type for the field. In BMC Cloud Lifecycle Management 4.6.06, String datatype is supported.
   UI Type	(Required) Select UI type for the field. The following options are supported: text field drop-down radio button check box
   Tooltip	(Optional) Enter a clear description so that they can click on the tooltip icon next to the field to learn what the field (parameter) requires.
   Selection Group	(Optional) Provide common group name for radio buttons and check boxes . This is applicable only for radio button and check box
   Data Source Name	(Optional) Select the datasource for the parameter from the list of available data sources. This is applicable only for drop -down and text box. Data sources must already be created. For more information, see Adding dynamic lists to fields and Using JavaScript to customize the My Cloud Services console.

5. Click Next to open the JS File Details page.
   

6. Enter the value of the required fields. The following table lists the fields that you can specify for a JavaScript file: 

   Field	Instruction
   JS File Name	(Required) Enter a valid name for the JavaScript file.
   Organization Name	(Required) Enter the organization name.
   Title	(Required) Provide custom panel name that appears in UI.
   Header	(Required) Provide the name of the header.
   Offering Name	Select RO for which panel should appear. Select None, if you want the custom panel for all the service offering instances of all requestable offerings.
   Description	Provide a description for the JavaScript file.
   Role Name	Select role for which panel should appear. Select None, if you want that the custom panel is available for all users of all roles.
   Tenant Name	Select Tenant for which the custom panel should appear from the list of all tenants.

7. Click Create. You must refresh the browser so that the changes are reflected.
   

Creating custom panel for highly available deployment

Perform the following steps for creating the custom panel when Cloud Portal Web Application (clmui) is deployed on multiple nodes:

1. Access clmui primary node URL.
2. Create custom panels by using customization toolkit. For more information, see Creating custom panels.
3. Make sure that you make all required changes regarding validations and additional logic in the newly created HTML and JavaScript files.
4. Copy CustomDir content to all other notes of clmui*. This assumes that all the existing day 1 customizations contents and configuration files are identical in all the nodes.
5. Access all the clmui nodes individually and verify that the new custom panel is displayed as expected. 
6. Access clmui using load balancer URL.

Deleting custom panel

You can delete the custom panel, that you created by using the customization toolkit, by performing the following steps:

1. Log on to the My Cloud Services console. 
2. Go to Configurations tab > Custom Panel.
3. Click Delete.
4. Select a custom panel that you want to delete.
5. Click the X icon for the custom panel that you want to remove.
   
   
6. In the confirmation dialog box, click OK.

Using custom panels for transaction requestable offerings (TROs)

If we create two custom panels to be displayed in different pages of TRO (transaction requestable offerings), you must mention that in the  transaction_requestable_offerings flag located in the <CLMInstallationFolder>\Cloud_UI\custom\customPanelsConfig.json file.

location_data" : {
    "transaction_requestable_offerings" : [],

     "offerings" : [ ]

  },

"location_data" : {
    "transaction_requestable_offerings" : [ “AdvanceTRO1”],

    "offerings" : [ ]
  },

Limitations

The limitations of the customization toolkit are as follows:

1. • You cannot create inter-dependent drop-down list.
   • You cannot add parameter to fetchAllowableValues function.
   • If you create a custom panel with radio button and check box, the group name is not displayed as Label on the UI.
   • You cannot create mandatory custom fields.
   • When you attach a data source to radio button or check-box, the custom panel is not created succesfully.
   • If you create a custom field of password type, then you must handle the password encryption by using JavaScript. The following code snippet provides a sample code to handle password encryption.

// Define the string
var password = 'Hello World!';

// Encode the String
var encodedString = btoa(password);
console.log(encodedString); // Outputs: "SGVsbG8gV29ybGQh"

// Decode the String
var decodedString = atob(encodedString);
console.log(decodedString); // Outputs: "Hello World!"


The btoa() method creates a base-64 encoded ASCII string from a String object in which each character in the string is treated as a byte of binary data.