/*! * SAPUI5 * Copyright (c) 2025 SAP SE or an SAP affiliate company. All rights reserved. */ import { MetadataOptions } from "sap/ui/base/ManagedObject"; import Bar from "sap/m/Bar"; import Button from "sap/m/Button"; import Text from "sap/m/Text"; import MessageBox from "sap/m/MessageBox"; import Control from "sap/ui/core/Control"; import { ResultSetItem } from "../../ResultSetApi"; import VerticalLayout, { $VerticalLayoutSettings } from "sap/ui/layout/VerticalLayout"; import SearchBasketModel, { SearchBasketApi } from "./SearchBasketModel"; import { ButtonType } from "sap/m/library"; import SearchBasketSapMTable, { $SearchBasketSapMTableSettings } from "./SearchBasketSapMTable"; import OverflowToolbar from "sap/m/OverflowToolbar"; import FixFlex from "sap/ui/layout/FixFlex"; /** * Example of a custom basket * */ /** * Constructs a new CustomBasket to be used as a search basket (extend this class). * * @param {string} [sId] ID for the new control, generated automatically if no ID is given * * @class * * This is the SAPUI5 sample basket class, making use of the sap.ui.table.Table extension SearchBasketSapUiTable. * In addition, adds a custom header, footer (sap.ui.table.Table is used for the basket items). * Use in combination with control SearchCompositeControl by the Enterprise Search Team. * * @extends sap.ui.layout.VerticalLayout * * @author SAP SE * @version 1.150.1 * * @see https://help.sap.com/viewer/691cb949c1034198800afde3e5be6570/2.0.08/en-US/ce86ef2fd97610149eaaaa0244ca4d36.html SAP HANA Search Developer Guide * @see https://help.sap.com/docs/SAP_S4HANA_ON-PREMISE/90b263323d0a4976bcda415e6bd20ea4/d93d53ef27074bbf9a4849c4a4c3e360.html Enterprise Search in SAP S/4HANA * * * @constructor * @public * @alias sap.esh.search.ui.controls.basket.CustomBasket * @since 1.144.0 * @name sap.esh.search.ui.controls.basket.CustomBasket */ export interface $CustomBasketSettings extends $VerticalLayoutSettings { basketConfigurator?: { adaptColumns: (columns: any[]) => any[]; adaptRow: (publicItem: ResultSetItem) => ResultSetItem; }; showDeleteAction?: boolean; // if basket- and result list item selection are not linked, we need to provide a delete button to remove items manually from the basket } /** * @namespace sap.esh.search.ui.controls */ export default class CustomBasket extends FixFlex implements SearchBasketApi { static readonly metadata: MetadataOptions = { library: "sap.esh.search.ui.controls.basket", aggregations: { header: { type: "sap.ui.layout.VerticalLayout", multiple: false, visibility: "hidden", }, footer: { type: "sap.m.Bar", multiple: false, visibility: "hidden", }, }, properties: { /** * An object containing the basket configurator functions 'adaptColumns' and 'adaptRow'. * @since 1.145.0 */ basketConfigurator: { type: "object", group: "Data", }, /** * Whether to show the delete action in the row actions. * @since 1.145.0 */ showDeleteAction: { type: "boolean", group: "Appearance", defaultValue: false, }, }, }; protected _basketTable: Control; // sap.ui.table.Table, sap.m.Table or sap.m.List constructor(sId?: string, settings?: $CustomBasketSettings) { super(sId, settings); // header const oHeader = new VerticalLayout(`${this.getId()}-header`, { content: [ new Button({ text: "Warning", icon: "sap-icon://warning2", tooltip: "Warning about basket", type: ButtonType.Transparent, press: () => MessageBox.information(`Warning pressed!`), }), ], }); this.setAggregation("header", oHeader); // basket table const searchBasketSapMTableSettings: $SearchBasketSapMTableSettings = { basketConfigurator: settings?.basketConfigurator, showDeleteAction: settings?.showDeleteAction, // provide a headerToolbar so SearchBasketSapMTable does not create its own default one headerToolbar: new OverflowToolbar({ content: [], }), }; this._basketTable = new SearchBasketSapMTable( `${this.getId()}-sapmtable`, searchBasketSapMTableSettings ); const oBasketModel = (this._basketTable as SearchBasketSapMTable).getBasketModel(); this.setModel(oBasketModel, "eshBasket"); // replace placeholder toolbar with the real one including Remove All (this._basketTable as SearchBasketSapMTable).setHeaderToolbar( new OverflowToolbar({ content: [ new Text(`${this.getId()}-header-text`, { text: "Custom basket (sap.m.Table)" }), (this._basketTable as SearchBasketSapMTable).createClearBasketButton(), ], }) ); // footer const oFooter = new Bar(`${this.getId()}-footer`, { contentRight: [ new Button({ text: "Proceed", type: "Emphasized", press: () => { const oSearchBasketModel = this.getBasketModel(); MessageBox.information( `Checkout pressed!\nItems in basket: ${oSearchBasketModel.getProperty("/count")}` ); }, enabled: { path: "eshBasket>/count", formatter: (count: number) => { return count > 0; }, }, }).addStyleClass("sapUiSmallMargin"), ], }); this.setAggregation("footer", oFooter); // add to layout this.setFixFirst(false); this.setFlexContent( new VerticalLayout("", { content: [this.getAggregation("header") as VerticalLayout, this._basketTable], }) ); this.addFixContent(this.getAggregation("footer") as Bar); } getBasketModel(): SearchBasketModel { return this._basketTable.getModel("eshBasket") as SearchBasketModel; } exit(): void { (this._basketTable as Control).destroy(); } static renderer = { apiVersion: 2, }; }