Control for displaying level of cost with currency signs

问题

This might be an opinionated question, but I'd like to ask it because capabilities of UI5 are quite broad. I need to have these elements as

To which I am planning to introduce a custom font. Do you think it's a good solution or is there any better way to do that with some out of the box solutions?

回答1:

What you're looking for is sap.m.RatingIndicator.

<RatingIndicator
  editable="false"
  maxValue="6"
  value="4"
  iconSelected="imageOrIconURI1"
  iconUnselected="imageOrIconURI2"
/>

API reference
Samples

In your case, you'll need two images: one for the cash / currency symbol, and one greyed-out version of it. Both URIs should be assigned to iconSelected and iconUnselected accordingly.

Here is my attempt:

sap.ui.require([
  "sap/ui/core/Core"
], Core => Core.attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/theming/Parameters",
], async (Fragment, JSONModel, ThemeParameters) => {
  "use strict";

  const control = await Fragment.load({
    definition: `<form:SimpleForm xmlns:form="sap.ui.layout.form" xmlns="sap.m">
      <Label text="Cost A" />
      <RatingIndicator
        displayOnly="true"
        editable="false"
        maxValue="6"
        value="4"
        iconSelected="{myCurrency>/filled}"
        iconUnselected="{myCurrency>/unfilled}"
      />
      <Label text="Cost B" />
      <RatingIndicator
        displayOnly="true"
        editable="false"
        maxValue="6"
        value="2"
        iconSelected="{myCurrency>/filled}"
        iconUnselected="{myCurrency>/unfilled}"
      />
    </form:SimpleForm>`,
  });

  //==================================================================
  //============= Sample rating indicator icons ======================

  const currencyCode = "€";
  // determine theme-dependent color values for font colors:
  const colorFilled = ThemeParameters.get("sapUiContentForegroundTextColor").replace("#", "%23");
  const colorUnfilled = ThemeParameters.get("sapUiContentImagePlaceholderBackground").replace("#", "%23");
  const model = new JSONModel({ // assign the icon URIs, e.g. data-URI with SVG content:
    filled: `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg'
      viewBox='0 0 14 14'>
      <text x='50%' y='66%'
        fill='${colorFilled}'
        dominant-baseline='middle'
        text-anchor='middle'>
        ${currencyCode}
      </text>
    </svg>`,
    unfilled: `data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'>
      <text x='50%' y='66%'
        fill='${colorUnfilled}'
        dominant-baseline='middle'
        text-anchor='middle'>
        ${currencyCode}
      </text>
    </svg>`,
  });
  
  control.setModel(model, "myCurrency").placeAt("content");
})));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m, sap.ui.layout"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

Since I put a plain text character to the SVG, the "image" is zoomable without losing quality and the color can be also made theme-dependent as shown above. But of course, you can also just use two raster images instead.

Either way, I believe the RatingIndicator is a good candidate which could be used instead of creating and maintaining a custom control or custom font.

来源：https://stackoverflow.com/questions/62406782/control-for-displaying-level-of-cost-with-currency-signs

标签

sap

sapui5