sap fiori freestyle 搜索帮助开发

方式1.Smart Field实现

SAPUI5 SDK - Demo Kit

方式2.自定义ValueHelpDialog实现

2.1view文件夹下新建fragment.xml文件

<core:FragmentDefinition controllerName="xx.controller.ValueHelpDialog" xmlns="sap.ui.comp.valuehelpdialog" xmlns:m="sap.m" xmlns:fb="sap.ui.comp.filterbar" xmlns:core="sap.ui.core">
    <ValueHelpDialog supportMultiselect="false">
        <filterBar>
            <fb:FilterBar advancedMode="true" search=".onFilterBarSearch" isRunningInValueHelpDialog="true" filterBarExpanded="true">
                <fb:filterGroupItems />
            </fb:FilterBar>
        </filterBar>
    </ValueHelpDialog>
</core:FragmentDefinition>

2.2 controller中增加代码:

            /**采购订单搜索帮助 */
			EbelnValueHelp: function () {
				if (context._oValueHelpDialog) {
					oView.setModel(new JSONModel(), "EbelnModel");
					context._oValueHelpDialog.close();
					context._oValueHelpDialog.destroyFilterBar();
				}
				function onValueHelpCancelPress() {
					context._oValueHelpDialog.close();
				};
				function onValueHelpOkPress(oEvent) {
					var aTokens = oEvent.getParameter("tokens")[0].getKey();
					oView.byId("Ebeln").setValue(aTokens);
					context._oValueHelpDialog.close();
				};
				var sCols = {
					"cols": [
						{
							"label": "采购凭证",
							"template": "EbelnModel>Ebeln"
							, "key": "Ebeln"
						}, {
							"label": "项目",
							"template": "EbelnModel>Ebelp"
							, "key": "Ebelp"
						}, {
							"label": "物料",
							"template": "EbelnModel>Matnr"
							, "key": "Matnr"
						}, {
							"label": "工厂",
							"template": "EbelnModel>Werks"
							, "key": "Werks"
						}, {
							"label": "存储地点",
							"template": "EbelnModel>Lgort"
							, "key": "Lgort"
						}, {
							"label": "采购订单数量",
							"template": "EbelnModel>Menge"
							, "key": "Menge"
						}, {
							"label": "订单单位",
							"template": "EbelnModel>Meins"
							, "key": "Meins"
						}
					]
				}
				context._oBasicSearchField = new sap.m.SearchField({
					showSearchButton: false,
					placeholder: "请输入订单编号搜索"
				});
				Fragment.load({
					name: "cn.enn.mm.scaninstorages.view.ValueHelpDialogFilterbar",
					controller: context,
				}).then(function name(oFragment) {
					context._oValueHelpDialog = oFragment;
					context._oValueHelpDialog.setKey("Ebeln");
					context._oValueHelpDialog.setDescriptionKey("Ebeln");
					context._oValueHelpDialog.setTitle("采购订单");
					context._oValueHelpDialog.attachCancel(onValueHelpCancelPress);
					context._oValueHelpDialog.attachOk(onValueHelpOkPress);
					var oFilterBar = context._oValueHelpDialog.getFilterBar();
					sCols.cols.map(function (column) {
						if (column.template && column.template != "") {
							if (column.key != "Ebeln") {

								var oFilterGroupItem = new sap.ui.comp.filterbar.FilterGroupItem(
									{
										groupName: "ValueHelpDialog",
										groupTitle: "ValueHelpDialog",
										name: column.template,
										label: column.label,
										visibleInFilterBar: true,
										control: new Input({ name: column.key })
									}
								);
								oFilterBar.addFilterGroupItem(oFilterGroupItem);
							}
						}
					})
					// var bukers = oView.byId("companyCode").getSelectedKey();
					// var oFilterGroupItem = new sap.ui.comp.filterbar.FilterGroupItem(
					// 	{
					// 		groupName: "ValueHelpDialog",
					// 		groupTitle: "ValueHelpDialog",
					// 		name: "BUKRS",
					// 		label: "公司代码",
					// 		visibleInFilterBar: true,
					// 		control: new sap.m.Input({ name: "BUKRS", value: bukers, })
					// 	}
					// );
					// oFilterBar.addFilterGroupItem(oFilterGroupItem);

					context.getView().addDependent(context._oValueHelpDialog);

					// context._oValueHelpDialog.setRangeKeyFields([{
					// 	label: "Product",
					// 	key: "ProductId",
					// 	type: "string",
					// 	typeInstance: new TypeString({}, {
					// 		maxLength: 7
					// 	})
					// }]);

					context._oValueHelpDialog.getFilterBar().setBasicSearch(context._oBasicSearchField);

					context._oValueHelpDialog.getTableAsync().then(function (oTable) {
						//oTable.setModel(context.oProductsModel);
						oTable.setModel(new JSONModel(sCols), "columns");

						if (oTable.bindRows) {
							oTable.bindAggregation("rows", "EbelnModel>/results");
						}

						if (oTable.bindItems) {
							oTable.bindAggregation("items", "EbelnModel>/results", function () {
								return new ColumnListItem({
									cells: sCols.cols.map(function (column) {
										return new Label({ text: "{" + column.template + "}" });
									})
								});
							});
						}

						context._oValueHelpDialog.update();
					}.bind(context));

					//context._oValueHelpDialog.setTokens(context._oMultiInput.getTokens());
					context._oValueHelpDialog.open();
				}.bind(context));


			},
			/**采购订单信息查询 */
			onFilterBarSearch: function (oEvent) {
				var sSearchQuery = context._oBasicSearchField.getValue(),
					aSelectionSet = oEvent.getParameter("selectionSet");
				var aFilters = [];

				aSelectionSet.reduce(function (aResult, oControl) {
					if (oControl.getValue()) {
						aFilters.push(new Filter({
							path: oControl.getProperty("name"),
							operator: FilterOperator.EQ,
							value1: oControl.getValue()
						}));
						//var name = oControl.getName();
						//oRealParams[name] = oControl.getValue();
					}

					return aResult;
				}, []);
				if (sSearchQuery && sSearchQuery != "") {
					var oEbeln = new sap.ui.model.Filter("Ebeln", sap.ui.model.FilterOperator.EQ, sSearchQuery);
					aFilters.push(oEbeln);
				}

				context.showLoading();
				function readSuccess(oData, oResponse) {
					context.closeLoading();
					var resultList = oData.results;
					var commonJson = {};
					if (!resultList || resultList == "") {
						commonJson = { results: [] }
					} else {
						commonJson = { results: resultList }
					}
					var EbelnModel = new JSONModel(commonJson);
					EbelnModel.setSizeLimit(10000);
					oView.setModel(EbelnModel, "EbelnModel");
				}
				context.getOwnerComponent().getModel().read("/YekkoHSet", {
					filters: aFilters,

					success: readSuccess,
					error: context.readError
				});
			},
            readError: function (oError) {
				context.closeLoading();
				context.messageBoxError(oError.message);
			},
			showLoading: function (message) {
				context.closeLoading();
				oView.busyDialog = new BusyDialog({ text: message });
				oView.busyDialog.open();
			},
			closeLoading: function () {
				if (oView.busyDialog) {
					oView.busyDialog.close();
				}
			},
            messageBoxError: function (sMessage) {
				sMessage = sMessage.replaceAll('\\n', '\n')
				MessageBox.error(sMessage);
			},
			messageBoxInformation: function (sMessage) {
				sMessage = sMessage.replaceAll('\\n', '\n')
				MessageBox.information(sMessage);
			},
			messageBoxSuccess: function (sMessage) {
				sMessage = sMessage.replaceAll('\\n', '\n')
				MessageBox.information(sMessage);
			}