Enhancing MT user experience with JavaScript; Part 2

Version 2
    Share:|

    This is the second part of a series dedicated to demonstrate how JavaScript can be used to enhance user experience on AR System forms. Provided examples are all designed for MidTier 7.6.04 or 8.0.0.

     

    In the first part, we saw how to call a JS function from active link, how to call active links from a JS function, and then how we could use that to provide a simple client-side form validation.

     

    Binding extra event handlers to fields

     

    Active links can be set to be executed on return, gain/loose focus, menu select ... It already covers a lot of usual needs.

    Now, with what we saw in the first part, we have all we need to add more events.

     

    For example, the "run process" command below adds a handler function for the "onkeyup" event of the field 700000002, which calls "TheGuideName" guide :

     

    javascript document.getElementById('arid_WIN_0_700000002').onkeyup=function(){ arInvokeGuide(0,"$SERVER$","TheGuideName");}
    

     

    This list of events you can handle is on the w3c page for scripts.

     

     

    Second example : on-the-fly regular expression validator

     

    Let's use this to create a better client-side validation.

    We want the validation to be done as the user types. It shouldn't display any indicator if the tested value is null. Oh, and the users like round corners and shadows.

    _TUT_JavaScript2.png

    Yay, that looks better !

    You will find the .def attached to this document. Simply import it and open the "_TUT:JavaScript2" form.

     

    So, how does it work ?

     

    Remember the "checkValue" function we defined in the web header view in the first part of this document ?

    Let's change it just a little, to get the tested value back into an AR System field.

     

    <SCRIPT LANGUAGE="JavaScript">
        function checkValue(value,options,regexp,server,positiveGuide,negativeGuide) {
          parent.F(700000005).S((new CharType(value)));
          if (regexp != "") {
                var re = new RegExp(regexp,options);
                if (!value.match(re)) {
                    arInvokeGuide(0,server,negativeGuide);
                    return;
                }
            }
            arInvokeGuide(0,server,positiveGuide);
            return;
        }
    </SCRIPT>
    

     

    Why do we want the value back ?

    First, because it demonstrates how you can set a field from JS.

    Simply setting the <field selector>.value with JS won't do because the MT keeps a record of fields and their values. You need to call the "S" function to update it.

    Second, because if you don't, you won't be able to check if the value is null or not (just test it ).

     

    To make it look a little prettier than the standard AR System forms, the field is customized via CSS, still in the web header content property of the view :

     

    <STYLE type="text/css">
        textarea#arid_WIN_0_700000002:focus {
             border: 1px solid #09C;
        }
        textarea#arid_WIN_0_700000002 {
             -webkit-border-radius: 5px;
             -webkit-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
             -moz-border-radius: 5px;
             -moz-box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
             box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3);
             border-radius: 5px;
             border: 1p solid #999;
        }
        label#label700000002 {
             font-family: Tahoma, Geneva, sans-serif;
        }
    </STYLE>
    

     

     

    The checkValue function is called when the "onkeyup" occurs. To do it, we execute this javascript in a "Run Process" action, when you select the field format in the menu.

     

    javascript document.getElementById('arid_WIN_0_700000002').onkeyup=function(){ checkValue(this.value,"i","$RegExp$","$SERVER$","_TUT:JavaScript2_ResultOK","_TUT:JavaScript2_ResultKO");}
    

     

    It says, Ok get me the field 700000002. It has a "onkeyup" property. Assign it with a value that happens to be a function (that's a fun thing in JS). The function calls "checkValue". The first parameter is the value of the field it's attached to.

     

     

     

    The downside

    As you see, we can do a lot of things if we start to put a little JS in our AR System forms.

    BUT

    - it requires non-Remedy skills to maintain

    - your code is expecting very specific things from the HTML generated by the MidTier : the ID for the fields, the F & S functions, arInvokeGuide, ... They all could be dropped in the next MT version

    - the documenting programs like ARInside won't know about your JavaScript, just like when you execute Direct SQL commands