SAP UI5 SmartForm 使用技巧介绍

Jerry Wang

发布于 2022-10-04 17:46:25

2920

发布于 2022-10-04 17:46:25

sap.ui.comp.smartform.SmartForm 控件使呈现表单成为可能。根据用户授权，表单使用户能够从显示模式切换到编辑模式、添加和分组字段、重命名字段标签以及实施用户输入检查。

SmartForm 在内部使用 sap.ui.layout.form.Form 控件。将 SmartForm 控件与 SmartField 控件结合使用时，view.xml 文件仍然非常紧凑，因为有关标签和标题的所需信息是从 OData 元数据中自动提取的。此外，可以在 SmartForm 中指定它是可切换编辑的，在这种情况下，可以选择在只读模式和编辑模式之间切换。在这种情况下，SmartField 控件的强大功能真正发挥作用，例如值帮助和智能链接。

看个具体的例子：

<mvc:View 
	xmlns="sap.m"
	xmlns:mvc="sap.ui.core.mvc"
	controllerName="sap.ui.demo.smartControls.SmartForm"
	xmlns:smartForm="sap.ui.comp.smartform" 
	xmlns:smartField="sap.ui.comp.smartfield">
	<smartForm:SmartForm 
		id="smartForm"
		editTogglable="true" 
		title="{Name}"
		flexEnabled="false">
		<smartForm:Group label="Product">
			<smartForm:GroupElement>
				<smartField:SmartField value="{ProductId}" />
			</smartForm:GroupElement>
			<smartForm:GroupElement>
				<smartField:SmartField value="{Name}" />
			</smartForm:GroupElement>
			<smartForm:GroupElement elementForLabel="1">
				<smartField:SmartField value="{CategoryName}" />
				<smartField:SmartField value="{Description}" />
			</smartForm:GroupElement>
			<smartForm:GroupElement>
				<smartField:SmartField value="{Price}" />
			</smartForm:GroupElement>
		</smartForm:Group>
		<smartForm:Group label="Supplier">
			<smartForm:GroupElement>
				<smartField:SmartField value="{SupplierName}" />
			</smartForm:GroupElement>
		</smartForm:Group>
	</smartForm:SmartForm>
</mvc:View>

我们看到这里有几个新元素。 Group 指示 SmartForm 为子元素添加容器。在这种情况下，我们有两个顶级元素容器，一个用于产品，一个用于供应商。将 GroupElement 添加为 SmartFields 的包装控件后，我们指示 SmartForm 检查 OData 元数据并自动添加在那里找到的标签。在这样的 GroupElements 中，我们甚至可以定义一个前面只有一个标签的复合字段。我们在上面的示例中这样做是为了将 CategoryName 与 Description 结合起来。使用 elementForLabel=“1” 我们定义 SmartField 的标签描述（在 OData 元数据中找到）用于两个字段。 flexEnabled=“false” 设置为禁用 SAPUI5 灵活性。

使用 Nullable= false 我们定义该字段是强制性的，因此不能为空。然后，必填字段的标签在 UI 上用 * 标记。除此之外，元数据文件没有实质性差异。我们只注意到这里定义的 sap:label 属性以之前解释的最终形式出现。

控制器的实现代码：

sap.ui.define([
	"sap/ui/core/mvc/Controller" 
], function(Controller) {
	"use strict";

	return Controller.extend("sap.ui.demo.smartControls.SmartForm", {
		onInit: function() {
			this.getView().byId("smartFormPage").bindElement("/Products('4711')");
		}
	});

});

最后效果：