Maximo Anywhere - Dynamically changing CSS class of element

Question

As the title suggests, I'm wondering whether or not it's possible using javascript in the Maximo Anywhere apps to dynamically change the CSS class of an element defined in the app.xml file like below:

<text cssClass="relatedRecords"/>

After my method has run I would like the text element to belong to a different CSS class:

<text cssClass="boldRelatedRecords"/>

Of course the app.xml is not actually updated as above, but I thought it better illustrates what it is I want to achieve. It feels like this should be an easy thing to do, but I haven't been able to figure out how to do it. Has anyone managed to accomplish this?

Thankful for any suggestions.

Answer 1

I was working a few weeks ago on this exact requirement.

Here's the event handler I used, on the render of the element, with some bonus logic to set the class if the date in the field on the LOCATE Prereq has expired:

hideForNonLocatePrereq: function(eventContext) {

                var prereqType='LOCATE';
                var wo = eventContext.application.getResource('workOrder').getCurrentRecord();
                var prereq = wo.getLoadedModelDataSetOrNull('tasklist');

                prereq.filter("plusdprereqtype == $1", prereqType);

                if(prereq.count()>0){                   
                    var expDate = prereq.data[0].getAsDateOrNull("zxqexpirationdate");

                    if(expDate==null){                      
                        eventContext.setDisplay(false);                     
                    }else{                  
                        wo.setDateValue('localzxqexpirationdate', expDate);
                        if (expDate < this.application.getCurrentDateTime()) {
                            eventContext.textWidget.domNode.className+= ' errorIndicator';
                        }

                    }}

                else{                   
                    eventContext.setDisplay(false)
                }

    },

In the app.xml I tied that function to the render of the field in the following way:

<container id="WorkExecution.WorkDetialView_container_102_added_exp" resource="workOrder">
                <group id="WorkExecution.WorkDetailView_group_12_prereq">
                    <groupitem id="WorkExecution.WorkDetailView_group_12_prereq_2" layout="WorkOrderDetails3x3x3x3">
                        <text editable="false" id="WorkExecution.WorkDetailView_workOrder_groupitem_expdate" label="Locates Expiration Date" layoutInsertAt="item1" resourceAttribute="localzxqexpirationdate">
                            <eventHandlers id="WorkExecution.WorkDetailView_workOrder_groupitem_expdate_eventHandlers">
                                <eventHandler class="application.handlers.WODetailHandler" event="render" id="WorkExecution.WorkDetailView_workOrder_groupitem_expdate_eventHandlers_render" method="hideForNonLocatePrereq"/>
                            </eventHandlers>
                        </text>
                    </groupitem>
                </group>
            </container>

Another strategy we used the .errorIndicator class and overrode the validation in View.JS to allow there to be that class in the view. We just return true to navigate away from the screen. Then just set the field metatdata for required and if it isn't filled out it'll set the class dynamically.
multiAssetLoc.getRuntimeFieldMetadata('zxqfail').set('required', true);

The third way was a bit hacky, but it involved re-setting the CSS on the dom element, then refreshing the view. We moved away from that because it required an update on the UI in order for it to take place.