Archive for January 10, 2017

Search and Replace in CA Plex

Did you know that you can copy and paste Action Diagram code into a text editor such as Notepad or Notepad++.

This simple tip can be a real time saver when editing Action Diagrams in CA Plex.

Once you have the code in a text editor you can perform operations such as search and replace, or even run macros in Notepad++. For example if you need to add a number of new subroutines and want to include the recommended +Subroutine meta variable and associated edit points, you could do the following:

1. Paste the following boilerplate code into a text editor.

ª+1 Sub aaa
ª+2 +++Define Field: FIELDS/+Subroutine
ª+2 Edit Point Start aaa
ª+2 +If Field: FIELDS/+Subroutine
ª+3 Edit Point aaa
ª+2 Edit Point End aaa
ª+2 +++Undefine Field: FIELDS/+Subroutine

2. Open the Search and Replace dialog in the text editor and replace the “aaa” placeholder with the name of your subroutine, e.g. “Process Results”.

ª+1 Sub Process Results
ª+2 +++Define Field: FIELDS/+Subroutine
ª+2 Edit Point Start Process Results
ª+2 +If Field: FIELDS/+Subroutine
ª+3 Edit Point Process Results
ª+2 Edit Point End Process Results
ª+2 +++Undefine Field: FIELDS/+Subroutine

3. Select the code and copy the text.
4. Paste the copied text into your Action Diagram.


5. Repeat the steps for any other subroutines you want to add.

Be careful not to modify any of the special characters, e.g. “ª+2” or “@@”.  The code you edit will be parsed by Plex when you paste the text, so it may report any errors if for instance you mistype a field name.

CM WebClient and Vector Graphic File Support

By Abram Darnutzer, Sr. Application Consultant

All modern browsers have scalable vector graphic (SVG) file support. But there are several display options for these files.

The simplest method is to display the file directly as an image:

<img src=”test.svg” alt=”My Test SVG File”>

However, in so doing, you lose a unique function of SVG files because it is no longer possible to dynamically change the images using CSS or the SVG code itself.

A better method is to embed the code directly into the HTML using the “svg” tag:

<svg x=”0px” y=”0px” width=”612px” height=”502.174px” viewBox=”0 65.326 612 502.174″ enable-background=”new 0 65.326 612 502.174″ xml:space=”preserve” class=”logo”> <ellipse class=”ground” cx=”283.5″ cy=”487.5″ rx=”259″ ry=”80″/> <path class=”test” d=”testing”/> <filter id=”pictureFilter” > <feGaussianBlur stdDeviation=”15″ /> </filter> </svg>

Then you can manipulate the SVG image with CSS, as follows:

