10.2 Custom Templates

Custom templates are made in the Corda Builder tool, then deployed by using Chart Builder portlet. You create a template by making a PCXML file, then incorporating data from Operations Center by using JSP tags. When a template is created, it can be uploaded to the Chart Builder portlet and configured to appear on a Web page.

10.2.1 Creating the Template File

APCXML file is created using Corda Builder*, a wizard-based tool, which is later with JSP tags to leverage data from Operations Center.

Chart Builder templates use Velocity*, a templating mechanism. To learn more about Velocity, go to the Apache Velocity Project.

The following sections cover how to create a new chart for the Chart Builder portlet.

Creating a Chart

To create a chart by using the chart wizard:

  1. In the Operations Center installation directory, browse to and launch the /OperationsCenter_install_path/image/bin/CordaBuilder executable.

    The Corda Builder tool launches.

  2. Do one of the following:

    • Click Graph Wizard, then continue with Step 3.

    • To create a map, click Map, then skip to Step 4.

    • Click Close to cancel the Fast Start options and open an existing template.

    • Click Close to work from scratch without using the wizard.

    • If creating a chart or graph, the easiest way is to work from a template, then customize a chart or graph as necessary.

  3. Select Create New Project from a Template.

  4. In the Template Selection tab, select template names in the Template Selection left pane to preview the various styles.

  5. When you have found a chart style you want to use, click Next to continue.

  6. In the Graph Type Selection tab, select the graph type, subtype, and style.

  7. Click Next to continue.

  8. In the Data Selection tab, do one of the following:

    • Use the Graph Data spreadsheet to specify valid data if you want to create a chart with static values.

    • Specify placeholder information to replace with JSP tags later to pull data from Operations Center.

  9. Click Next to continue.

  10. In the General tab, specify border, background, and color theme options.

  11. In the Title tab, specify the chart title, and specify border, shadow, and font settings for the title.

  12. Select Continue Customizing Project, then click Finish.

    The chart template is displayed in the Corda Builder tool.

  13. Continue to Modifying Chart Settings and Properties, or Modifying Map Settings and Properties if creating a map.

Modifying Chart Settings and Properties

To modify chart settings and properties:

  1. Double-click any of the objects in the Object drop-down list, or double-click any element directly on the map.

  2. Click the PCXML tab to view the chart code directly.

    To integrate Operations Center data, the file needs to be modified to include JSP tags to pull in dynamic data. See Section 10.2.2, Integrating Operations Center Data

  3. To publish the chart with static data, verify that all data points are correct.

  4. To publish the chart, click File > Publish.

  5. Select image types to be created by selecting the appropriate check boxes.

  6. Browse and save the file to a directory and with a file name that can be remembered later.

  7. Continue to Section 10.2.2, Integrating Operations Center Data.

Modifying Map Settings and Properties

To modify map settings and properties:

  1. Double-click any of the objects (such as, Graph, Legend_Graph, Title) in the Object drop-down list, or double-click any element directly on the actual chart.

    If creating a map the easiest way is to build it based on a template using a map from the map library, then customize further as necessary.

  2. Click Template.

  3. Click Predefined.

  4. Browse the maps hierarchy tree, then select the PCXML file for the continent, country, region, US, or world.

  5. Click OK to select the map.

    The chart is displayed in the Corda Builder tool.

  6. Continue to Section 10.2.2, Integrating Operations Center Data.

10.2.2 Integrating Operations Center Data

After a chart has been created through the Corda Builder, the PCXML file must be customized to work with Operations Center data.

This is where you leverage the various tag libraries (see Section C.0, JSP Tag Library Reference) and define user setup options that format or drive the chart. Depending on chart requirements, this can include:

  • Operations Center element selection

  • Date/time or date range selection

  • Time category selection

  • Performance Series (profile/expression) selectors

  • SLA (agreement/objective) selectors

  • A custom check box series option

  • A custom field option (that is, a chart title)

  • A custom drop-down list option

