Adding custom panels or sections to the server details page and advanced configurations options page

NEW IN 4.6.06

How you configure options can determine how they are appear in the server details page or advanced configurations options page of the My Cloud Services console. The customized panel or section can contain custom fields or other content. For example, you might want a panel that focuses on a business justification. The panel might include fields like Proposed Use and Backup Plan.

This topic includes:

The overall process

The process for adding custom panels or sections is as follows:

Step 1: 

You define the use case to be implemented using the custom panel.

Step 2:

Design the custom panel. For example, what are the input fields on the custom panel.

Step 3:

Create appropriate data sources. For more information, refer to Adding dynamic lists to fields.

Step 4: 

Design the AO workflow those are executed as part of pre-call out or post-call out day 2 operation.

Step 5:

You can find the location of the custom folder in one of the following files:

• config.properties (if the My Cloud Services console UI is installed as a standalone)
  • (Windows) <CLMUIInstallDirectory>\tomcat\webapps\clmui\WEB-INF\classes\config.properties
  • (Linux) <CLMUIInstallDirectory>/tomcat/webapps/clmui/WEB-INF/classes/config.properties
    
    
• cloudservices.json (if the My Cloud Services console UI is installed as part of the Platform Manager)
  • (Windows)<PMInstallDirectory>\Platform_Manager\configuration\cloudservices.json
  • (Linux)  <PMInstallDirectory>/Platform_Manager/configuration/cloudservices.json
    
    

Step 6:

• The cloud administrator creates a custom panel in HTML format.
• The cloud administrator implements callback hooks in JavaScript for initializing, validating, and fetching the custom field values.  This includes updating the java script to use the data source configuration that you created step 3.
• The cloud administrator updates the customPanelsConfig.json and customResourcesToInclude.txt files to indicate where the HTML panel should appear. For more information, see Using sample files.
• The cloud administrator goes to the platform manager host and updates the <BMC_CLM_Install_folder>\Platform_Manager\configuration\customField\metadata.json file to indicate the custom field and its type. For an example of how fields are customized in that file, see Customizing the Cart Checkout page. In BMC Cloud Lifecycle Management 4.6.06, String data type is supported.

Step 7: 

• If the data is sourced from a BMC Remedy AR System form or from BMC Atrium Orchestrator, the cloud administrator creates a data source configuration.
• The cloud administrator updates the HTML and JavaScript to use the data source configuration. See Adding dynamic lists to fields and Using JavaScript to customize the My Cloud Services console.

Step 8:

• Clear cache.

• Log on to the My Cloud Services console (EUP). Ensure that you should see your custom panel and the appropriate data source is working.

  • (For server details page) My Cloud Console > My requests> Click on appropriate server name > Go to the server details page.

  • (For advanced configurations options)  My Cloud Console > advanced configuration > Click on the appropriate option.

Using sample files

You can find sample panels in the  CLMInstallationFolder\Cloud_UI\custom_sample folder. The custom panels are included in the customPanelsConfig_SAMPLE.json file. The path of the JavaScript files are included in the customResourcesToInclude.txt  file. The html files and JavaScript files used in the samples are under the CLMInstallationFolder\Cloud_UI\custom_sample\samples folder.

The sample files show how to add the callback methods in JavaScript for initializing and handling events. For more information, see Using JavaScript to customize the My Cloud Services console.

To use the samples:

1. Copy the required files from the custom_sample folder to your CLMInstallationFolder\Cloud_UI\custom folder.

   Tip

   Do not confuse the custom directory here with the custom directory in installationDirectory\tomcat\webapps\clmui.
2. Rename the customPanelsConfig_SAMPLE.json file to customPanelsConfig.json, or copy the contents to the existing customPanelsConfig.json file.
3. Rename the customResourcesToInclude_SAMPLE.txt file to customResourcesToInclude.txt, or copy the contents to the existing customResourcesToInclude.txt file.
4. Add the appropriate metadata to the CLMInstallationFolder\Platform_Manager\configuration\customField\metadata.json file.
   For an example of this procedure, see Customizing the Cart Checkout page.

To add a custom panel or section

1. Create a customPanelsConfig.json file in the custom folder. (Use the example in step 2 to create the file.)
   You can find the location of the custom folder in one of the following files:
   • config.properties (if the My Cloud Services console UI is installed as a standalone)
   • cloudservices.json (if the My Cloud Services console UI is installed as part of the Platform Manager)

