sap UI5头像图标问题

Question

附加图像。

我正在使用阿凡达图标，并基于状态，我试图改变颜色和值。但它仅限于“重音1-10”，不能放置任何其他颜色，如何放置其他颜色，如黄色，白色和黑色等？另外，如果字符串为空，如何删除图标。

<Avatar id="idAvatar" initials="{parts : [ 'sonarMetrics>state_value'], formatter: '.formatter.formatNumeric'}" displaySize="XS"
                                                    backgroundColor="{parts : [ 'sonarMetrics>state_value'], formatter: '.formatter.formatIconColor'}"/>

格式化程序代码，以及如果我使用‘黄色’代替Accent8等，我如何得到错误。请建议。

formatIconColor: function (bms) {
        debugger;
        switch (bms) {
        case "5.0":
            return "Accent8";
            break;
        case "4.0":
            return "Accent1";
            break;
        case "3.0":
            return "Accent3";
            break;
        case "2.0":
            return "Accent2";
            break;
            case "1.0":
            return "Accent2";
            break;
            case "":
            return "Accent10";
            break;

        }
    },

因为，我正在使用自定义列表，我如何从不包含值的列表项中删除图标。通过遍历更新完成()的列表，我如何才能只删除图标(在上图中突出显示)，并希望其他元素按原样存在:意味着不删除整个项目，而只删除图标元素。

formatNumeric: function (bms) {
    debugger;
        switch (bms) {
        case "5.0":
            return "A";
            break;
        case "4.0":
            return "B";
            break;
        case "3.0":
            return "C";
            break;
        case "2.0":
            return "D";
            break;
            case "1.0":
            return "E";
            break;
            case "":
            return "O";
            break;

        }
    },

我正在使用自定义列表项。

<VBox>
                <List id="sonarRepId" items="{ path: 'sonarMetrics>/measures' }" updateFinished="onUpdateFinished">
                    <items>
                        <CustomListItem id="idSonarList">
                            <FlexBox id="idFlex" alignItems="Start" justifyContent="SpaceBetween" class="sapUiSmallMarginBeginEnd" height="88px">
                                <items>
                                    <VBox class="sapUiSmallMarginTop">
                                        <!--<ObjectIdentifier title="{sonarReport>value}"/>-->
                                        <Link text="{sonarMetrics>value}" press="handlePress" class="sonarsapMLnk"/>
                                        <HBox class="sapUiSmallMarginTopBottom">
                                            <core:Icon size="2rem" class="sonarsapMObjLIcon" src="{sonarMetrics>imageL}"/>
                                            <Label text="{sonarMetrics>name}" class="sapUiTinyMarginBegin"/>
                                        </HBox>
                                        <layoutData>
                                            <FlexItemData growFactor="2"/>
                                        </layoutData>
                                    </VBox>
                                    <HBox id="idHbox" class="sapUiSmallMarginTop">
                                        <items>
                                            <HBox class="sapUiSmallMarginTop">
                                                <Link id="idLinkState" text="{sonarMetrics>state}" press="stateHandlePress" class="sapUiTinyMarginEnd"/>
                                                <Avatar id="idAvatar" initials="{parts : [ 'sonarMetrics>state_value'], formatter: '.formatter.formatNumeric'}" displaySize="XS"
                                                    backgroundColor="{parts : [ 'sonarMetrics>state_value'], formatter: '.formatter.formatIconColor'}"/>
                                            </HBox>
                                        </items>
                                    </HBox>
                                </items>
                            </FlexBox>
                        </CustomListItem>
                    </items>
                </List>
            </VBox>

Answer 1

在格式化函数中，你将拥有"this“引用中的控件。你可以使用"this“来隐藏你的控件，添加一个新的颜色和setBackgroundColor。

格式化程序-

formatNumeric: function (bms) {
        switch (bms) {
        case "5.0":
            this.setBackgroundColor("Accent8");
            return "A";
        case "4.0":
            this.setBackgroundColor("Accent10");
            return "B";
        case "3.0":
            this.setBackgroundColor("Accent6");
            return "C";
        case "2.0":
            this.setBackgroundColor("Accent5");
            return "D";
        case "1.0":
            this.addStyleClass("yellow");
            return "E";
        case "":
        default:
            this.addStyleClass("hidden");
            return "O";
        }
    },

CSS -

.yellow {
    background: yellow;
}

.hidden {
    display: none;
}

隐藏控件的另一种更好的方法是使用表达式绑定

<VBox items="{oMasterModel>/items}">
    <Avatar visible="{= !!${oMasterModel>state_value}}"
            initials="{parts : [ 'oMasterModel>state_value'], formatter: 'com.TestIconTabBinding.util.formatter.formatNumeric'}" displaySize="XS"/>
</VBox>