.logo {

width: 200px;

height: 164px;


.test {

fill: #94d31b;


.test:hover {

fill: #ace63c;


.ground {{

fill: #787f6a;


.ground:hover {

filter: url(#pictureFilter);

fill: #896d3d;


Creating a template for CM WebClient to use this kind of functionality is straightforward. You just need some simple HTML, like this:

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

<svg width=”/(!Size:x)px” height=”/(!Size:y)px”>



Then, add some code in the JSOnLoad and/or add an action to do a SetValue in CM WebClient. You will be able to control the contents of this SVG tag through CA Plex.

Alternatively, you can reference an existing SVG file directly in the browser. By using the Object Tag you can reference an existing file while retaining all the functionality embedded within the SVG file. However, you still do not have control over the file using CSS. To retain control, write HTML that looks like this:

<object type=”image/svg+xml” data=”” class=”logo”>


Manipulating Object Positions in CSS

By Abram Darnutzer / Sr. Application Consultant

With HTML5/JavaScript applications, item positioning on a screen falls into two categories: relative positioning or absolute positioning. Absolute positioning for mobile applications should be avoided (with few exceptions) since mobile devices vary greatly. Relative positioning can be tricky to get just right, however. Below are a few quick and easy tricks to position items better in your app!

Header Setup

A typical header region contains two things: a centered logo and a back button in the top left corner. (You should limit the area to include 1-2 other items since you don’t want to overcrowd the space.) If you use Sencha Touch’s spacing to set this up, you may notice that your logo will be off-centered because the items on each side of the logo are different sizes. We can do some simple CSS to avoid this eyesore.

If you want an item to appear in the top left:

.TopLeftButton {

position: absolute;

left: .2em;


If you want an item to appear in the top right:

.TopRightButton {

position: absolute;

right: .2em;


And for the centered logo:

.CenteredLogo {

height: auto;

margin: auto;


You’ll end up with something like this:


The code is setting a discrete constant distance between the left and the right buttons from the edge of the screen and marking the logo margins as equal to the left and to the right. (Note: Since the left and right buttons are position absolute, they do not factor into the margin calculation.)

Displaying a Button Image Over Button Text

In WebClient Mobile, the button image and button text will appear on the same line by default because they both use the Span HTML tag, which displays items on the same line. Getting around this issue is simple.

For the button CSS:

.Mybutton {

display: table-cell !important;


For the button image:

.Mybutton .x-button-icon {

vertical-align: top;

margin-left: auto;

margin-right: auto;


And for the button text:

.Mybutton .x-button-label {

display: table-row;

vertical-align: bottom;


This will produce a layout like this:


These methods will ensure that your carefully designed objects will display optimally on whatever device your customers choose!

Automate Your Web Page Testing

By Denise Kalm | Industry Expert

A new, clean web page isn’t built in a day — it requires major testing before going live. Web pages are software, and software is prone to bugs. Problems with your pages can seriously affect your line of business, and the wide visibility of a web page harbors the risk of damaging your brand when mistakes happen. (And they do.) Mistakes in this arena are deadly not only because customers might seek out other business: Public mistakes are just plain embarrassing!

Though most application software goes through complex automated QA and load testing, too often web pages don’t get the same diligence and attention, because they “look just fine.” You may manually walk through various options, but the “if it ain’t broke, don’t fix it” mentality is tempting. It’s possible you’ve known for years that your company needs an automated tool, but budget constraints have placed it out of reach for except the largest companies. But now small startups are working harder and getting smarter, and small companies are accordingly offering creative, affordable solutions. In short, you can no longer afford not to evaluate your automation needs.

So what kinds of questions should you ask yourself while evaluating? “How repeatable are your manual tests?” “How long does each test take?” Automating the process allows you to run tests repeatedly as you develop the web pages without impacting the development schedule. For web applications, tests need to be run on all operating systems and hardware types your customers might use — a complicated, unwieldy process when performed manually. Automated test scripts ensure that you cover all the bases, freeing up time and money that you can then devote to other areas.

You’ll also have the option to create more tests than you would ever want to execute manually. (Remember: The more you test, the more reliable your software will be.) You not only want to test the ideal way a customer works with your application; you also need to run tests that’ll check when things go wrong. It is essential to detect where, how, and why your application isn’t handling a situation correctly. Once your solution is in place, you can have the product report on in-flight, transaction processing steps to see contents of tables and files, and the memory to understand and correct problems.

So what does automation mean for you?

  1. Automation means accuracy. Each run will be exactly the same as the last, and every important aspect will be documented. Unless you hire out, developers in small shops end up doing the testing, which wastes valuable company resources (and is hardly fun for them).
  2. Automation means scale. No one can bring together hundreds or thousands of users to test the capacity of a system and detect potential issues, such as out-of-sequence database updates. Only an automation solution can test the limits of your application as thoroughly as if it were running live.
  3. Automation means a happier and more productive team. When developers and QA can do what they love instead of what they find tedious, everyone smiles more. Simple as that.

What are the steps involved in automation?

The first step is deciding what tests to run — the most obvious of which are unit, functional, regression and load testing. Unless this is a brand new application, you’ll also need to conduct regression testing to ensure you haven’t broken anything in the existing code. Your application may have other needs, so be sure to have a complete list before you search for a product.

Once you know this, you can prepare a list of requirements (or RFP) to present to a list of vendors, such as supported platforms, scripting languages, the ability to record and/or replay, and kinds of testing they offer. Vendors must, of course, be able to test against all the common browsers, but they’ll also need to test all the popular mobile platforms.

This may sound overwhelming, but CM First can help!

We at CM First can help you develop efficient ways to automate testing of your browser, mobile, green screen, and client-server applications with industry-leading products coupled with best practices training and mentoring. We are particularly experienced with applications developed with CA Plex and CA 2E, but we are not limited to applications built with those products. (Anything that has an interface can be automatically tested, including packages like Office and Salesforce.)

In sum, running tests early in the development cycle expedites the process of getting your working product to market. Let CM First help smooth the transition from manual to automated so you stress less and profit more.

When will you start automating?

© 2013 CM First Group - All rights reserved