I wanted to do a series of blog posts about more advanced conversion theme functionality. This is an area that we get questions on quite often. So in this series of posts, I will lay out some examples of things you can do in conversion themes with a little bit of code. (You can see part one of this series here and part two here.)

Today, we revisit our old friend the “add enhancements” property. This is likely the most powerful property in your conversion theme as it allows you to do almost anything by providing a JavaScript function to be run during the conversion of each record format. The “add enhancements” property should be set up as a function with 3 parameters. The first will be a JavaScript object with all of the items in the record format. The second will be a flag to let the function know if this is a subfile record format, and the third a flag to indicate a window.

In today’s example, let’s say we want to add a clickable image (or button) next to each promptable field on the screen and automate placing the cursor on that field and pressing F4. In this example, we will assume that all promptable fields have some sort of flag after the input field. In this case, we will look for a question mark (?). The following code will accomplish what we are looking for.

"<span style="color: #0000ff;">add enhancements</span>": <span style="color: #800000;">function</span>(<span style="color: #000000;">format, isSubfile, isWindow) { </span>
  <span style="color: #800000;">var </span>items = format.items;   <span style="color: #008000;">// retrieve list of items in record format</span>
  <span style="color: #993300;"><strong>for</strong> </span>(<span style="color: #993300;"><strong>var</strong> </span>i = 0; i &lt; items.length; i++) {  <span style="color: #008000;">// loop through items
</span>    <span style="color: #993300;"><strong>var</strong> </span>item = items[i];    <span style="color: #008000;">// get individual item for simplicity</span>
    <span style="color: #800080;"><span style="color: #993300;"><strong>if</strong> </span></span>(item["<span style="color: #0000ff;">field type</span>"] == "<span style="color: #0000ff;">output field</span>" &amp;&amp;
            item["<span style="color: #0000ff;">value</span>"] == "<span style="color: #0000ff;">?</span>" &amp;&amp; !isSubfile ) {  <span style="color: #008000;">// check for output field containing the desired prompt flag</span>

<span style="color: #993300;"><strong>       var</strong> </span>constRow = Number(item["<span style="color: #0000ff;">cursor row</span>"]);   <span style="color: #008000;">// retrieving row and column position of flag </span>
<strong>       <span style="color: #993300;">var</span></strong> constCol = Number(item["<span style="color: #0000ff;">cursor column</span>"]);
<strong>       </strong><span style="color: #993300;"><strong>if</strong> </span>(isNaN(constRow) || isNaN(constCol)) <span style="color: #993300;"><strong>continue</strong></span>; <span style="color: #008000;"> // ignore if no row or column
</span>    <span style="color: #993300;"><strong>var</strong> </span>inputItem = <span style="color: #993300;"><strong>null</strong></span>;
<strong>        </strong><span style="color: #993300;"><strong>var</strong> </span>inputCol = 0; <strong>     </strong><span style="color: #008000;">// setup temp variables for search
</span><span style="color: #008000;"><span style="color: #993300;"><strong>        for</strong> </span></span>(<span style="color: #993300;"><strong>var</strong> </span>j = 0; j &lt; items.length; j++) {   <span style="color: #008000;">// loop through all items looking for text box before flag
</span>    <span style="color: #993300;"><strong>var</strong> </span>searchItem = items[j];
    <span style="color: #993300;"><strong>if</strong> </span>(searchItem["f<span style="color: #0000ff;">ield type</span>"] != "<span style="color: #0000ff;">textbox</span>") <span style="color: #993300;"><strong>continue</strong></span>; <span style="color: #008000;">// must be a text box
</span><span style="color: #993300;"><strong>       var</strong> </span>row = Number(searchItem["<span style="color: #0000ff;">cursor row</span>"]);
    <span style="color: #993300;"><strong>var</strong> </span>col = Number(searchItem["<span style="color: #0000ff;">cursor column</span>"]);
    <span style="color: #993300;"><strong>if</strong> </span>(row != constRow) <span style="color: #993300;"><strong>continue</strong></span>;    <span style="color: #008000;">// must be same row
</span><span style="color: #993300;"><strong>         if</strong> </span>(col &gt; constCol) <span style="color: #993300;"><strong>continue</strong></span>;    <span style="color: #008000;">// column must be before flag</span>
    <span style="color: #993300;"><strong>if</strong> </span>(col &lt; inputCol) <span style="color: #993300;"><strong>continue</strong></span>;   <span style="color: #008000;">/ column must be larger than previously found textbox
</span>    inputItem = searchItem;
    inputCol = col;   <span style="color: #008000;">// if passed checks above, store Item and column</span>
       }
    <span style="color: #993300;"><strong>if</strong></span> (inputItem != <span style="color: #993300;"><strong>null</strong></span>) { <span style="color: #008000;">    // if a suitable textbox is found</span>
    item["<span style="color: #0000ff;">field type</span>"] = "<span style="color: #0000ff;">image</span>";   <span style="color: #008000;">// change to image and set properties</span>
   item["<span style="color: #0000ff;">image source</span>"] = "<span style="color: #0000ff;">/profoundui/proddata/images/icons/search.png</span>";
<strong><strong>  <span style="color: #993300;">var</span></strong> </strong>leftPosition = parseInt(item["<span style="color: #0000ff;">left</span>"]<strong>,</strong> 10) ;     <span style="color: #008000;">// adjust position slightly so image not too close</span>
   item["<span style="color: #0000ff;">left</span>"] = (leftPosition + 5) + "<span style="color: #0000ff;">px</span>" ;
   item["<span style="color: #0000ff;">onclick</span>"] = "<span style="color: #0000ff;">getObj(\"</span>" + inputItem["<span style="color: #0000ff;">id</span>"] + "<span style="color: #0000ff;">\").focus();\npui.click(\"btnCF04\");</span>";  <span style="color: #008000;">// build onclick js</span>
           }
         }
   }
},

This example is a bit more involved than our previous examples. I attempted to comment the code so that it is understandable, but I will hit the highlights here. As in previous examples, the code loops through all the elements in the record format using the format.items array. It check each field to see if it is the flag. If so, it starts a new loop through the elements to find the textbox that is immediately before the flag. Once found, it changes the field type of the flag to an image and sets the location of the image to be used. It adjusts the position of the image slightly to allow room. And then it dynamically builds the JavaScript code for the images onclick event.

In my next post, I will demonstrate how to set up a list of constants to search for in the record format and how to create drop downs based on those constants.