2. Use the following example customResourcesToInclude.txt file, and edit your file to create the custom panel or section:

   <link rel="stylesheet" type="text/css" href="custom/samples/reportsmenu/styles/css/reports.css">
   <script type="text/javascript" src="custom/samples/reportsmenu/scripts/soi_report.js"></script>
   <script type="text/javascript" src="custom/samples/reportsmenu/scripts/server_report.js"></script>
   <script type="text/javascript" src="custom/samples/offeringpanels/projectInfoPanel.js"></script>
   <script type="text/javascript" src="custom/samples/checkoutpanel/checkoutInfoPanel.js"></script>
   <script type="text/javascript" src="custom/samples/offeringpanels/userInfoPanel.js"></script>
   <script type="text/javascript" src="custom/samples/serverconfigpanels/InfoDay2Panel.js"></script>
   <script type="text/javascript" src="custom/samples/serverconfigtropanels/InfoDay2TROPanel.js"></script>
   <script type="text/javascript" src="custom/samples/serveroperatoractionpanels/InfoDay2OpActionPanel.js"></script>
   <script type="text/javascript" src="custom/samples/serverlistoperatoractionpanels/InfoDay2ServerListOpActionPanel.js"></script>

   
   
   

3. Use the following example customPanelsConfig.json file, and edit your file to create the custom panel or section:

 {
        "panel_name": "checkoutInfoPanel",
        "title": "",
        "url": "custom/samples/checkoutpanel/checkoutInfoPanel.html",
        "location": "cart.checkout",
        "entry_point_function": "mycompany.clmui.cart.checkoutInfoEntryPointFn"
    },
    {
        "panel_name": "projectInfoPanel",   
        "title": "Project Information",
        "header":"",
        "title_i18nkey": "cust_panel_project_info",  
        "header_i18nkey": "cust_panel_project_info", 
        "url": "custom/samples/offeringpanels/projectInfoPanel.html", 
        "location": "catalog.offering",
        "entry_point_function": "mycompany.clmui.request.projectInfoEntryPointFn",
        "panel_icon":"__icon-list panelIcon"
    },
    {
        "panel_name": "userInfoPanel",
        "title": "User Infomation",
        "header":"",
        "title_i18nkey": "cust_panel_user_info",
        "header_i18nkey": "cust_panel_user_info",
        "url": "custom/samples/offeringpanels/userInfoPanel.html",
        "location": "catalog.offering",
        "entry_point_function": "mycompany.clmui.request.userInfoEntryPointFn",
        "panel_icon":"__icon-list panelIcon"
    },
    {
        "panel_name": "amazonInfoPanel",
        "title": "Amazon Information",
        "header":"",
        "title_i18nkey": "cust_panel_project_info",
        "header_i18nkey": "cust_panel_project_info",
        "url": "custom/samples/serverconfigpanels/amazonDay2Panel.html",
        "entry_point_function": "mycompany.clmui.request.amazonInfoEntryPointFn",
        "location": "server.config",
        "panel_icon":"__icon-list panelIcon"
    },
    {
        "panel_name": "amazonInfoTROPanel",
        "title": "Amazon Information",
        "header":"",
        "title_i18nkey": "cust_panel_project_info",
        "header_i18nkey": "cust_panel_project_info",
        "url": "custom/samples/serverconfigtropanels/amazonDay2TROPanel.html",
        "entry_point_function": "mycompany.clmui.request.amazonInfoTROEntryPointFn",
        "location": "server.config.tro",
        "panel_icon":"__icon-list panelIcon"
    },
    {
        "panel_name": "testAO:Get Supported Types",
        "title": "Amazon Information",
        "header":"",
        "title_i18nkey": "cust_panel_project_info",
        "header_i18nkey": "cust_panel_project_info",        
        "entry_point_function": "mycompany.clmui.request.amazonInfoOperatorActionEntryPointFn",
        "location": "server.config.actions",
        "panel_icon":"__icon-list panelIcon"
    },
    {
        "panel_name": "testAOCallout:Test Process",
        "title": "Amazon Information",
        "header":"",
        "title_i18nkey": "cust_panel_project_info",
        "header_i18nkey": "cust_panel_project_info",
        "entry_point_function": "mycompany.clmui.request.amazonInfoServerListOperatorActionEntryPointFn",
        "location": "server.list.actions",
        "panel_icon":"__icon-list panelIcon"
    }
]

