How to add multiple control inside the content of sap.m.TileContent?

Question

Below code is working fine for single control inside sap.m.TileContent

var oTile = new sap.m.GenericTile({
                            header: oData.results[i].Name,
                            subheader: oData.results[i].ModuleName,
                            size: "Auto",
                            frameType: "OneByOne",
                            press: [that.handleTilePress, that],
                            tileContent: [new sap.m.TileContent({
                                size: "Auto",
                                footer: oData.results[i].Num.toLocaleString() + " views",
                                content: [new sap.m.NumericContent({
                                    size: "Auto",
                                    nullifyValue: false,
                                    icon: "sap-icon://"+oData.results[i].tileIcon
                                })]
                            })]
                        });

But when I tried to add one more control to sap.m.TileContent, let's say sap.m.Label inside sap.m.TileContent as below,

var oTile = new sap.m.GenericTile({
                            header: oData.results[i].Name,
                            subheader: oData.results[i].ModuleName,
                            size: "Auto",
                            frameType: "OneByOne",
                            press: [that.handleTilePress, that],
                            tileContent: [new sap.m.TileContent({
                                size: "Auto",
                                footer: oData.results[i].Num.toLocaleString() + " views",
                                content: [new sap.m.NumericContent({
                                    size: "Auto",
                                    nullifyValue: false,
                                    icon: "sap-icon://"+oData.results[i].tileIcon
                                }),
                            new sap.m.Label({text:"dummyText"})]
                            })]
                        })

It's giving me an error as "Tried to add an array of controls to a single aggregation" (Single control inside the content is working fine i.e. either the label or the numeric content)

I am looking for any other alternative except 'content' to add multiple controls or any way to add multiple control inside content without developing the custom control. How to solve this?

PS: I want to add sap.m.RatingIndicator to the tile so that I can implement the favourite functionality.

Answer 1

This is happening because content in sap.m.TileContent aggregations has the cardinality of 0..1 where 0 is the minimum cardinality, and 1 is the maximum cardinality. This means you can only have a single item inside the content property.

Following the Fiori Design Guidelines for Rating Indicator you should only use this element in forms, tables or in a dialog box. With that said, it will still work if you insert it into sap.m.TileContent like this:

<GenericTile header="Cumulative Totals" subheader="Expenses">
   <TileContent unit="Unit" footer="Footer Text">
      <content>
         <RatingIndicator id="RI_default" maxValue="5" value="4" tooltip="Rating Tooltip"/>
      </content><!-- sap.ui.core.Control -->
   </TileContent>
</GenericTile>

If you want to add other text in the tile I would suggest you use the footer and/or unit properties in sap.m.TileContent just like in my example above.

EDIT:

You can workaround the cardinality of the sap.m.TileContent aggregations by inserting a sap.m.VBox element inside your sap.m.TileContent and insert multiple elements there although I really would advise you not to do it!

Example:

<GenericTile header="Cumulative Totals" subheader="Expenses">
   <TileContent unit="Unit" footer="Footer Text">
      <content>
         <VBox>
             <RatingIndicator id="RI_default" maxValue="5" value="4"/>
             <Label text="Dummy"/>
         </VBox>
      </content>
   </TileContent>
</GenericTile>

Hope that helps!