@sapui5/sap.ui.vk 1.138.0 → 1.140.0

package/src/sap/ui/vk/ecad/ElementsPanel.js

@@ -7,90 +7,66 @@
 
 // Provides control sap.ui.vk.ecad.ElementsPanel
 sap.ui.define([
+	"sap/m/VBox",
 	"sap/m/Button",
-	"sap/m/SearchField",
 	"sap/m/OverflowToolbar",
-	"sap/m/ToolbarLayoutData",
 	"sap/m/ToolbarSpacer",
 	"sap/m/Label",
 	"sap/m/Input",
 	"sap/m/Table",
 	"sap/m/table/ColumnWidthController",
-	"sap/m/table/columnmenu/Menu",
-	"sap/m/table/columnmenu/QuickGroup",
-	"sap/m/table/columnmenu/QuickGroupItem",
-	"sap/m/table/columnmenu/QuickSort",
-	"sap/m/table/columnmenu/QuickSortItem",
 	"sap/m/Column",
-	"sap/m/ScrollContainer",
 	"sap/m/ColumnListItem",
 	"sap/m/plugins/ColumnResizer",
 	"sap/m/MultiComboBox",
+	"sap/m/IllustratedMessage",
+	"sap/m/IllustratedMessageType",
 	"sap/m/p13n/Engine",
 	"sap/m/p13n/SelectionController",
 	"sap/m/p13n/GroupController",
 	"sap/m/p13n/SortController",
 	"sap/m/p13n/MetadataHelper",
-	"sap/f/DynamicPage",
-	"sap/f/DynamicPageTitle",
-	"sap/f/DynamicPageHeader",
-	"sap/ui/comp/filterbar/FilterBar",
-	"sap/ui/comp/filterbar/FilterGroupItem",
-	"sap/ui/core/Core",
 	"sap/ui/core/Control",
 	"sap/ui/core/Element",
 	"sap/ui/core/Icon",
+	"sap/ui/core/Lib",
 	"sap/ui/core/library",
 	"sap/ui/model/json/JSONModel",
 	"sap/ui/model/Filter",
 	"sap/ui/model/FilterOperator",
 	"../Core",
-	"../library",
-	"../ViewStateManager",
 	"./VisibilityType",
 	"../getResourceBundle",
 	"sap/m/library"
 ], function(
+	VBox,
 	Button,
-	SearchField,
 	OverflowToolbar,
-	ToolbarLayoutData,
 	ToolbarSpacer,
 	Label,
 	Input,
 	Table,
 	ColumnWidthController,
-	Menu,
-	QuickGroup,
-	QuickGroupItem,
-	QuickSort,
-	QuickSortItem,
 	Column,
-	ScrollContainer,
 	ColumnListItem,
 	ColumnResizer,
 	MultiComboBox,
+	IllustratedMessage,
+	IllustratedMessageType,
 	Engine,
 	SelectionController,
 	GroupController,
 	SortController,
 	MetadataHelper,
-	DynamicPage,
-	DynamicPageTitle,
-	DynamicPageHeader,
-	FilterBar,
-	FilterGroupItem,
-	Core,
 	Control,
 	Element,
 	Icon,
-	Library,
+	Lib,
+	CoreLibrary,
 	JSONModel,
 	Filter,
 	FilterOperator,
 	vkCore,
-	vkLibrary,
-	ViewStateManager,
 	VisibilityType,
 	getResourceBundle,
 	SapMLibrary
@@ -98,6 +74,29 @@ sap.ui.define([
 	"use strict";
 
 	const Sticky = SapMLibrary.Sticky;
+	const FlexRendertype = SapMLibrary.FlexRendertype;
+
+	const IconType = {
+		Hidden: "sap-icon://hide",
+		Partial: "sap-icon://vk-icons/partially-visible-element",
+		Visible: "sap-icon://show"
+	};
+
+	const ColumnName = {
+		RefDes: "refdes",
+		Type: "type",
+		Device: "deviceref"
+	};
+
+	const ElementType = {
+		Component: "2",
+		Net: "4"
+	};
+
+	const ModelName = {
+		FilterSummary: "FilterSummary",
+		ElementType: "ElementType"
+	};
 
 	function isAncestorOf(ancestor, descendant) {
 		for (let current = descendant.getParent(); current != null; current = current.getParent()) {
@@ -108,20 +107,51 @@ sap.ui.define([
 		return false;
 	}
 
+	function getVisibility(element) {
+		if (element.hiddenParts.size === 0) {
+			return VisibilityType.Visible;
+		} else if (element.hiddenParts.size < element.parts.size) {
+			return VisibilityType.Partial;
+		}
+		return VisibilityType.Hidden;
+	}
+
+	function extractMetadata(nodeRef) {
+		const metadata = nodeRef?.userData?.metadata ?? {};
+		if (metadata.length != undefined) {
+			const map = new Map();
+			metadata.forEach(function(entry) {
+				if (entry.category === "ecad") {
+					map.set(entry.tag, entry.value);
+				}
+			});
+			return map;
+		}
+		return null;
+	}
+
 	/**
 	 * Constructor for a new ElementsPanel.
 	 *
 	 * @param {string} [sId] id for the new control, generated automatically if no id is given
 	 * @param {object} [mSettings] initial settings for the new control
 	 *
-	 * @class Provides a flat list view of all the ECAD layers in a given scene in table format.
-	 * @extends sap.ui.core.Control
+	 * @class Provides a list of all ECAD elements in a given scene in table format.
+	 *
+	 * <b>NOTE:</b> To use this control the application developer should add dependencies to the
+	 * following libraries on application level to ensure that the libraries are loaded before the
+	 * module dependencies will be required:
+	 * <ul>
+	 *   <li>sap.f</li>
+	 *   <li>sap.ui.comp</li>
+	 * </ul>
 	 *
+	 * @extends sap.ui.core.Control
 	 * @author SAP SE
-	 * @version 1.138.0
+	 * @version 1.140.0
 	 *
 	 * @constructor
-	 * @private
+	 * @public
 	 * @alias sap.ui.vk.ecad.ElementsPanel
 	 * @ui5-metamodel This control/element also will be described in the UI5 (legacy) designtime metamodel
 	 * @since 1.136.0
@@ -141,8 +171,9 @@ sap.ui.define([
 			},
 			aggregations: {
 				content: {
-					type: "sap.f.DynamicPage",
-					multiple: false
+					type: "sap.ui.core.Control",
+					multiple: false,
+					visibility: "hidden"
 				}
 			},
 			associations: {
@@ -195,355 +226,382 @@ sap.ui.define([
 		}
 	});
 
-	const IconType = {
-		Hidden: "sap-icon://hide",
-		Partial: "sap-icon://vk-icons/partially-visible-element",
-		Visible: "sap-icon://show"
-	};
-
-	const ColumnName = {
-		RefDes: "refdes",
-		Type: "type",
-		Device: "deviceref"
-	};
-
-	const ElementType = {
-		Component: "2",
-		Net: "4"
-	};
-
-	const ModelName = {
-		FilterSummary: "FilterSummary",
-		ElementType: "ElementType"
-	};
-
 	ElementsPanel.prototype.onSetViewStateManager = function(manager) {
 		this._manager = manager;
 		manager.attachSelectionChanged(this._onViewportSelectionChanged, this);
 		manager.attachVisibilityChanged(this._onVisibilityChanged, this);
-		this.refresh();
+		this._refresh();
 	};
 
 	ElementsPanel.prototype.onUnsetViewStateManager = function(manager) {
 		this._manager = null;
 		manager.detachSelectionChanged(this._onViewportSelectionChanged, this);
 		manager.detachVisibilityChanged(this._onVisibilityChanged, this);
-		this.refresh();
+		this._refresh();
 	};
 
 	ElementsPanel.prototype.onSetContentConnector = function(connector) {
 		connector.attachContentReplaced(this._onContentReplaced, this);
-		connector.attachContentChangesFinished(this._onContentChangesFinished, this);
 		this._setContent(connector.getContent());
 	};
 
 	ElementsPanel.prototype.onUnsetContentConnector = function(connector) {
 		this._setContent(null);
 		connector.detachContentReplaced(this._onContentReplaced, this);
-		connector.detachContentChangesFinished(this._onContentChangesFinished, this);
 	};
 
 	ElementsPanel.prototype.init = function() {
-		if (Control.prototype.init) {
-			Control.prototype.init.apply(this);
-		}
-		const that = this;
-
-		this._showButton = new Button({
-			enabled: false,
-			icon: IconType.Visible,
-			text: getResourceBundle().getText("ELEMENTS_PANEL_SHOW_BUTTON"),
-			tooltip: getResourceBundle().getText("ELEMENTS_PANEL_SHOW_BUTTON_TOOLTIP"),
-			press: this._onShowElements.bind(this)
-		});
+		Control.prototype.init?.apply(this);
 
-		this._hideButton = new Button({
-			enabled: false,
-			icon: IconType.Hidden,
-			text: getResourceBundle().getText("ELEMENTS_PANEL_HIDE_BUTTON"),
-			tooltip: getResourceBundle().getText("ELEMENTS_PANEL_HIDE_BUTTON_TOOLTIP"),
-			press: this._onHideElements.bind(this)
-		});
+		const filterSummaryData = {
+			expandedFilterSummary: "",
+			snappedFilterSummary: ""
+		};
 
-		this._settingsButton = new Button({
-			icon: "sap-icon://action-settings",
-			tooltip: getResourceBundle().getText("ELEMENTS_PANEL_SETTINGS_BUTTON_TOOLTIP"),
-			press: this._onSettings.bind(this)
-		});
+		const elementTypeData = [ElementType.Component, ElementType.Net];
 
-		this._table = new Table({
-			mode: "MultiSelect",
-			fixedLayout: "Strict",
-			autoPopinMode: true,
-			popinLayout: "GridSmall",
-			includeItemInSelection: true,
-			noDataText: getResourceBundle().getText("ELEMENTS_PANEL_NO_DATA"),
-			sticky: [Sticky.HeaderToolbar, Sticky.ColumnHeaders],
-			selectionChange: this._onTableSelectionChanged.bind(this),
-			headerToolbar: new OverflowToolbar({
-				content: [
-					new ToolbarSpacer(),
-					this._showButton,
-					this._hideButton,
-					this._settingsButton
-				]
-			}),
-			dependents: [
-				new ColumnResizer({
-					columnResize: that._onColumnResize.bind(this)
-				})
-			],
-			columns: [
-				new Column({
-					hAlign: Library.TextAlign.Begin,
-					header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_NAME_COLUMN") })
+		this._scene = null;
+		this._model = new JSONModel();
+		this._skipEvent = false;
+		this._filterSummaryModel = new JSONModel(filterSummaryData);
+		this._elementTypeModel = new JSONModel(elementTypeData);
+
+		this.setModel(this._filterSummaryModel, ModelName.FilterSummary);
+		this.setModel(this._elementTypeModel, ModelName.ElementType);
+
+		// show no data message before libraries loaded
+		this.setAggregation("content", new IllustratedMessage({
+			illustrationType: IllustratedMessageType.NoData,
+			enableVerticalResponsiveness: true
+		}));
+
+		this._promise = Promise.all([
+			Lib.load("sap.f"),
+			Lib.load("sap.ui.comp")
+		]).then(() => new Promise((resolve) => {
+			sap.ui.require([
+				"sap/f/DynamicPage",
+				"sap/f/DynamicPageTitle",
+				"sap/f/DynamicPageHeader",
+				"sap/ui/comp/filterbar/FilterBar",
+				"sap/ui/comp/filterbar/FilterGroupItem"
+			], (
+				DynamicPage,
+				DynamicPageTitle,
+				DynamicPageHeader,
+				FilterBar,
+				FilterGroupItem
+			) => {
+				this._showButton = new Button({
+					enabled: false,
+					icon: IconType.Visible,
+					text: getResourceBundle().getText("ELEMENTS_PANEL_SHOW_BUTTON"),
+					tooltip: getResourceBundle().getText("ELEMENTS_PANEL_SHOW_BUTTON_TOOLTIP"),
+					press: this._onShowElements.bind(this)
+				});
+
+				this._hideButton = new Button({
+					enabled: false,
+					icon: IconType.Hidden,
+					text: getResourceBundle().getText("ELEMENTS_PANEL_HIDE_BUTTON"),
+					tooltip: getResourceBundle().getText("ELEMENTS_PANEL_HIDE_BUTTON_TOOLTIP"),
+					press: this._onHideElements.bind(this)
+				});
+
+				this._settingsButton = new Button({
+					icon: "sap-icon://action-settings",
+					tooltip: getResourceBundle().getText("ELEMENTS_PANEL_SETTINGS_BUTTON_TOOLTIP"),
+					press: this._onSettings.bind(this)
+				});
+
+				this._table = new Table({
+					mode: "MultiSelect",
+					fixedLayout: "Strict",
+					autoPopinMode: true,
+					popinLayout: "GridSmall",
+					includeItemInSelection: true,
+					sticky: [Sticky.HeaderToolbar, Sticky.ColumnHeaders],
+					selectionChange: this._onTableSelectionChanged.bind(this),
+					headerToolbar: new OverflowToolbar({
+						content: [
+							new ToolbarSpacer(),
+							this._showButton,
+							this._hideButton,
+							this._settingsButton
+						]
+					}),
+					dependents: [
+						new ColumnResizer({
+							columnResize: this._onColumnResize.bind(this)
+						})
+					],
+					columns: [
+						new Column({
+							hAlign: CoreLibrary.TextAlign.Begin,
+							header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_NAME_COLUMN") })
 
-				}),
-				new Column({
-					hAlign: Library.TextAlign.Begin,
-					header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COLUMN") })
-				}),
-				new Column({
-					hAlign: Library.TextAlign.Begin,
-					header: new Label({
-						text: getResourceBundle().getText("ELEMENTS_PANEL_DEVICE_REFERENCE_COLUMN")
-					})
-				}),
-				new Column({
-					hAlign: Library.TextAlign.Center,
-					header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN") })
-				})
-			],
-			items: {
-				path: "/",
-				template: new ColumnListItem({
-					vAlign: "Middle",
-					cells: [
-						new Label({
-							text: "{refdes}"
 						}),
-						new Label({
-							text: {
-								path: "",
-								formatter: function(element) {
-									switch (element.type) {
-										case ElementType.Component:
-											return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COMPONENT");
-										case ElementType.Net:
-											return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_NET");
-										default:
-											return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_UNKNOWN");
-									}
-								}
-							}
+						new Column({
+							hAlign: CoreLibrary.TextAlign.Begin,
+							header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COLUMN") })
 						}),
-						new Label({
-							text: "{deviceref}"
+						new Column({
+							hAlign: CoreLibrary.TextAlign.Begin,
+							header: new Label({
+								text: getResourceBundle().getText("ELEMENTS_PANEL_DEVICE_REFERENCE_COLUMN")
+							})
 						}),
-						new Icon({
-							src: {
-								path: "",
-								formatter: function(element) {
-									switch (that._getVisibility(element)) {
-										case VisibilityType.Hidden:
-											return IconType.Hidden;
-										case VisibilityType.Partial:
-											return IconType.Partial;
-										default:
-											return IconType.Visible;
+						new Column({
+							hAlign: CoreLibrary.TextAlign.Center,
+							header: new Label({ text: getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN") })
+						})
+					],
+					items: {
+						path: "/",
+						template: new ColumnListItem({
+							vAlign: "Middle",
+							cells: [
+								new Label({
+									text: "{refdes}"
+								}),
+								new Label({
+									text: {
+										path: "",
+										formatter: function(element) {
+											switch (element.type) {
+												case ElementType.Component:
+													return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COMPONENT");
+												case ElementType.Net:
+													return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_NET");
+												default:
+													return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_UNKNOWN");
+											}
+										}
 									}
-								}
-							},
-							tooltip: {
-								path: "",
-								formatter: function(element) {
-									switch (that._getVisibility(element)) {
-										case VisibilityType.Hidden:
-											return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_HIDDEN_TOOLTIP");
-										case VisibilityType.Partial:
-											return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_PARTIAL_TOOLTIP");
-										default:
-											return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_VISIBLE_TOOLTIP");
+								}),
+								new Label({
+									text: "{deviceref}"
+								}),
+								new Icon({
+									src: {
+										path: "",
+										formatter: function(element) {
+											switch (getVisibility(element)) {
+												case VisibilityType.Hidden:
+													return IconType.Hidden;
+												case VisibilityType.Partial:
+													return IconType.Partial;
+												default:
+													return IconType.Visible;
+											}
+										}
+									},
+									tooltip: {
+										path: "",
+										formatter: function(element) {
+											switch (getVisibility(element)) {
+												case VisibilityType.Hidden:
+													return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_HIDDEN_TOOLTIP");
+												case VisibilityType.Partial:
+													return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_PARTIAL_TOOLTIP");
+												default:
+													return getResourceBundle().getText("ELEMENTS_PANEL_VISIBLE_COLUMN_VISIBLE_TOOLTIP");
+											}
+										}
 									}
-								}
-							}
+								})
+							]
 						})
-					]
-				})
-			}
-		});
-
-		this._filterBar = new FilterBar({
-			useToolbar: false,
-			persistencyKey: "Filters",
-			search: this._onSearch.bind(this),
-			filterChange: this._onFilterChange.bind(this),
-			assignedFiltersChanged: this._onAssignedFiltersChanged.bind(this),
-			filterGroupItems: [
-				new FilterGroupItem({
-					name: ColumnName.RefDes,
-					label: getResourceBundle().getText("REFDES_FILTER_LABEL"),
-					groupName: "basic",
-					visible: true,
-					visibleInFilterBar: true,
-					control: new Input({
-						change: this._onFilterChange.bind(this)
-					})
-				}),
-				new FilterGroupItem({
-					name: ColumnName.Type,
-					label: getResourceBundle().getText("TYPE_FILTER_LABEL"),
-					groupName: "basic",
-					visible: true,
-					visibleInFilterBar: true,
-					control: new MultiComboBox({
-						selectionChange: this._onFilterChange.bind(this),
-						items: {
-							path: ModelName.ElementType + ">/",
-							templateShareable: false,
-							template: new sap.ui.core.Item({
-								key: "{" + ModelName.ElementType + ">}",
-								text: {
-									path: ModelName.ElementType + ">",
-									formatter: function(type) {
-										switch (type) {
-											case ElementType.Component:
-												return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COMPONENT");
-											case ElementType.Net:
-												return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_NET");
-											default:
-												return getResourceBundle().getText("ELEMENTS_TYPE_FILTER_ALL");
+					}
+				});
+				this._table.setModel(this._model);
+
+				this._filterBar = new FilterBar({
+					useToolbar: false,
+					persistencyKey: "Filters",
+					search: this._onSearch.bind(this),
+					filterChange: this._onFilterChange.bind(this),
+					assignedFiltersChanged: this._onAssignedFiltersChanged.bind(this),
+					filterGroupItems: [
+						new FilterGroupItem({
+							name: ColumnName.RefDes,
+							label: getResourceBundle().getText("REFDES_FILTER_LABEL"),
+							groupName: "basic",
+							visible: true,
+							visibleInFilterBar: true,
+							control: new Input({
+								change: this._onFilterChange.bind(this)
+							})
+						}),
+						new FilterGroupItem({
+							name: ColumnName.Type,
+							label: getResourceBundle().getText("TYPE_FILTER_LABEL"),
+							groupName: "basic",
+							visible: true,
+							visibleInFilterBar: true,
+							control: new MultiComboBox({
+								selectionChange: this._onFilterChange.bind(this),
+								items: {
+									path: ModelName.ElementType + ">/",
+									templateShareable: false,
+									template: new sap.ui.core.Item({
+										key: "{" + ModelName.ElementType + ">}",
+										text: {
+											path: ModelName.ElementType + ">",
+											formatter: function(type) {
+												switch (type) {
+													case ElementType.Component:
+														return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COMPONENT");
+													case ElementType.Net:
+														return getResourceBundle().getText("ELEMENTS_PANEL_TYPE_NET");
+													default:
+														return getResourceBundle().getText("ELEMENTS_TYPE_FILTER_ALL");
+												}
+											}
 										}
-									}
+									})
 								}
 							})
+						}),
+						new FilterGroupItem({
+							name: ColumnName.Device,
+							label: getResourceBundle().getText("DEVICE_REF_FILTER_LABEL"),
+							groupName: "basic",
+							visible: true,
+							visibleInFilterBar: true,
+							control: new Input({
+								change: this._onFilterChange.bind(this)
+							})
+						})
+					]
+				});
+
+				this._page = new DynamicPage({
+					visible: false,
+					fitContent: true,
+					showFooter: false,
+					headerExpanded: false,
+					title: new DynamicPageTitle({
+						heading: this._filterTitle,
+						expandedContent: new Label({
+							text: "{" + ModelName.FilterSummary + ">/expandedFilterSummary}"
+						}),
+						snappedContent: new Label({
+							text: "{" + ModelName.FilterSummary + ">/snappedFilterSummary}"
+						})
+					}),
+					header: new DynamicPageHeader({
+						content: this._filterBar
+					}),
+					content: this._table
+				});
+
+				this._message = new IllustratedMessage({
+					illustrationType: IllustratedMessageType.NoData,
+					enableVerticalResponsiveness: true
+				});
+
+				const content = new VBox({
+					height: "100%",
+					renderType: FlexRendertype.Bare,
+					items: [
+						this._page,
+						this._message
+					]
+				});
+
+				this.destroyAggregation("content");
+				this.setAggregation("content", content);
+
+				this._p13nEngine = Engine.getInstance();
+
+				this._metadataHelper = new MetadataHelper([
+					{
+						key: ColumnName.RefDes,
+						path: ColumnName.RefDes,
+						label: getResourceBundle().getText("ELEMENTS_PANEL_NAME_COLUMN"),
+						groupable: false
+					},
+					{
+						key: ColumnName.Type,
+						path: ColumnName.Type,
+						label: getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COLUMN")
+					},
+					{
+						key: ColumnName.Device,
+						path: ColumnName.Device,
+						label: getResourceBundle().getText("ELEMENTS_PANEL_DEVICE_REFERENCE_COLUMN")
+					}
+				]);
+
+				// Register the elements table for personalization
+				this._registerTableForP13n();
+
+				// Set up filter bar data handlers
+				this._filterBar.addEventDelegate({
+					// When the user hits the `Enter` key in any of the filter bar controls, we trigger the
+					// search. This handler covers all the filter group items. The basic search field is handled separately.
+					onsapenter: (event) => {
+						const control = event.srcControl;
+						// If `control` itself or its ancestor is a part of the `filterGroupItems` aggregation of
+						// the `FilterBar` control, then we can trigger the search.
+						if (this._filterBar.getFilterGroupItems().some((item) => {
+							const itemControl = item.getControl();
+							return itemControl === control || isAncestorOf(itemControl, control);
+						})) {
+							this._onAssignedFiltersChanged();
+							this._updateFilterBarToolbarText();
+							this._onSearch();
 						}
-					})
-				}),
-				new FilterGroupItem({
-					name: ColumnName.Device,
-					label: getResourceBundle().getText("DEVICE_REF_FILTER_LABEL"),
-					groupName: "basic",
-					visible: true,
-					visibleInFilterBar: true,
-					control: new Input({
-						change: this._onFilterChange.bind(this)
-					})
-				})
-			]
-		});
-
-		this._page = new DynamicPage({
-			showFooter: false,
-			headerExpanded: false,
-			title: new DynamicPageTitle({
-				heading: this._filterTitle,
-				expandedContent: new Label({
-					text: "{" + ModelName.FilterSummary + ">/expandedFilterSummary}"
-				}),
-				snappedContent: new Label({
-					text: "{" + ModelName.FilterSummary + ">/snappedFilterSummary}"
-				})
-			}),
-			header: new DynamicPageHeader({
-				content: this._filterBar
-			}),
-			content: this._table
-		});
-
-		this.setAggregation("content", this._page);
+					}
+				});
 
-		this._p13nEngine = Engine.getInstance();
+				this._filterBar.registerGetFiltersWithValues(this._getFiltersWithValues.bind(this));
 
-		this._metadataHelper = new MetadataHelper([
-			{
-				key: ColumnName.RefDes,
-				path: ColumnName.RefDes,
-				label: getResourceBundle().getText("ELEMENTS_PANEL_NAME_COLUMN"),
-				groupable: false
-			},
-			{
-				key: ColumnName.Type,
-				path: ColumnName.Type,
-				label: getResourceBundle().getText("ELEMENTS_PANEL_TYPE_COLUMN")
-			},
-			{
-				key: ColumnName.Device,
-				path: ColumnName.Device,
-				label: getResourceBundle().getText("ELEMENTS_PANEL_DEVICE_REFERENCE_COLUMN")
-			}
-		]);
+				this._onAssignedFiltersChanged();
+				this._updateFilterBarToolbarText();
 
-		const filterSummaryData = {
-			expandedFilterSummary: "",
-			snappedFilterSummary: ""
-		};
-
-		const elementTypeData = [ElementType.Component, ElementType.Net];
+				resolve();
+			});
+		}));
+	};
 
-		this._scene = null;
-		this._model = new JSONModel();
-		this._table.setModel(this._model);
-		this._skipEvent = false;
-		this._filterSummaryModel = new JSONModel(filterSummaryData);
-		this._elementTypeModel = new JSONModel(elementTypeData);
+	ElementsPanel.prototype.exit = function() {
+		this._promise = this._promise.then(() => {
+			this._p13nEngine.detachStateChange(this._onTableStateChange);
+			this._p13nEngine.deregister(this._table);
+			this._p13nEngine = null;
+			this._metadataHelper.destroy();
+			this._metadataHelper = null;
 
-		this.setModel(this._filterSummaryModel, ModelName.FilterSummary);
-		this.setModel(this._elementTypeModel, ModelName.ElementType);
+			this._model.destroy();
+			this._model = null;
+			this._elementTypeModel.destroy();
+			this._elementTypeModel = null;
+			this._filterSummaryModel.destroy();
+			this._filterSummaryModel = null;
 
-		// Register the elements table for personalization
-		this._registerTableForP13n();
-
-		// Set up filter bar data handlers
-		this._filterBar.addEventDelegate({
-			// When the user hits the `Enter` key in any of the filter bar controls, we trigger the
-			// search. This handler covers all the filter group items. The basic search field is handled separately.
-			onsapenter: function(event) {
-				const control = event.srcControl;
-				// If `control` itself or its ancestor is a part of the `filterGroupItems` aggregation of
-				// the `FilterBar` control, then we can trigger the search.
-				if (that._filterBar.getFilterGroupItems().some((item) => {
-					const itemControl = item.getControl();
-					return itemControl === control || isAncestorOf(itemControl, control);
-				})) {
-					that._onAssignedFiltersChanged();
-					that._updateFilterBarToolbarText();
-					that._onSearch();
-				}
-			}
+			Control.prototype.exit?.apply(this);
 		});
-
-		this._filterBar.registerGetFiltersWithValues(this._getFiltersWithValues.bind(this));
-
-		this._onAssignedFiltersChanged();
-		this._updateFilterBarToolbarText();
 	};
 
-	ElementsPanel.prototype.destroy = function() {
-		if (Control.prototype.destroy) {
-			Control.prototype.destroy.apply(this);
-		}
-		this._p13nEngine.detachStateChange(this._onTableStateChange);
-		this._p13nEngine.deregister(this._table);
-		this._p13nEngine = null;
-		this._metadataHelper.destroy();
-		this._metadataHelper = null;
+	ElementsPanel.prototype._updateMessage = function(filtering) {
+		const hasData = this._table.getItems().length > 0;
+		const control = filtering === true ? this._table : this._page;
 
-		this._model.destroy();
-		this._model = null;
-		this._elementTypeModel.destroy();
-		this._elementTypeModel = null;
-		this._filterSummaryModel.destroy();
-		this._filterSummaryModel = null;
-	};
+		control.setVisible(hasData);
 
-	ElementsPanel.prototype.getControl = function() {
-		return this._page;
+		this._message.setVisible(!hasData);
+		this._message.setIllustrationType(filtering === true ? IllustratedMessageType.NoFilterResults : sap.m.IllustratedMessageType.NoData);
 	};
 
-	ElementsPanel.prototype.refresh = function() {
+	ElementsPanel.prototype._refresh = async function() {
+		await this._promise;
+
 		if (!this._scene || !this._manager) {
-			this._model.setData([]);
+			// This method may be called indirectly from the exit method after _model is destroyed
+			this._model?.setData([]);
+			this._updateMessage(false);
 			return;
 		}
 		// scan the tree and collect elements info
@@ -554,6 +612,7 @@ sap.ui.define([
 		this._model.setData(data);
 		this._table.setModel(this._model);
 
+		this._updateMessage(false);
 		this.fireContentChanged();
 	};
 
@@ -595,40 +654,8 @@ sap.ui.define([
 	};
 
 	ElementsPanel.prototype._setScene = function(scene) {
-		this._scene = (this._isECAD(scene) ? scene : null);
-		this.refresh();
-	};
-
-	ElementsPanel.prototype._isECAD = function(scene) {
-		if (!scene) {
-			return false;
-		}
-		const metadata = scene.getSceneMetadata();
-		const data = metadata?.find((el) => el.category === "ecad" && el.tag === "version" && el.value === "8");
-		return !!data;
-	};
-
-	ElementsPanel.prototype._getVisibility = function(element) {
-		if (element.hiddenParts.size === 0) {
-			return VisibilityType.Visible;
-		} else if (element.hiddenParts.size < element.parts.size) {
-			return VisibilityType.Partial;
-		}
-		return VisibilityType.Hidden;
-	};
-
-	ElementsPanel.prototype._extractMetadata = function(nodeRef) {
-		const metadata = nodeRef?.userData?.metadata ?? {};
-		if (metadata.length != undefined) {
-			const map = new Map();
-			metadata.forEach(function(entry) {
-				if (entry.category === "ecad") {
-					map.set(entry.tag, entry.value);
-				}
-			});
-			return map;
-		}
-		return null;
+		this._scene = scene?.isECADScene() ? scene : null;
+		this._refresh();
 	};
 
 	ElementsPanel.prototype._addElement = function(elements, nodeRef, metadata) {
@@ -669,7 +696,7 @@ sap.ui.define([
 	};
 
 	ElementsPanel.prototype._scanTree = function(elements, nodeRef) {
-		const metadata = this._extractMetadata(nodeRef);
+		const metadata = extractMetadata(nodeRef);
 		if (metadata) {
 			const name = metadata.get("refdes");
 			if (name) {
@@ -712,7 +739,7 @@ sap.ui.define([
 			const element = item.getBindingContext().getObject();
 
 			list.forEach(function(nodeRef) {
-				const metadata = this._extractMetadata(nodeRef);
+				const metadata = extractMetadata(nodeRef);
 				const refdes = metadata?.get("refdes");
 
 				if (refdes === element.refdes) {
@@ -752,11 +779,6 @@ sap.ui.define([
 		this._setContent(event.getParameter("newContent"));
 	};
 
-	ElementsPanel.prototype._onContentChangesFinished = function(event) {
-		// causes second rebuild of everything ?
-		// this.refresh();
-	};
-
 	ElementsPanel.prototype._updateButtons = function() {
 		let canHide = false;
 		let canShow = false;
@@ -764,7 +786,7 @@ sap.ui.define([
 
 		selected.forEach(function(item) {
 			const element = item.getBindingContext().getObject();
-			const visibility = this._getVisibility(element);
+			const visibility = getVisibility(element);
 
 			if (visibility === VisibilityType.Visible) {
 				canHide = true;
@@ -830,7 +852,7 @@ sap.ui.define([
 		this._updateButtons();
 	};
 
-	ElementsPanel.prototype._onVisibilityChanged = function(event) {
+	ElementsPanel.prototype._onVisibilityChanged = async function(event) {
 		if (this._skipEvent) {
 			this._skipEvent = false;
 			return;
@@ -838,9 +860,11 @@ sap.ui.define([
 		const hidden = event.getParameter("hidden");
 		const visible = event.getParameter("visible");
 
+		await this._promise;
+
 		const process = (list, element, show) => {
 			list.forEach(function(ref) {
-				const metadata = this._extractMetadata(ref);
+				const metadata = extractMetadata(ref);
 				const refdes = metadata?.get("refdes");
 
 				if (refdes === element.refdes) {
@@ -934,6 +958,8 @@ sap.ui.define([
 
 		this._table.getBinding("items").filter(filters);
 		this._table.setShowOverlay(false);
+
+		this._updateMessage(true);
 	};
 
 	ElementsPanel.prototype._onFilterChange = function() {
@@ -945,9 +971,6 @@ sap.ui.define([
 		this._filterSummaryModel.setProperty("/expandedFilterSummary", this._filterBar.retrieveFiltersWithValuesAsTextExpanded());
 	};
 
-	ElementsPanel.prototype._onBasicSearch = function() {
-	};
-
 	ElementsPanel.prototype._onTableStateChange = function(event) {
 		if (event.getParameter("control") !== this._table) {
 			return;
@@ -981,7 +1004,7 @@ sap.ui.define([
 	};
 
 	// Currently there is no way to programmatically update
-	// text next to Go button, it's a FitlerBar bug,
+	// text next to Go button, it's a FilterBar bug,
 	// so check for private function and call it
 	ElementsPanel.prototype._updateFilterBarToolbarText = function() {
 		this._filterBar._updateToolbarText?.();