@openui5/sap.ui.mdc 1.121.0 → 1.122.0

package/THIRDPARTY.txt

@@ -461,7 +461,7 @@ License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt
 Contained in: lib/jsdoc/ui5/plugin.js
 
-Component: SAP Theming Base Content, version: 11.10.0
+Component: SAP Theming Base Content, version: 11.12.0
 Copyright: SAP SE or an SAP affiliate company and Theming Base Content contributors
 License: Apache-2.0
 License Text: https://github.com/SAP/openui5/blob/master/LICENSES/Apache-2.0.txt

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openui5/sap.ui.mdc",
-  "version": "1.121.0",
+  "version": "1.122.0",
   "description": "OpenUI5 UI Library sap.ui.mdc",
   "author": "SAP SE (https://www.sap.com)",
   "license": "Apache-2.0",
@@ -14,8 +14,8 @@
     "url": "https://github.com/SAP/openui5.git"
   },
   "dependencies": {
-    "@openui5/sap.m": "1.121.0",
-    "@openui5/sap.ui.core": "1.121.0",
-    "@openui5/sap.ui.layout": "1.121.0"
+    "@openui5/sap.m": "1.122.0",
+    "@openui5/sap.ui.core": "1.122.0",
+    "@openui5/sap.ui.layout": "1.122.0"
   }
 }

package/src/sap/ui/mdc/.library

@@ -6,7 +6,7 @@
 	<copyright>OpenUI5
  * (c) Copyright 2009-2024 SAP SE or an SAP affiliate company.
  * Licensed under the Apache License, Version 2.0 - see LICENSE.txt.</copyright>
-	<version>1.121.0</version>
+	<version>1.122.0</version>
 
 	<documentation>UI5 library: sap.ui.mdc</documentation>
 

package/src/sap/ui/mdc/ActionToolbar.js

