乐趣区

关于前端:SAP-UI5-SmartForm-使用技巧介绍

jiezi

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')");
        }
    });

});

最初成果：

退出移动版