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.)

Today, I want to talk more about the “add enhancements” property of a conversion theme. This property is used to provide your own custom JavaScript function that will run during the conversion process. 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. Our previous example looked like this:

<span style="color: #0000ff;">"add enhancements"</span>: <strong><span style="color: #800000;">function</span></strong>(format, isSubfile, isWindow) {

  <span style="color: #800000;"><strong>var</strong></span> items = format.items;
  <strong><span style="color: #800000;">for</span> </strong>(var i = 0; i &lt; items.length; i++) {

      <strong><span style="color: #800000;">var</span> </strong>item = items[i]

      <span style="color: #800000;"><strong>if</strong></span> (item[<span style="color: #0000ff;">"field type"</span>] == <span style="color: #0000ff;">"textbox"</span> &amp;&amp; <strong><span style="color: #800000;">typeof</span></strong> item
      [<span style="color: #0000ff;">"value"</span>] == <span style="color: #0000ff;">"object"</span> &amp;&amp; item[<span style="color: #0000ff;">"value"</span>][<span style="color: #0000ff;">"dataType"</span>]
      == <span style="color: #0000ff;">"date"</span>) {

        <span style="color: #000000;">item</span>[<span style="color: #0000ff;">"field type"</span>] = <span style="color: #0000ff;">"date field"</span>; item
        [<span style="color: #0000ff;">"width"</span>] = <span style="color: #0000ff;">"95px"</span>;
        item[<span style="color: #0000ff;">"value"</span>][<span style="color: #0000ff;">"dateFormat"</span>] = <span style="color: #0000ff;">"m/d/Y"</span>;

      }
    }
  },

This example retrieves the list of “items” from the record format object and then loops through them. Then it determines if the item is a textbox bound to a date field. If so, it applies properties to transform the textbox into a date field widget. The code is actually pretty simple if you are familiar with JavaScript.

Let’s say that you are using one of the options to detect subfile options during conversion. In that case, the subfile options (“2=Exit 5=Display” for example) will be hidden and a dropdown or context menu will be added to the grid to replace them. Let’s also assume that your screens all have the text “Select Option and Press Enter” above the subfiles. This text doesn’t really make sense in the new GUI version of your display. You could go through each program and remove that text manually, but that could be a ton of work. Wouldn’t it be easier if you could just hide it during conversion? Well we can pretty easily in our “add enhancements” function. The new function would be as follows:

<span style="color: #0000ff;">"add enhancements"</span>: <strong><span style="color: #800000;">function</span></strong>(format, isSubfile, isWindow) {

  <span style="color: #800000;"><strong>var</strong> </span>items = format.items;
  <span style="color: #800000;"><strong>for</strong> </span>(<span style="color: #800000;"><strong>var</strong></span> i = 0; i &lt; items.length; i++) {

    <span style="color: #800000;"><strong>var</strong> </span>item = items[i];

      <span style="color: #800000;"><strong>if</strong></span> (item[<span style="color: #0000ff;">"field type"</span>] == <span style="color: #0000ff;">"textbox"</span> &amp;&amp; <span style="color: #800000;"><strong>typeof</strong></span> item
      [<span style="color: #0000ff;">"value"</span>] == <span style="color: #0000ff;">"object"</span> &amp;&amp; item[<span style="color: #0000ff;">"value"</span>][<span style="color: #0000ff;">"dataType"</span>]
      == <span style="color: #0000ff;">"date"</span>) {

        <span style="color: #000000;">item</span>[<span style="color: #0000ff;">"field type"</span>] = <span style="color: #0000ff;">"date field"</span>;
        item [<span style="color: #0000ff;">"width"</span>] = <span style="color: #0000ff;">"95px"</span>;
        item[<span style="color: #0000ff;">"value"</span>][<span style="color: #0000ff;">"dateFormat"</span>] = <span style="color: #0000ff;">"m/d/Y"</span>;

      }

      <strong><span style="color: #993300;">if</span></strong> (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;">"Select Option and Press Enter"</span>) {
        item[<span style="color: #0000ff;">"visibility"</span>] = <span style="color: #0000ff;">"hidden"</span> ;
      }
    }
  },

You will notice after our date check, we have another condition that will be evaluated on each screen element during conversion. So we are checking to see if the element is an output field and if its value is equal to our “Select Option and Press Enter” text we want to eliminate. If it is, we are just setting the visibility property of the output field widget to “hidden”. Of course the output field is still added to the display file record, it just won’t be visible at runtime.

You can have as many conditions as you would like inside the for loop in order to make transformations to converted elements. In my next post, I will show you how to modify elements based on constants on the screen.