ClearSCADA

In some cases it is desirable customise the WebX interface by either adding or removing buttons from the toolbar. To do this, a basic understanding of XML and XSLT is required.

For a basic background into XSLT, W3 Schools is a good starting point:

ClearSCADA uses XML to pass information to the client web browser when using WebX. This XML is then transformed into XHTML using a set of XSL files found in:

C:\Program Files\Schneider Electric\ClearSCADA\WWW\XSL

The layout of the menu buttons themselves is handled through the following XSL file:

C:\Program Files\Schneider Electric\ClearSCADA\WWW\XSL\layout.xsl
After making the changes shown below the browser cache must be cleared .  See the procedure for this at the bottom of this article

Adding Menu Buttons

To add a button, find the following section in "layout.xsl"

<xsl:for-each select="Links/Link">
  <xsl:call-template name="Button">
    <xsl:with-param name="href" select="@href"/>
    <xsl:with-param name="text" select="text()"/>
    <xsl:with-param name="last" select="boolean( position() = count( ../Link ) )"/>
  </xsl:call-template>
</xsl:for-each>

In the above code, a button is created for each "Links/Link" in the source XML document. To create additional buttons, expand this section with some additional customised buttons:

<xsl:for-each select="Links/Link">
  <xsl:call-template name="Button">
    <xsl:with-param name="href" select="@href"/>
    <xsl:with-param name="text" select="text()"/>
    <xsl:with-param name="last" select="boolean( position() = count( ../Link ) )"/>
  </xsl:call-template>
</xsl:for-each>
<xsl:call-template name="Button">
<xsl:with-param name="href">http://www.google.co.uk</xsl:with-param>
<xsl:with-param name="text">Google</xsl:with-param>
<xsl:with-param name="last" select="true()"/>
</xsl:call-template>

Removing Menu Buttons

Removing buttons is again done in "layout.xsl". Find the following section:

<xsl:for-each select="Links/Link">
  <xsl:call-template name="Button">
    <xsl:with-param name="href" select="@href"/>
    <xsl:with-param name="text" select="text()"/>
    <xsl:with-param name="last" select="boolean( position() = count( ../Link ) )"/>
  </xsl:call-template>
</xsl:for-each>

A button is created for each "Links/Link" in the source XML document. To remove a particular button, we need to prevent the Button template from being called in particular cases. This can be done by modifying the code as follows:

<xsl:for-each select="Links/Link">
  <xsl:if test="text() != 'Lists'">
    <xsl:call-template name="Button">
      <xsl:with-param name="href" select="@href"/>
      <xsl:with-param name="text" select="text()"/>
      <xsl:with-param name="last" select="boolean( position() = count( ../Link ) )"/>
    </xsl:call-template>
  </xsl:if>
</xsl:for-each>

In this case, if the "text() != 'Lists'", the button will be created. However, If "text() = 'Lists'" the button will not be created and the List button will be removed.

The following button types exist and can be removed in this way:

  • 'Home'
  • 'Database'
  • 'All Alarms'
  • 'All Events'
  • 'Lists'
  • 'Favourites'
  • 'Diagnostics'
  • 'Log On'
  • 'Log Off'


Clearing the Browser's Cache

In Internet Explorer click on the 'Tools' menu and then 'Internet Options'



On the 'General' tab in the 'Browsing History' section click the 'Delete' button.





On the 'Delete Browsing History' dialog select the top five chechboxes (as shown below) and then click the 'Delete' button




Once you have completed these steps close Internet Explorer and then open it again to launch your WebX session.

  1. Jun 23, 2011

    Anonymous says:

    Example for Removing Menu Buttons is clear for removing one of the buttons. ...

    Example for Removing Menu Buttons is clear for removing one of the buttons.  It is not detailed enough to explain removing more than one button.

    1. Jun 23, 2011

      Martin DeVillers says:

      You can specify individual buttons to include by using an OR statement like this...

      You can specify individual buttons to include by using an OR statement like this:

      <xsl:if test="text() ='Database' or text() = 'Lists'">
          <xsl:call-template name="Button">
             <xsl:with-param name="href" select="@href"/>
             <xsl:with-param name="text" select="text()"/>
             <xsl:with-param name="last" select="boolean( position() = count( ../Link ) )"/>
          </xsl:call-template>
      </xsl:if>

      The above example only includes buttons for Database and Lists

      1. Sep 22, 2013

        Bevan Weiss says:

        This is also possible by using filtering on the actual foreach query as follows ...

        This is also possible by using filtering on the actual foreach query as follows

        <xsl:for-each select="Links/Link[text()='Database' or text()='Lists']">
            <xsl:call-template name="Button">
              <xsl:with-param name="href" select="@href"/>
              <xsl:with-param name="text" select="text()"/>
              <xsl:with-param name="last" select="boolean( position() = count( ../Link ) )"/>
            </xsl:call-template>
        </xsl:for-each>
        

        Which is a bit easier to apply via an additional XPath transform on the XLS itself (such as if using a windows installer package to make the change..)

        You can just set the value of the select attribute to be as required.. rather than having to add in the additional <xsl:if> </xsl:if> pairing.