To customize a chart with Operations Center data:

  1. To launch the Corda Builder if it is not already open, go to the Operations Center installation directory, then browse to and launch the /OperationsCenter_install_path/image/bin/CordaBuilder executable.

  2. Open a template PCXML file. If one is not already open, then click the PCXML tab.

  3. Select and copy all the code, then open a text/HTML editor and paste in the PCXML code.

  4. Add the required UI Model code in the .jsp file header.

    These are the options that form the editor portion of the chart and drive the generation of the chart at runtime. For an example, see Section 10.2.4, An Example: Modifying a PCXML File with JSP Tags.

    Following are the available UI Model selectors:

    Selector Type

    Attributes

    Fields1

    Description

    calendar

    label

    Provides a drop-down list to select a calendar. For example:

    <selector type="calendar" label="Select calendar:" />

    check box

    label,

    name,

    checked

    Provides a check box selection.

    label is the text displayed for the check box. For example:

    <var type="check box" label="Use Breaches for Cost Counts" name="useBreaches" checked="checked" />

    date

    label

    Provides options to run report for an interval, date range, or real-time data. For example:

    <selector type="date" label="Run report for:" />

    element

    label

    Provides an element link to browse and select a root element to drive the chart/report. For example:

    <selector type="element" label="Select element:" />

    nativePerformance

    label

    profile,

    expression

    Provides fields to specify the profile and expression.

    Also provides links to browse and select. For example:

    <selector type="nativePerformance" label="Select Metric:"> 
    <required name="profile" />
    <required name="expression" />
    </selector>

    select

    label,

    name,

    options

    Provides a drop-down list selection.

    options are the actual values of the drop-down list items. For example:

    <var type="select" label="Select your favorite fruit" name="Fruit" options="Apples,Oranges,Blueberries" />

    sla

    label

    sla,

    objective

    Provides fields to specify the agreement and objective.

    Provides links to browse and select, as well. For example:

    <selector type="sla" label="Select SLA:">
    <required name="sla" />
    <required name="objective" />
    </selector>

    textbox

    label,

    name,

    size

    Provides a simple field option. For example:

    <var type="textbox" label="Chart Title:" name="title" size="35" />

    timeCategories

    label

    Provides a check box list for time categories selection. For example:

    <selector type="timeCategories" label="Time Categories included:" />

    1If no required fields are specified, all available fields are applied. If one field is specified in the selector, only the specified field is used. All fields that are not specified are hidden and not used.

  5. Add any necessary taglib references.

    For more information about using the tag libraries, see Section C.0, JSP Tag Library Reference.

    For an example, see Section 10.2.4, An Example: Modifying a PCXML File with JSP Tags.

  6. Update any places where information is dynamic.

    Instead of the placeholder static values, insert the code to pull the data from Operations Center where needed. For an example, see Section 10.2.4, An Example: Modifying a PCXML File with JSP Tags.

  7. Add drill-down URL links, if desired. See Section 10.2.3, Creating Drill-Down URLs for a Chart

  8. Close all open tags.

  9. Save the file as a .jsp file to a working directory.

  10. Continue to Section 10.2.5, Uploading New Templates

10.2.3 Creating Drill-Down URLs for a Chart

When you create a custom chart through the Chart Builder, it is possible to set up links (URLs) that allow for drill-down functionality.

The following parameters are required for the drill-down URLs in chart templates:

  • template parameter (+ id): Specifies the location of the template to include.

  • goto parameter (+ id): Sends the request to the helder include file.

An example of a link is:

<%= response.encodeUrl( request.getContextPath() + "/Controller?backLink"+id+"="+java.net.URLEncoder.encode(thisLink)+"&goto"+id+"=/chartBuilderDrillDown.jsp&template"+id+"=/generated/templates/radarAndPieAlarms.jsp&dname"+id+"="+java.net.URLEncoder.encode(dname) ) %>

The Dashboard ships with a Chart Builder example (see the Map Drill Down Example template) that shows a map with this drill-down functionality. Although the example is not intended for use out-of-the-box without further customization, it shows how Chart Builder can be used to build a custom map with drill-down support. The link can be configured to drill down to one element.

10.2.4 An Example: Modifying a PCXML File with JSP Tags

The example uses an example code snippet from the ElementBarAlarms.jsp file after it was edited to expose Operations Center information. Compare this to the ElementBarAlarms.PCXML file to view the raw file before it was updated. This is an example of how you might modify a PCSML file, actual edits depend on the chart you are building.

