Archive for Ajax

Implementing an Ajax TreeView

The WebClient TreeView advanced control was designed to work with existing Plex Active/TreeView pattern functions with minimum changes to the action diagram. Read the following for the instructions (note this article was authored by Andrew Leggett, Senior Consultant for ADC Austin. He can be reached at

For example, you may want to implement a function that looks like this as a page in a browser.

To prepare an existing Active/TreeView or ShowTree function for WebClient.

  1. Attach the WebClientControls group model as a library to your group model. Note this is a separately licensed model.


2.  You can now inherit from the WebClient/_Abstract.~TreeView function.

3. If you have existing action diagram code to display a TreeView control, the only addition you will need to make is to add a ‘Go Sub TreeView Refresh’ statement at any point where you need to update the control in the browser.  This subroutine behaves similarly to a ‘Put’ statement.  For a new TreeView function, follow the article ‘Implementing a Tree Control’ in the Plex Help.

4. When exiting the function, make sure you exit with ‘Go Sub Terminate’, as this subroutine inherits the code necessary to cleanly dispose of the tree control in memory

5. If you are displaying images for your tree nodes, you will need to make these available to the web application with the following steps: (Note: the SelectedImage property is not currently supported)

6. In Eclipse, your Web project will contain a ‘WebContent’ folder which contains the run-time resources for your web application.  Create a folder directly under ‘WebContent’ and name it ‘images’ (it is case-sensitive).

  • Copy any bitmaps that your application uses to the ‘images’ folder.

  • The web application is case-sensitive, so you need to ensure that the bitmap names match those in your model.  The Plex TreeView uses Name objects scoped to the Scripts function to get the bitmap names; e.g. MyTreeView.Scripts/FNC option NME/Image 1.  The bitmap name is stored in the literal value of the name object.  Compare these names to the bitmaps in your images folder, and rename the files if appropriate.

To see a worked example of the TreeView pattern, download the WXPCourse61 example model.

WebClient Advanced Controls Explained

The latest release of WebClient contains a new optional pattern library with advanced Ajax web GUI control patterns. The two principle patterns released with WebClient 2010 (1.6) are ~TreeView and ~FlexGrid. ~TreeView enables your web application user to visualize hierarchies via a tree of nodes. Each node can have both text and image, and the nodes can be interactively expanded and contracted. ~TreeView can be used in a variety of business application scenarios: common examples include application menus, product bill of materials, organization charts, and Microsoft Outlook style interfaces. ~FlexGrid is advanced grid control pattern that gives the developer more control over the display and entry of tabular data than the standard CA Plex WinWidgets style grid. Using FlexGrid, you can programmatically set the color and font for individual cells without using states, add columns and rows dynamically, add images to cells, and more. This style of presentation is especially useful in creating spreadsheet-like applications, or in developing scheduling applications where there are not a fixed number of columns to model in the CA Plex panel designer.

TreeView Details

TreeView pattern inherits from and is based on the ACTIVETreeView pattern. For detailed information on constructing hierarchies, consult the CA Plex pattern documentation.

Implementation is straightforward, simply inherit from the ~TreeView pattern

Here are some examples of web trees:

FlexGrid Details

The ~FlexGrid pattern inherits from and is based on the ACTIVEFlexGrid pattern. For basic information on FlexGrid, consult the CA Plex documentation. However, with the WebClient implementation you have much more functionality available to you that you have in the ActiveX version of the control.

Implementation is straightforward, simply inherit from the ~FlexGrid pattern

There is also a more complex pattern called ~ExtendedFlexGrid. Here is a list of operations available:

Here is an example FlexGrid on the web:


More advanced controls will be added in upcoming WebClient releases. For example, FileOpen, ProgressBar, ListView, RichTextEdit and Slider patterns are all under consideration for development. Customers of the WebClient Advanced Controls pattern library will automatically get these new patterns as they become available. If you have an advanced control you would like to see supported, please drop us a note to

Advanced Web Controls, TreeView/Flexgrid

The upcoming 2010 release of the WebClient i+ platform will contain optional support for advanced Dojo controls such as the TreeView and FlexGrid components. The TreeView component is self-explanatory. The FlexGrid component is an advanced grid with the ability of adding columns dynamically, advanced font/display formatting, adding images to cells, and more (see the CA Plex Active pattern library documentation for a full description of capabilities). Adding Web generation support for your existing CA Plex applications with TreeViews and FlexGrids will be simple in most cases – just add inheritance and off you go – no code or panel changes required.

Here is a screen print of the new components:

Here is an example of the steps you will go through to implement in the Business Fundamentals sample model.

First, add WebClient inheritance

Second, generate and build as normal.

Final result in a browser. Yes, it is that easy.

If you are interested in becoming an alpha or beta tester for this capability, drop us a line at The Alpha program starts May 1.

How to look busy with WebClient


This guide will walk you through the steps required to implement an Ajaxy ‘busy’ indicator for a CA Plex/WebClient application. The indicator signals to the user that the web application is processing their request, and to wait until it finishes. On the web this indicator usually takes the form of an animated GIF image in the center of your web-page, and when it displays the user will be unable to interact with the web application.

This can be implemented in a few easy steps, but first, a bit of background about the communication process.

Browser and Web Server Communication

WebClient provides the ability to run your Plex application in an internet browser. It achieves this by presenting the user-interface as HTML in a browser and communicating with the application server through the web server. This communication between the browser and web server is handled by the Dojo JavaScript library by utilizing AJAX.

One example of where this communication occurs is when you are refreshing a grid. Let’s say that you have a grid with a Refresh button; when you click on the button, an AJAX communication is made with the WebClient application on the web server to indicate that the ‘Pressed’ physical event has been triggered for the Refresh button. WebClient passes this on to your Plex application, which determines that this physical event is mapped to the logical event ‘RefreshGrid’, and the associated code is executed from your Events Handler – in this case it will call the BlockFetch function to get the data for the grid.

The communication between the browser and the web server is very fast, and usually the user wouldn’t notice that it happens at all, but sometimes; such as when you are reloading a grid, there may be a delay between the user’s action and the response. In this case, if there is no visible indication, the user may not be sure that their action is being processed and they may be tempted to click the button again.

As mentioned, the Dojo library initiates the communication, and it also provides a mechanism to detect when the communication begins and ends. So implementing a busy indicator can be as simple as displaying an image at the start of the communication, and hiding it when it completes.

Implementing the Indicator

1. Create an HTML element to display the animated GIF image.

We need to put this in a convenient template that will be available to all your functions. The WebMessages-Page.wcli page template is a suitable place, so add the following code above the /(!MainArea) section:


     <div id=”IOSpinner” class=”loadingSpinner” style=”display: none;”>



    This simply creates a hidden HTML div element with an ID of ‘IOSpinner’ and a class of “loadingSpinner”.

2. Define the style for the “loadingSpinner” class.

You will need to be referencing a .css stylesheet file. If you don’t have one defined, you can add the following code to the top of the WebMessages-Page.wcli file:


@import “/(!WsRes)/css/customStyles.css”;


This refers to the file WebContent/css/customStyles.css in your Web Project in Eclipse, so if it doesn’t exist then create the .css file and add the following style definition:

.loadingSpinner {
width: 100%;

height: 100%;

position: absolute;

left: 0px;

top: 0px;

z-index: 1000;

background: transparent url(‘../images/SpinnerAnimation12PointDark_48px.gif’) center no-repeat;


This style defines an image that will appear in the center of your browser window, it will appear on top of all other elements on the page, preventing the user from being able to click on anything while it is displayed.

3. Save the animated GIF.

Save the image below and save it as ‘SpinnerAnimation12PointDark_48px.gif’ and place it in the WebContent/images folder.

Alternately, you can generate your own animated GIF at


4. Add the JavaScript to show and hide the indicator.

Note that there is already some code in the WebMessages-page.wcli file to do this, but it uses properties that won’t work with our IOSpinner element, so we will replace this. First find the following code…

    if (dojo.byId(“IOSpinner”)) {    

         dojo.connect(dojo, “_ioWatch”, function(dfd) {

            dojo.byId(“IOSpinner”).style.visibility = “visible”;

            dojo.connect(dfd, “callback”, function() {

                dojo.byId(“IOSpinner”).style.visibility = “hidden”;


            dojo.connect(dfd, “errback”, function() {

                dojo.byId(“IOSpinner”).style.visibility = “hidden”;




    …and replace it with:

    if (dojo.byId(“IOSpinner”)) {

        dojo.connect(dojo, “_ioWatch”, function(dfd) {

            dojo.byId(“IOSpinner”).style.display = “block”;

            dojo.connect(dfd, “callback”, function() {

                dojo.byId(“IOSpinner”).style.display = “none”;


            dojo.connect(dfd, “errback”, function() {

                dojo.byId(“IOSpinner”).style.display = “none”;




This will display the HTML element that you defined in step 1 when the server communication starts, and hide it when it is complete – or if an error occurs.

    5. Rebuild your templates and republish your WebClient application.

This blog post has been authored by Senior Application Consultant Andrew Leggett. He can be reached at


Control Templates: How to Display a Plex Grid as a Pie Chart

Special Note: Andrew Leggett, Senior Application Consultant, is the guest author of this post. Andrew Leggett can be reached at

WebClient makes it easy to generate your Plex panel designs as HTML and Javascript so they can be used within a web browser; but with the use of custom templates, you can also present your data in a variety of ways that go beyond the standard Plex controls.

This guide will take a standard Plex grid and show you how to apply a custom control template to display the data as a pie chart. This example can be applied to any grid with numeric data columns; it requires no changes to the action diagram, and only takes a few minutes to get results.




I’ll start by describing the steps that you will need to follow; then I will go into more detail to explain how this works.

1. Select a grid to work with.

For this example I’ve taken a simple EditSuit.Grid function, and I want to present the data in the ‘Market Price’ column as values in a pie chart. This is how it displays in a browser with the standard WebClient templates:

2. Create the template file.

Create a new file in your custom template folder in your Eclipse workspace and name it ‘DojoSimplePieChartGrid.ctrl’. Open the file, then copy and paste the following text. Save the file.












    var pieSeriesData = new Array() ;

    var pieChart;


    function setPieChartValues()


        var pieValueColumn = /(!Param:ValueColumn) ; // The column in the Plex grid that contains the value. Set by the ‘ValueColumn=n’ control name parameter.


            var cell = /(!This:!jsonRows) ;

            for (var row=0; row<cell.length; row++)


                pieSeriesData[row] = Number(cell[row][pieValueColumn]);





    function changePieColor(color)








    var pieRegionWidth = /(!Size:x); // The width of the Plex Grid control

    var pieRegionHeight = /(!Size:y); // The height of the Plex Grid control

    var pieRadius;


    // Make the radius a little smaller than the shortest side

    if (pieRegionWidth < pieRegionHeight)


        pieRadius = (pieRegionWidth/2) – 10 ;




        pieRadius = (pieRegionHeight/2) – 10 ;


    pieChart = new dojox.charting.Chart2D(“/(!NameID)”);

    pieChart.addPlot(“default”, {type: “Pie”, fontColor: “white”, labelOffset: pieRadius/2, radius: pieRadius });

    setPieChartValues() ;

    pieChart.addSeries(“/(!NameID)_series”, pieSeriesData);




<div id=”/(!NameID)” style=”/(!DefaultCSS:nc:withPos=/(!Param:default))”></div>

<script type=”text/javascript”>



3. Override the control template.

Open up your Plex panel, select the grid control, then paste the following text into the ‘Control Name’ property:


Note the ValueColumn=3 parameter; this refers to the grid column that will be used for the pie chart values, but be aware that this template expects the column numbers to start at zero, and Plex starts with one, so this value is actually the Plex column number – 1. In my example column 3 refers to the ‘Market Price’ column. Another parameter you can modify is the DefaultColor=blue parameter. You can use values blue, cyan, green, orange, purple or red, but they are case-sensitive so they should be entered as lower-case.

4. Generate, build and publish.

Generate your function, and build it in Eclipse. The template generator will output a diagnostic message but don’t worry about this; it is just telling you that it hasn’t attached the grid fields to the panel template.

Publish the application to the Web Server. When you access your function in the browser, you should see something like this:

Note that the pie chart has the same position and size as the original grid. Also, the buttons function as before, so the ‘Refresh’ button will reload the ‘grid’ and effectively recalculate the chart if your data has changed.

Technical details of how this example was created

This example draws a pie chart using the dojo libraries; however the process of creating new control templates can be applied to other web controls. Additional information can be found at

1. Locate some suitable Javascript code

The first step is to start with some Javascript that does what you require. The dojo toolkit provides a large collection of Javascript and Ajax controls that can be used to enhance your web application. The Dojo Campus feature explorer is a great place to start, as it shows you a working example of each feature, along with sample HTML and Javascript to make it work. This can be located at The Javascript used in the template for this example was adapted from the sample at:

2. Create the Control Template

To override the way that your controls will display in the browser, you will need to create a control template with the suffix ‘.ctrl’. For this example, I created a template named ‘DojoSimplePieChartGrid.ctrl’. You will need to define any dojo libraries that will be used with the dojo.require() method, and these should be define in the /(!JSInit) attach point. As a general rule; the Javascript functions (setPieChartValues()and changePieColor(color)) can be attached to the /(!JSInit) attach point, and the Javascript that will be executed when the page loads can be attached to the /(!JSOnLoad) attach point. Finally, you will need to define a visible HTML element that will be associated with the chart. In this example I used a <div> element.

3. Modify the template to allow Plex runtime values.

WebClient can incorporate values from the Plex panel design and runtime environment into the rendered page. If you look at the template, you can see how these are defined.

  1. Panel Properties

The control takes the position and size from the Plex panel design, and the pie chart needs to fit within that area on the page. To determine the radius of the pie chart, it needs to be less than the shortest side of the control area, so I need to include the control height and width in the Javascript. This was done with the /(!Size:x) and /(!Size:y) replacement markers. At runtime these will be replaced by the width and height property values from the panel design.

  1. Control Name parameters

The color and data column are required by this pie chart template. As there are no suitable panel properties for these values, a defined parameter is required. These parameters are included in the template by adding the /(!Param:ValueColumn) and /(!Param:DefaultColor) replacement markers, and the values are defined in the control name as ValueColumn=3:DefaultColor=blue.

  1. Grid values

The Javascript in this example reads the data in the grid and adds it to the series data required by the pie chart.  The grid data is available at runtime in the json format, and can be retrieved with the replacement marker

This data is presented in the format:

[["1","Widget","It's a Widget","100.0","84.0"],

["2","Large Widget","It's a Widget, only bigger","150.0","120.0"],

["3","Small Widget","The smallest Widget you can buy","99.0","89.0"],

["4","Another Widget","It's another Widget","101.0","70.0"],

["5","new","new product","230.0","200.0"]]


This is essentially a two-dimensional array of rows and columns. This array can be processed by Javascript.

4. Override the control template.

Finally, to be able to use the template, the WebClient template builder takes direction from the control name property in the panel design. We added the directive:


The parameters are separated by colons; the values can be interpreted as:

ProductPieChart – The first parameter is always the control name, this will identify the control in the template, and is referred to in the template as /(!NameID).

MainArea – The second parameter always refers to the attach point in the root or page template where the control will be rendered. ‘MainArea’ is the default location.

template=DojoSimplePieChartGrid – This parameter directs the template builder to use the defined template when generating this control.

ValueColumn=3 – This value is referenced in the template as /(!Param:ValueColumn), so at runtime this will generate text ‘3’.

DefaultColor=blue – This value is referenced in the template as /(!Param:DefaultColor), so at runtime this will generate text ‘blue’.

default – If the ‘default’ parameter is included, the WebClient will generate the size and position based on the values in the panel properties for this control.

Ajax Integration with Google Maps

Geomapping Technology and the Internet

One of the advantages of web application development is that you can easily integrate or mashup your organizational data with the large array of detailed information made freely available on the internet. A good example of this is geographical mapping data. The uses of having geo mapping data within your business application are virtually endless. For example:

  • Provide your customers with interactive directions to your facilities.
  • Incorporate directional mapping into routing applications, e.g. customer deliveries, repair/installation, or home health care visits.
  • Show analytic data points overlaid on a map view, for example to clearly show management where your best customers are located.

In the past in order to run your own private map server and software, IT management had to budget a rather sizeable investment in servers, maps, application software, and integration programming. However, to make appropriate use of today’s freely available map data from google, yahoo, mapquest, and many others it is a completely different ball game – you just need a little JavaScript and a developer’s API key (usually free for most uses, but check out the license agreement).

Google Maps

Google Maps (accessed is one of the classic examples of a useful and impressive Ajax application. The smooth scrolling and interactivity of the map (point to point directions, pushpin pop-ups with shadows, traffic, street view, etc.) is reminiscent of a sophisticated desktop application. However, Google actually accomplishes all this working within a standard browser without special plug-ins or add-on software.


Google Maps is one of the best examples of how RIA (Rich Internet Application) techniques are revolutionizing business application development. Yes, I’m sure that the code involved to render the complex maps in a browser is non-trivial – but you can leave that to Google’s team to write and maintain in JavaScript. However, the code necessary to integrate maps into your CA Plex WebClient i+ application IS trivial, and even better we have written the technical parts of it for you.

Create your own Geo-map pattern

The easiest way to start with geo-mapping is simply to try the example in the rest of the blog. Most developers find they can create their own WebClient i+ pattern and get an example running in less than 30 minutes.

Step 1

Create your own pattern or function that contains the address data on standard CA Plex panel with standard CA Plex fields. Feel free to download our WebClient sample model for an example of this.

To follow our example, create a pattern called ~MapUrlPopop which inherits from WEBCLIEN/~DetailPopup, and pass in the appropriate address fields as input parameters. Give the pattern function an implementation name of MapUrlPopup, which corresponds to the html template file name in the next step.

The panel field edit controls should contain the following control names to match up with our mapurlpopup-root:

  • AddressLine1
  • AddressLine2
  • City
  • State
  • Zip

Step 2

Copy the attached mapurlpopup-root to your templates directory in Eclipse. Note the following section of code.

Template attachment 
function() {


            var fAddLine1 = /(AddressLine1);
            var fAddLine2 = /(AddressLine2);
            var fCity = /(City);
            var fState = /(State);
            var fZip = /(Zip);
            var fStreetAdd = fAddLine1 + " " + fAddLine2 + " " +  fCity + " " + fState + " " + fZip


            if (GBrowserIsCompatible()) {
            var map = new GMap2(document.getElementById("map"));
                  var geocoder = new GClientGeocoder();


                  geocoder.getLatLng(fStreetAdd, function(point){
                        var p = point;
                        map.setCenter(p, 13);


Also make note of the Google API site key at the start of the file. If you are planning to implement this example, please replace the API key with one you obtain directly from Google Maps website:

Step 3

Inherit from or call your new pattern directly, generating and building as normal for WebClient, and view the results. It is really that simple!


Want to learn more? This simple templating example shows some of the power of WebClient Ajax templates, but the possibilities are endless. Visit for complete documentation on WebClient i+ templating.

© 2013 CM First Group - All rights reserved