1

I have a requirement: I need to add descriptive texts for Radio Buttons as shown below.

mock up

Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
Venkatesh Machineni
  • 449
  • 5
  • 13

1 Answers1

1

It's currently not possible to add such a description under the text of sap.m.RadioButton. However (same as this answer), you can achieve similar behavior, look, and feel in the following combination:

  • Use sap.m.List with

    mode="SingleSelectLeft"
backgroundDesign="Transparent"
showSeparators="None"

  • In its items aggregation, use a subclass of ListItemBase that supports description / info. Use CustomListItem if nothing suites.

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/m/List",
  "sap/m/StandardListItem", // or ObjectListItem, CustomListItem, etc..
], (List, StandardListItem) => new List({
  mode: "SingleSelectLeft", // displays radio buttons.
  showSeparators: "None", // between items
  backgroundDesign: "Transparent",
  includeItemInSelection: true,
  width: "19rem",
}).addItem(new StandardListItem({
  title: "Others",
  description: "3rd Party Vendor Lis",
})).placeAt("content")));
<script src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" id="sap-ui-bootstrap"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-preload="async"
  data-sap-ui-theme="sap_belize"
  data-sap-ui-xx-waitForTheme="true"
></script><body class="sapUiBody sapUiSizeCompact" id="content"></body>
Boghyon Hoffmann
  • 17,103
  • 12
  • 72
  • 170
  • @BoghyonHoffmann would it be possible to combine 2 different modes in a List, say I want SingleSelectLeft as well as Delete at the same time – Ren Jul 12 '19 at 13:14
  • 1
    @Ren Unfortunately no. You'll have to either switch to the `Delete` mode or use `CustomListItem` with `SingleSelectLeft` and a dedicated button for deletion. – Boghyon Hoffmann Jul 12 '19 at 13:26