Maximo Anywhere - 动态更改元素的 CSS class

Question

如标题所示，我想知道是否可以在 Maximo Anywhere 应用程序中使用 javascript 来动态更改在app.xml 文件如下：

<text cssClass="relatedRecords"/>

在我的方法有运行之后，我希望文本元素属于不同的 CSS class:

<text cssClass="boldRelatedRecords"/>

当然app.xml实际上并没有像上面那样更新，但我认为它更好地说明了我想要实现的目标。感觉这应该是一件很容易做的事情，但我一直没能弄清楚该怎么做。有没有人设法做到这一点？

感谢任何建议。

Answer 1

几周前我正在研究这个确切的要求。

这是我在渲染元素时使用的事件处理程序，如果 LOCATE Prereq 字段中的日期已过期，则使用一些额外的逻辑来设置 class：

hideForNonLocatePrereq: function(eventContext) {

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

                prereq.filter("plusdprereqtype == ", 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)
                }

    },

在 app.xml 中，我通过以下方式将该函数绑定到字段的呈现：

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

我们使用 .errorIndicator class 并覆盖 View.JS 中的验证的另一种策略，以允许视图中存在 class。我们只是 return true 离开屏幕。然后只需设置所需的字段元数据，如果未填写，它将动态设置 class。
multiAssetLoc.getRuntimeFieldMetadata('zxqfail').set('required', true);

第三种方法有点老套，但它涉及到重新设置 dom 元素上的 CSS，然后刷新视图。我们放弃了它，因为它需要更新 UI 才能发生。

Maximo Anywhere - 动态更改元素的 CSS class

Maximo Anywhere - Dynamically changing CSS class of element

maximo

maximo-anywhere