CODEWITHSUNDEEP
sapui5
Luca Campo Dall'Orto
Luca Campo Dall'Orto

Reputation: 1

InteractiveBarChart: how to bind model data?

I can't find any example about binding a JSON model to the control sap.suite.ui.microchart.InteractiveBarChart in an XML view.

My view is the following:

<mc:InteractiveBarChart xmlns:mc="sap.suite.ui.microchart"
  labelWidth="25%"
  bindBars="{/}"
>
  <mc:bars>
    <mc:InteractiveBarChartBar label="{key}" value="{value}" />
  </mc:bars>
</mc:InteractiveBarChart>

I've to bind the InteractiveBarChart to my model. An array is set in the controller. By API reference, I've to use bindBars method, but I can't make it work.

Upvotes: -1

Views: 607

Answers (1)

Andrew Naumovich
Andrew Naumovich

Reputation: 1450

Any control in UI5 has the same concepts of data binding: property and aggregation bindings.

If control is aimed to show multiple things (i.e. table or list), it will have the so called aggregation.

In InteractiveBarChart control there is an aggregation "bars".

Any control can be bound against model via the unified binding syntax.

  • For programmatic binding is the following template: "bind{NAME OF AGGREGATION}". So in this case it will be "bindBars" method, which takes the same list of arguments as any aggregation binding;
  • For declaration binding in XML, you have to do 2 things:
    1. tell the control about data source. In your case you should set the control's property with the name of aggregation "bars" to the binding string "{/}", in case you store the raw array in the root property of a default model (i.e. model without name)
    2. define a template, which will be used as a basis of creation of a list of bars (you've already done it correctly)

Upvotes: 1

Related Questions