SAP UI5 SmartForm 使用技巧介绍

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

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


最后效果:


相关文章
|
2月前
|
前端开发 搜索推荐 开发者
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
SAP UI5 sap.m.Column 控件的 minScreenWidth 属性介绍
32 0
|
2月前
|
JavaScript 前端开发 开发者
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
SAP UI5 控件 sap.m.ListBase 的 inset 属性的作用介绍
17 0
|
2月前
|
Web App开发 数据采集 前端开发
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
纯技术讨论:如何让 SAP UI5 应用无法被别人在浏览器里调试 - 这种做法不推荐试读版
16 0
|
2月前
|
XML 存储 数据格式
SAP UI5 控件 customData 属性的应用介绍
SAP UI5 控件 customData 属性的应用介绍
35 0
|
2月前
|
前端开发 JavaScript API
SAP UI5 sap.ui.require.toUrl 的作用介绍
SAP UI5 sap.ui.require.toUrl 的作用介绍
33 0
|
2月前
|
搜索推荐
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
如何让 SAP UI5 Smart Table 支持多项选择(Multiple-Selection)试读版
19 0
|
2月前
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
使用 SAP UI5 Event Bus 机制,修复 SAP UI5 分页显示数据的一个 bug 试读版
21 0
|
2月前
|
开发者 UED
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
SAP UI5 SmartFilterBar 中 ControlConfiguration Aggregation 的作用介绍
15 0
|
2月前
|
开发者 UED
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
关于 SAP UI5 sap.m.Column 的 demandPopin 属性
15 0
|
2月前
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
SAP UI5 Link 控件的使用方法介绍 - 后续学习 Fiori Elements Smart Link 的基础试读版
15 0