[
    {
        "panel_name": "myCartCheckoutPanel",
        "title": "",
        "title_i18nkey": "",
        "url": "custom/cartcheckout.html",
        "location": "cart.checkout"
    },
    {
        "panel_name": "myAdditionalDisksPanel",         // REQUIRED. A unique name for this panel. In case of custom operator action, this should match with workflow name.
        "title": "Additional Disks",                    // OPTIONAL. If given, then it will be displayed as the title for the panel.
        "title_i18nkey": "cust_panel_addtldisks",       // OPTIONAL. This is the i18nkey for the title. If given, then the localized string will be looked up.
        "header": "Disk1, Disk2",                       // OPTIONAL. This is the string displayed as the header of the panel.
        "header_i18nkey": "addtldisk_header",           // OPTIONAL. This is the i18nkey for the header string.
        "panel_icon": "panelIcon",                      // OPTIONAL. If given, then this will add a new custom class to panel icon. Default icon is __icon-list
        "url": "custom/additionaldisks.html",           // REQUIRED. The html file to display in the custom panel embedded. This is not required for custom operator actions.
        "location": "catalog.offering.servergroup",     // REQUIRED. Where to embed this panel. See also location_data below.
        "location_data": {                                // OPTIONAL. Additional data that is needed to place the panel correctly. Content varies based on the location property
            "offerings": ["offering1", "offering2"],  // OPTIONAL. List of offerings (comma-separated offering names) for which to add the panel.
            "servergroup_tags": "<tags>",             // OPTIONAL. Server group tags that identifies which server groups to include.
            "panel_index": 1,                         // OPTIONAL. 0-based index of where to place.
            "servergroup_names" : ["servergroup1", "servergroup2"],  // OPTIONAL. List of server group names to include.
            "transaction_requestable_offerings" : [tro1, tro2]       // OPTIONAL. Required for advanced configuration options. Should match with option name. If you want to apply the custom panel for all advanced configuration options, leave this field blank. This is the default behaviour.
        },
        "entry_point_function": "mycompany.clmui.request.addtlDisksPanelEntryPointFn",  // REQUIRED unless the panel is just read-only information. Console will call this method and pass the API context.
        "roles": ["CLOUD ADMIN", "CLOUD ORGANIZATION ADMIN", "CLOUD END USER"], // OPTIONAL. Roles for which the panel should appear.
        "tenants": ["calbro", "widgetsinc"]                                      // OPTIONAL. List of tenants for which this panel should appear. If left out, then all tenants will see.
    }
]

Following are more details about each key in the file:

To pass data back to BMC Atrium Orchestrator or the HTTP server

Complete the following step to ensure that data from fields on a custom panels is passed to BMC Atrium Orchestrator or the HTTP server. The data is passed in the form of CustomField objects that are embedded within the CSM request.

1. On the provider operation, set the pre-callout or post-callout to indicate which details must be passed to BMC Atrium Orchestrator workflow or a HTTP server call.

 Use the following syntax for embedded CustomField objects in CSM requests. See also a complete CSM request (CSMRequest.txt) and a SampleAOCallout.roar file (attached to this topic).

<list>
<CloudObject class="CustomField" name="CustomField">
<entry>
<string>guid</string>
<string>d0ca14f0-ce37-4075-9625-bc8bfb22ee1a</string>
</entry>
<entry>
<string>name</string>
<string>softwareName</string>
</entry>
<entry>
<string>stringValue</string>
<string>Apache</string>
</entry>
<entry>
<string>modifiedDate</string>
<date>2015-09-22 01:33:30.0 CDT</date>
</entry>
</CloudObject>
<CloudObject class="CustomField" name="CustomField">
<entry>
<string>guid</string>
<string>bb5ce262-63d7-453a-87a5-b93c8e0ea24b</string>
</entry>
<entry>
<string>name</string>
<string>diskSize</string>
</entry>
<entry>
<string>stringValue</string>
<string>512</string>
</entry>
<entry>
<string>modifiedDate</string>
<date>2015-09-22 01:33:30.0 CDT</date>
</entry>
</CloudObject>
</list>