How to set text fields to 'required' then highlight all in a Maximo Anywhere app

Question

This is more a how to. I figured it out and decided to share as I could find no other doco on it anywhere. This will iterate through all required fields, highlight empty ones and remove highlighting from fields that have been filled in. It will set focus on the first empty field it finds. NB: Focus will be lost as soon as the view is left or a popup dialog is shown, so any "throw new PlatformRuntimeWarning('blah’);” statement directly following this new code should be removed.

Handler code:

define("application/handlers/WhatEverHandler", 
[ …
 "dojo/query",
 "dojo/dom",
 "dojo/dom-style",
…],
 function(…query, dom, domStyle, …) 
workLog.getRuntimeFieldMetadata('reading').set('required',true);
workLog.getRuntimeFieldMetadata('reading1’).set('required',true);
…
var mainNode = dom.byId("body");
var nodes = query(".requiredText", mainNode);
var firstemptynode = true;
for (var nodecount = 0; nodecount < nodes.length; nodecount++) {
    if (nodes[nodecount].value === ""){
        domStyle.set(nodes[nodecount], "borderBottom", "10px solid red");
        domStyle.set(nodes[nodecount], "background-color", "rgba(240, 147, 153, 0.5”);
        if (firstemptynode){
            nodes[nodecount].focus();
            firstemptynode = false;
        };
    }else{
        domStyle.set(nodes[nodecount], "borderBottom", "");
        domStyle.set(nodes[nodecount], "background-color", "");
    };
};

If the field has no label in app.xml then you cannot set it to required to as the attribute is undefined. Instead you can define an empty cssClass on the text item in app.xml of the attribute you want to make required, and search for that class in the query instead of "requiredText", e.g.

artifact/app.xml:

<text cssClass="myReqTextBox" editable="true" placeHolder="Please Enter" id="WorkExecution.WorkDetailView_workOrder_groupitem_inst_Install4" resourceAttribute="reading" layoutInsertAt="itemReading1”/>

common/css/mdpi.css:

.myReqTextBox {
}

Then in the code remove the

workLog.getRuntimeFieldMetadata(‘<attribute>').set('required',true); 

lines and update the dom nodes query to

 var nodes = query(“.myReqTextBox", mainNode);

Of course if you wanted to apply some non dynamic styles you could set them statically in this class.

Answer 1

This is a working solution - comments/experience appreciated though.