fiori SAP ui5 动态改变控件颜色

使用CustomData动态改变控件颜色

有时候我们需要改变控件颜色，对于高度封装的控件，显然改变控件CSS是比较困难的，幸好SAP UI5预设了一个customData的属性，每个控件都能使用她。

如下代码是判断汇率是否有改变，如果改变了，那么改变Input的颜色。
使用CustomData属性之后，对应的控件渲染后，控件属性会自动生成data-****属性，我们可以根据该属性操作css。

代码如下：
当Ukurs 不等于 UkursOld时自动改变控件颜色为红色。需要注意必须使用writeToDom=true
xx.view.xml

<t:Column hAlign="Center" width="9rem">
    <m:Label required="true" text="汇率" />
    <t:template>
        <m:Input required="true" value="{path: 'globalModel>Ukurs'}" >
            <m:customData>
                <core:CustomData key="diff" value="{= Number(${globalModel>Ukurs}) === Number(${globalModel>UkursOld}) ? '' : 'R' }" writeToDom="true"/>
            </m:customData>    
        </m:Input>
    </t:template>
</t:Column>

stype.css
注意data-key

[data-diff="R"] input{
    color: #bb0000;
}