To modify a PCXML file with JSP Tags:

  1. Add the UI Model code to the header for each chart setup option in the Dashboard:

    <%--
    <uimodel title="Element Alarm Counts as a Bar Chart">
       <variable prefix="graph1">
          <var type="textbox" label="Enter the title of this chart:" name="title" size="35" />
          <selector label="Select the element for which to display alarm counts:" type="element" />
          <var type="check box" label="Show the last updated date/time:" name="datetime" />      
       </variable>
    </uimodel>
    --%>
    
  2. Get access to element info by using DName. Insert the DName code as follows below the xml version code but above the chart tag as shown in the first line below:

    <element:exists name="$graph1.element.dname" id="element">
    <Chart Version='4.40.00' BorderType='None' BorderColor='#99ccff' BGGradientColor='#4d718e'>
  3. Use value entered in edit options to set chart title.

    <Textbox Name='Title' Top='6' Left='4' Width='121' Height='23'>
        <Properties ShadowStyle='Fade' HJustification='Left' Font='Name:Lucida Sans; Size:14.0; Style:Bold; Color:#003333;'/>
        <Text>$graph1.textbox.title.value</Text>
      </Textbox>
  4. Leverage Formula tag to get condition colors as shown in the bottom half of this section.

     <Graph Name='graph' Top='49' Left='20' Width='503' Height='263' Type='Bar' SubType='Basic'>
        <Properties AnimateStyle='Default' Effect='2D' SingleSeriesMulticolor='True' ShadowStyle='Fade' UseGridStripes='True' GridStripeColor='#ccccff' PercentSpaceBetweenBars='30'/>
        <DataLabels Font='Size:11.0; Style:Bold; Color:White;' BGColor='Black' FormatString='%_VALUE %_CATEGORY_NAME Alarms' ShowBarZeroValues='True' ShadowStyle='Fade' />
        <HTMLTable TableAttributes='border=&#x27;3&#x27; cellspacing=&#x27;0&#x27; cellpadding=&#x27;3&#x27;' HeaderTR='align=&#x27;center&#x27;' HeaderTR2='align=&#x27;center&#x27;' DataTR='align=&#x27;center&#x27;' FooterTR='align=&#x27;center&#x27;' FooterTH='align=&#x27;center&#x27;' />
        <formula:colors id="colors">
          <ColorPalette  Color1='<%=colors.getConditionColor("critical")%>' Color2='<%=colors.getConditionColor("major")%>' Color3='<%=colors.getConditionColor("minor")%>' Color4='<%=colors.getConditionColor("informational")%>' Color5='<%=colors.getConditionColor("ok")%>' Color6='<%=colors.getConditionColor("unknown")%>' Color7='#66ccff' Color8='#33cc99' Color9='#cc6666' Color10='#f0f066' Color11='#ffccaa' Color12='#aaccff' Color13='#66ddaa' Color14='#f09999' Color15='#f0f0aa' Color16='#ccf0aa'/>
        </formula:colors>
          <ValueScale Position='Left' MinorGrid='Visible:False;'  MinorFont='Size:10.0;'/>
        <CategoryScale MinorFont='Size:10.0;'/>
      </Graph>
    
      
  5. Use Element tag to get severity counts and plug into data values as shown in the bottom half of this section.

      <GraphData Name='graph' Method='Replace'>
        <Categories>
          <Category Name='Critical'/>
          <Category Name='Major'/>
          <Category Name='Minor'/>
          <Category Name='Informational'/>
          <Category Name='OK'/>
          <Category Name='Unknown'/>
        </Categories>
          <Series Name='Count'>
             <Data Value='<%=element.getAlarmCount("(severity=critical)")%>'/>
             <Data Value='<%=element.getAlarmCount("(severity=major)")%>'/>
             <Data Value='<%=element.getAlarmCount("(severity=minor)")%>'/>
             <Data Value='<%=element.getAlarmCount("(severity=informational)")%>'/>
             <Data Value='<%=element.getAlarmCount("(severity=ok)")%>'/>
             <Data Value='<%=element.getAlarmCount("(severity=unknown)")%>'/>
          </Series>
       </GraphData>
  6. Print time data was last updated.

    <%
       if ($graph1.check box.datetime.value) {
          java.text.DateFormat lu = java.text.DateFormat.getDateTimeInstance( java.text.DateFormat.MEDIUM, java.text.DateFormat.MEDIUM );
       %>
       <Textbox Name='textbox3' Top='314' Left='1' Width='537' Height='19'>
        <Properties AutoWidth='False' AutoHeight='False' AutoSizeText='True' BorderType='None' TransparentFill='True' Font='Size:11.0; Style:Italic;'/>
        <Text>Last updated <%= lu.format( new java.util.Date() ) %></Text>
      </Textbox><%
       }
       %>
  7. Close the chart and element tag.

    </Chart>
    </element:exists>

10.2.5 Uploading New Templates

After creating a new template, use the Chart Builder portlet in the Dashboard to upload it to your Web page. After uploading it, you must configure it.

To upload a chart template:

  1. From a Chart Builder portlet, click the options icon and select Preferences. The Chart Builder tab opens.

  2. Click Manage.

  3. Click Browse to browse and select a chart template file.

  4. Click Upload to add the template.

  5. The template is now available to use with the Chart Builder portlet.

10.2.6 Deleting Templates

You can remove templates that you uploaded by using the Chart Builder portlet in the Dashboard.

To delete a chart template:

  1. From a Chart Builder portlet, click the options icon and select Preferences. The Chart Builder tab opens.

  2. Click Manage.

  3. Select the check box for the chart template.

  4. Click Delete.