@@ -33,7 +33,7 @@ sap.ui.define([
 	 * The content aggregation of the control must not be used.
 	 * @extends sap.m.OverflowToolbar
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @constructor
 	 * @since 1.58
 	 * @public

package/src/sap/ui/mdc/Chart.js

@@ -41,7 +41,7 @@ sap.ui.define([
 		SortController,
 		ChartTypeController,
 		ManagedObjectObserver,
-		Breadcrumbs,
+		DrillBreadcrumbs,
 		ActionToolbarAction,
 		coreLibrary,
 		KeyCodes,
@@ -52,7 +52,6 @@ sap.ui.define([
 	) => {
 		"use strict";
 
-		let DrillStackHandler;
 		const { TitleLevel } = coreLibrary;
 
 		/**
@@ -65,7 +64,7 @@ sap.ui.define([
 		 * <b>Note:</b> The inner chart needs to be assigned <code>ChartDelegate</code>.
 		 * @extends sap.ui.mdc.Control
 		 * @author SAP SE
-		 * @version 1.121.0
+		 * @version 1.122.0
 		 * @constructor
 		 *
 		 * @public
@@ -770,8 +769,30 @@ sap.ui.define([
 		Chart.prototype._createBreadcrumbs = function() {
 			let _oBreadcrumbs = this.getAggregation("_breadcrumbs");
 			if (!_oBreadcrumbs && !this._bIsDestroyed) {
-				_oBreadcrumbs = new Breadcrumbs(this.getId() + "--breadcrumbs");
-				_oBreadcrumbs.updateDrillBreadcrumbs(this, this.getControlDelegate().getDrillableItems(this));
+				_oBreadcrumbs = new DrillBreadcrumbs(this.getId() + "--breadcrumbs", {
+					linkPressed: function(oEvent) {
+						const index = oEvent.getParameter("index");
+
+						// get drill-path which was drilled-up and needs to be removed from mdc chart
+						const aCurrentDrillStack = this.getControlDelegate().getDrillableItems(this);
+						const aDrilledItems = aCurrentDrillStack.slice(index + 1);
+						const aFlexItemChanges = aDrilledItems.map((oDrillItem) => {
+							return {
+								name: oDrillItem.getPropertyKey(),
+								visible: false
+							};
+						});
+
+						this.getEngine().createChanges({
+							control: this,
+							key: "Item",
+							state: aFlexItemChanges
+						});
+
+					}.bind(this)
+				});
+				const aItems = this.getControlDelegate().getDrillableItems(this).map(function(oItem) { return { key: oItem.getPropertyKey(), text: oItem.getLabel() }; });
+				_oBreadcrumbs.update(aItems);
 				this.setAggregation("_breadcrumbs", _oBreadcrumbs);
 			}
 		};
@@ -854,7 +875,8 @@ sap.ui.define([
 			this._rebind();
 
 			//Update the breadcrumbs after an MDC Item change
-			this.getAggregation("_breadcrumbs").updateDrillBreadcrumbs(this, this.getControlDelegate().getDrillableItems(this));
+			const aItems = this.getControlDelegate().getDrillableItems(this).map(function(oItem) { return { key: oItem.getPropertyKey(), text: oItem.getLabel() }; });
+			this.getAggregation("_breadcrumbs").update(aItems);
 		};
 
 		/**
@@ -1072,48 +1094,6 @@ sap.ui.define([
 			Control.prototype.destroy.apply(this, arguments);
 		};
 
-		/**
-		 * Shows the drill-down popover for selection a dimension to drill down to.
-		 *
-		 * @param {sap.m.Button} oDrillBtn reference to the drill down button for loacation of the popover
-		 * @returns {Promise} show dril stack promise
-		 *
-		 * @private
-		 */
-		Chart.prototype._showDrillDown = function(oDrillBtn) {
-			if (!this.oDrillPopover) {
-				if (DrillStackHandler) {
-
-					this.oDrillPopover = DrillStackHandler.createDrillDownPopover(this);
-					this.oDrillPopover.attachAfterClose(() => {
-						delete this.oDrillPopover;
-					});
-
-					return DrillStackHandler.showDrillDownPopover(this, oDrillBtn);
-				}
-
-				return new Promise((resolve, reject) => {
-					sap.ui.require([
-						"sap/ui/mdc/chart/DrillStackHandler"
-					], (DrillStackHandlerLoaded) => {
-						DrillStackHandler = DrillStackHandlerLoaded;
-
-						this.oDrillPopover = DrillStackHandler.createDrillDownPopover(this);
-						this.oDrillPopover.attachAfterClose(() => {
-							delete this.oDrillPopover;
-						});
-
-						DrillStackHandler.showDrillDownPopover(this, oDrillBtn)
-							.then((oDrillDownPopover) => {
-								resolve(oDrillDownPopover);
-							});
-					});
-				});
-			} else if (this.oDrillPopover) {
-				this.oDrillPopover.close();
-			}
-		};
-
 		/**
 		 * If some properties are set on the MDC chart while the inner chart is not yet initialized, they need to eb set after initialaization.
 		 * This methods gets called after inner chart is ready and takes care of that
@@ -1160,6 +1140,14 @@ sap.ui.define([
 		Chart.prototype.setChartType = function(sChartType) {
 			this.setProperty("chartType", sChartType);
 
+			const oToolbar = this.getAggregation("_toolbar");
+			if (oToolbar?._oChartTypeBtn) {
+				oToolbar._oChartTypeBtn.setSelectedItemKey(sChartType);
+				const oChartTypeInfo = this.getChartTypeInfo();
+				oToolbar._oChartTypeBtn.setTooltip(oChartTypeInfo.text);
+				oToolbar._oChartTypeBtn.setIcon(oChartTypeInfo.icon);
+			}
+
 			try {
 				this.getControlDelegate().setChartType(this, sChartType);
 			} catch (e) {

package/src/sap/ui/mdc/Control.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Control
 	 * @abstract
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @alias sap.ui.mdc.Control
 	 *
 	 * @borrows sap.ui.mdc.mixin.DelegateMixin.awaitControlDelegate as #awaitControlDelegate

package/src/sap/ui/mdc/DefaultTypeMap.js

@@ -28,7 +28,7 @@ sap.ui.define([
 	 * </ul>
 	 *
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @public
 	 * @since 1.114.0
 	 * @namespace

package/src/sap/ui/mdc/Element.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * @extends sap.ui.core.Element
 	 * @abstract
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @alias sap.ui.mdc.Element
 	 *
 	 * @borrows sap.ui.mdc.mixin.DelegateMixin.awaitControlDelegate as #awaitControlDelegate

package/src/sap/ui/mdc/Field.js

@@ -54,11 +54,11 @@ sap.ui.define([
 	 * @implements sap.ui.core.IFormContent, sap.ui.core.ISemanticFormContent, sap.m.IOverflowToolbarContent
 	 *
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 *
 	 * @constructor
 	 * @alias sap.ui.mdc.Field
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @since 1.54.0
 	 *
 	 * @public

package/src/sap/ui/mdc/FilterBar.js

@@ -45,7 +45,7 @@ sap.ui.define([
 	 * The metadata information is provided via the {@link module:sap/ui/mdc/FilterBarDelegate FilterBarDelegate} implementation. This implementation has to be provided by the application.
 	 * @extends sap.ui.mdc.filterbar.FilterBarBase
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @constructor
 	 * @public
 	 * @since 1.61.0

package/src/sap/ui/mdc/FilterField.js

@@ -53,11 +53,11 @@ sap.ui.define([
 	 * @implements sap.ui.core.IFormContent, sap.ui.core.ISemanticFormContent, sap.m.IOverflowToolbarContent
 	 *
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 *
 	 * @constructor
 	 * @alias sap.ui.mdc.FilterField
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @since 1.48.0
 	 *
 	 * @public

package/src/sap/ui/mdc/Link.js

@@ -71,7 +71,7 @@ sap.ui.define([
 	 * @extends sap.ui.mdc.field.FieldInfoBase
 	 *
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 *
 	 * @constructor
 	 * @alias sap.ui.mdc.Link
@@ -155,17 +155,21 @@ sap.ui.define([
 		this._oUseDelegateItemsPromise = undefined;
 		this._oUseDelegateAdditionalContentPromise = undefined;
 
+		const fnDestroy = (vElement) => {
+			if (Array.isArray(vElement)) {
+				vElement.forEach(fnDestroy);
+			} else {
+				vElement.destroy();
+			}
+		};
+
 		if (this._aLinkItems) {
-			this._aLinkItems.forEach((oLinkItem) => {
-				oLinkItem.destroy();
-			});
+			this._aLinkItems.forEach(fnDestroy);
 			this._aLinkItems = undefined;
 		}
 
 		if (this._aAdditionalContent) {
-			this._aAdditionalContent.forEach((oLinkItem) => {
-				oLinkItem.destroy();
-			});
+			this._aAdditionalContent.forEach(fnDestroy);
 			this._aAdditionalContent = undefined;
 		}
 
@@ -312,8 +316,7 @@ sap.ui.define([
 				}
 			},
 			beforeNavigationCallback: this._beforeNavigationCallback.bind(this),
-			metadataHelperPath: "sap/ui/mdc/Link",
-			onNavigationCallback: this._onNavigationCallback.bind(this)
+			metadataHelperPath: "sap/ui/mdc/Link"
 		});
 		oPanel.setModel(new JSONModel({
 			metadata: jQuery.extend(true, [], this._getInternalModel().getProperty("/linkItems")),
@@ -336,7 +339,6 @@ sap.ui.define([
 		if (aMLinkItems.length === 1 && !aAdditionalContent.length) {
 			const bNavigate = await this._beforeNavigationCallback(oEvent);
 			if (bNavigate) {
-				this._onNavigationCallback(aMLinkItems[0]);
 				Panel.navigate(aMLinkItems[0].href);
 			}
 			return bNavigate;
@@ -635,23 +637,6 @@ sap.ui.define([
 		return Promise.resolve();
 	};
 
-	/**
-	 * Proxy function for the <code>onNavigationCallback</code> of the panel.
-	 * @private
-	 * @param {sap.m.Link|sap.ui.mdc.LinkItem} oLink <code>Link</code> control that is clicked or corresponding <code>LinkItem</code>
-	 */
-	Link.prototype._onNavigationCallback = async function(oLink) {
-		try {
-			const oDelegate = await this.awaitControlDelegate();
-			if (oDelegate.onNavigationCallback) { // currently only available on SmartLinkDelegate
-				// don't return anything as we just want to call event handlings in the <code>SmartLink</code>
-				oDelegate.onNavigationCallback(this, oLink);
-			}
-		} catch (e) {
-			SapBaseLog.error("mdc.Link _onNavigationCallback: control delegate is not set - could not load onNavigationCallback from delegate.");
-		}
-	};
-
 	// ------------------------------------- General internal methods ----------------------------------------------
 
 	/**

package/src/sap/ui/mdc/MultiValueField.js

@@ -44,7 +44,7 @@ sap.ui.define([
 	 * @constructor
 	 * @alias sap.ui.mdc.MultiValueField
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @since 1.93.0
 	 *
 	 * @public

package/src/sap/ui/mdc/Table.js

@@ -613,7 +613,7 @@ sap.ui.define([
 				 * @since 1.111
 				 */
 				propertyInfo: {
-					type: "object[]",
+					type: "object",
 					defaultValue: []
 				},
 
@@ -2599,6 +2599,8 @@ sap.ui.define([
 				if (this._oQuickActionContainer.hasQuickActions() || this._oItemContainer.hasItems()) {
 					this._oColumnHeaderMenu.openBy(oInnerColumn, true);
 					PersonalizationUtils.detectUserPersonalizationCompletion(this, this._oColumnHeaderMenu);
+				} else {
+					MTableUtil.announceEmptyColumnMenu();
 				}
 			});
 		});

package/src/sap/ui/mdc/ValueHelp.js

@@ -65,7 +65,7 @@ sap.ui.define([
 	 * and {@link sap.ui.mdc.FilterField FilterField} controls using the <code>valueHelp</code> association. One <code>ValueHelp</code> element instance can be
 	 * assigned to multiple fields (like in different table rows). It should be placed in the control tree on the container holding the fields.
 	 * @extends sap.ui.mdc.Element
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @constructor
 	 * @abstract
 	 * @public
@@ -821,6 +821,7 @@ sap.ui.define([
 	 * @property {boolean} checkKey If set, the value help checks only if there is an item with the given key. This is set to <code>false</code> if the value cannot be a valid key because of type validation.
 	 * @property {boolean} checkDescription If set, the value help checks only if there is an item with the given description. This is set to <code>false</code> if only the key is used in the field.
 	 * @property {boolean} [caseSensitive] If set, the check is done case-sensitively
+	 * @property {boolean} [exactMatch] If set, only exact matches are requested and no suggestions
 	 * @property {sap.ui.core.Control} control Instance of the calling control
 	 * @public
 	 */

package/src/sap/ui/mdc/actiontoolbar/ActionToolbarAction.js

@@ -23,7 +23,7 @@ sap.ui.define([
 	 * chart/table).
 	 * @extends sap.ui.core.Control
 	 * @author SAP SE
-	 * @version 1.121.0
+	 * @version 1.122.0
 	 * @constructor
 	 * @since 1.58
 	 * @public

package/src/sap/ui/mdc/chart/ChartImplementationContainer.js

@@ -21,7 +21,7 @@ sap.ui.define([
 		 * @class The <code>ChartImplementationContainer</code> creates a container for the <code>content</code> (chart) and <code>noDataContent</code>. Based on the <code>showNoDataStruct</code> the <code>content</code> or <code>noDataContent</code> will be shown.
 		 * @extends sap.ui.core.Control
 		 * @author SAP SE
-		 * @version 1.121.0
+		 * @version 1.122.0
 		 * @constructor
 		 *
 		 * @public

package/src/sap/ui/mdc/chart/ChartSelectionDetails.js

@@ -26,7 +26,7 @@ sap.ui.define([
 		 * @class The <code>ChartSelectionDetails</code> control creates a <code>sap.m.SelectionDetails</code> popover based on metadata and the configuration specified.
 		 * @extends sap.m.SelectionDetails
 		 * @author SAP SE
-		 * @version 1.121.0
+		 * @version 1.122.0
 		 * @constructor
 		 * @public
 		 * @since 1.88

package/src/sap/ui/mdc/chart/ChartToolbar.js

@@ -11,7 +11,9 @@ sap.ui.define([
 		"sap/m/OverflowToolbarButton",
 		"sap/m/OverflowToolbarToggleButton",
 		"sap/m/Title",
-		"sap/ui/mdc/chart/ChartTypeButton",
+		"sap/m/IllustratedMessageType",
+		"sap/ui/mdc/chart/SelectionButton",
+		"sap/ui/mdc/chart/SelectionButtonItem",
 		"./ChartSelectionDetails",
 		"sap/ui/core/InvisibleText",
 		"sap/m/OverflowToolbarLayoutData",
@@ -27,7 +29,9 @@ sap.ui.define([
 		OverflowButton,
 		OverflowToggleButton,
 		Title,
-		ChartTypeButton,
+		IllustratedMessageType,
+		SelectionButton,
+		SelectionButtonItem,
 		ChartSelectionDetails,
 		InvisibleText,
 		OverflowToolbarLayoutData,
@@ -49,7 +53,7 @@ sap.ui.define([
 		 * @class The ChartToolbar control is a sap.m.OverflowToolbar based on metadata and the configuration specified.
 		 * @extends sap.ui.mdc.ActionToolbar
 		 * @author SAP SE
-		 * @version 1.121.0
+		 * @version 1.122.0
 		 * @constructor
 		 * @experimental As of version 1.88
 		 * @private
@@ -128,19 +132,76 @@ sap.ui.define([
 			const aP13nMode = oChart.getP13nMode() || [];
 
 			if (aP13nMode.indexOf("Item") > -1 && (!oChart.getIgnoreToolbarActions().length || oChart.getIgnoreToolbarActions().indexOf(ChartToolbarActionType.DrillDownUp) < 0)) {
-				this._oDrillDownBtn = new OverflowButton(oChart.getId() + "-drillDown", {
+				this._oDrillDownBtn = new SelectionButton(this.getId() + "-drillDown", {
 					icon: "sap-icon://drill-down",
 					tooltip: MDCRb.getText("chart.CHART_DRILLDOWN_TITLE"),
 					text: MDCRb.getText("chart.CHART_DRILLDOWN_TITLE"),
+					title: MDCRb.getText("chart.CHART_DRILLDOWN_TITLE"),
+
+					noDataTitle: MDCRb.getText("chart.NO_DRILLABLE_DIMENSION"),
+					noDataDescription: MDCRb.getText("chart.NO_DRILLABLE_DIMENSION_DESC"),
+					noDataType: IllustratedMessageType.NoDimensionsSet,
+					searchPlaceholder: MDCRb.getText("chart.CHART_DRILLDOWN_SEARCH"),
+					searchEnabled: true,
+					sortEnabled: false,
+					sorted: "ascending",
+
 					enabled: false,
+					type: "Transparent",
 					ariaHasPopup: AriaHasPopup.ListBox,
 					layoutData: new OverflowToolbarLayoutData({
 						closeOverflowOnInteraction: false
 					}),
-					press: function(oEvent) {
-						oChart._showDrillDown(this._oDrillDownBtn);
-					}.bind(this)
+					beforeOpen: function(oEvent) {
+						const oViewByBtn = oEvent.getSource();
+						oViewByBtn.removeAllItems();
+						oViewByBtn.setSelectedItemKey("");
+
+						const fnGetDrillStackDimensions = function(oChart) {
+							const aDrillStack = oChart.getControlDelegate().getDrillStack(oChart);
+							const aStackDimensions = [];
+
+							aDrillStack.forEach((oStackEntry) => {
+								// loop over nested dimension arrays
+								oStackEntry.dimension.forEach((sDimension) => {
+									if (sDimension != null && sDimension != "" && aStackDimensions.indexOf(sDimension) == -1) {
+										aStackDimensions.push(sDimension);
+									}
+								});
+							});
+
+							return aStackDimensions;
+						};
+
+						const pSortedDimensionsPromise = oChart.getControlDelegate().getSortedDimensions(oChart);
+						return pSortedDimensionsPromise.then((aSortedDimensions) => {
+							// Ignore currently applied dimensions from drill-stack for selection
+							const aIgnoreDimensions = fnGetDrillStackDimensions(oChart);
+							aSortedDimensions = aSortedDimensions.filter((oDimension) => { return aIgnoreDimensions.indexOf(oDimension.name) < 0; });
+
+							aSortedDimensions.forEach((oDimension) => {
+								// oData.items.push({ text: oDimension.label, id: oDimension.name });
+								this._oDrillDownBtn.addItem(new SelectionButtonItem({key: oDimension.name, text: oDimension.label}));
+							});
+							oViewByBtn.setSearchEnabled(aSortedDimensions.length >= 7);
+							oViewByBtn._openPopover(); // in this case the beforeOpen is not able to provide all item syncron
+						});
+					}.bind(this),
+					itemSelected: function(oEvent) {
+						const sDimensionName = oEvent.getParameter("item").key;
+
+						//Call flex to capture current state before adding an item to the chart aggregation
+						oChart.getEngine().createChanges({
+							control: oChart,
+							key: "Item",
+							state: [{
+								name: sDimensionName,
+								position: oChart.getItems().length
+							}]
+						});
+					}
 				});
+
 				this.addEnd(this._oDrillDownBtn);
 				this._chartInternalButtonsToEnable.push(this._oDrillDownBtn);
 			}
@@ -219,14 +280,69 @@ sap.ui.define([
 			}
 
 			if (oChart._getTypeBtnActive()) {
-				this._oChartTypeBtn = new ChartTypeButton(this.getId() + "-btnChartType", {
-					type: "Transparent",
+				const sChartType = oChart.getChartType();
+
+				this._oChartTypeBtn = new SelectionButton(this.getId() + "-btnChartType", {
+					chartType: sChartType,
+
+					text: MDCRb.getText("chart.CHART_TYPELIST_TEXT"),
+					title: MDCRb.getText("chart.CHART_TYPELIST_TEXT"),
+					noDataTitle: MDCRb.getText("chart.NO_CHART_TYPES_AVAILABLE"),
+					noDataDescription: MDCRb.getText("chart.NO_CHART_TYPES_AVAILABLE_ACTION"),
+					noDataType: IllustratedMessageType.AddDimensions,
+					searchPlaceholder: MDCRb.getText("chart.CHART_TYPE_SEARCH"),
+					searchEnabled: true,
+					sortEnabled: false,
+
 					enabled: false,
+					type: "Transparent",
 					ariaHasPopup: AriaHasPopup.ListBox,
 					layoutData: new OverflowToolbarLayoutData({
 						closeOverflowOnInteraction: false
 					}),
-					chart: oChart
+					beforeOpen: function(oEvent) {
+						const oChartTypeBtn = oEvent.getSource();
+						// use this to update the available ChartTypes
+						const aAvailableChartTypes = oChart.getAvailableChartTypes();
+						oChartTypeBtn.removeAllItems();
+						aAvailableChartTypes.forEach((oChartType) => {
+							oChartTypeBtn.addItem(
+								new SelectionButtonItem({key: oChartType.key, text: oChartType.text, icon: oChartType.icon})
+							);
+						});
+						oChartTypeBtn.setSearchEnabled(aAvailableChartTypes.length >= 7);
+					},
+					itemSelected: function(oEvent) {
+						const oChartTypeBtn = oEvent.getSource();
+						const sChartType = oEvent.getParameter("item").key;
+
+						const oChartTypeInfo = oChart.getChartTypeInfo();
+						const aAvailableChartTypes = oChart.getAvailableChartTypes();
+						const oChartType = aAvailableChartTypes.filter((o) => {return o.key === sChartType; })[0];
+
+						oChartTypeBtn.setText(oChartType.text);
+						oChartTypeBtn.setTooltip(oChartTypeInfo.text);
+						oChartTypeBtn.setIcon(oChartType.icon);
+
+						//TODO should be done in the chart, the control should only raise an event
+						sap.ui.require([
+							"sap/ui/mdc/flexibility/Chart.flexibility"
+						], (ChartFlex) => {
+
+							oChart.getEngine().createChanges({
+								control: oChart,
+								key: "Type",
+								state: {
+									properties: {
+										chartType: sChartType
+									}
+								}
+							}).then((vResult) => {
+								oChart.getControlDelegate().requestToolbarUpdate(oChart);
+							});
+
+						});
+					}
 				});
 				this.addEnd(this._oChartTypeBtn);
 				this._chartInternalButtonsToEnable.push(this._oChartTypeBtn);
@@ -311,10 +427,12 @@ sap.ui.define([
 				this._chartInternalButtonsToEnable.forEach((oBtn) => {
 					oBtn.setEnabled(true);
 				});
+				delete this._chartInternalButtonsToEnable;
 
 				this._toolbarInitialUpdated = true;
 			}
 
+			//TODO do we have to attach the SelectionHandler in every call or only once?
 			const oSelectionHandler = oChart.getSelectionHandler();
 			if (oSelectionHandler && oChart.getShowSelectionDetails()) {
 				this._oChartSelectionDetails.attachSelectionHandler(oSelectionHandler.eventId, oSelectionHandler.listener);