Question

我已经按照定义设计了一个简单的表格。如果我想将消息添加到复选框下方，我们如何添加消息？我期望这样的输出：

<Label text="..." required="true">
  <layoutData>
    <l:GridData span="L2 M3 S7"/>
  </layoutData>
</Label>
<Select>
  <layoutData>
    <l:GridData span="L2 M3 S5"/>
  </layoutData>
</Select>
<CheckBox text="....">
  <layoutData>
    <l:GridData span="L2 M3 S7"/>
  </layoutData>
</CheckBox>
<TextArea value=" " rows="3">
  <layoutData>
    <l:GridData span="L2 M3 S5"/>
  </layoutData>
</TextArea>
<CheckBox text="...." >
  <layoutData>
    <l:GridData span="L2 M3 S7"/>
  </layoutData>
</CheckBox>
<TextArea value=" " rows="3">
  <layoutData>
    <l:GridData span="L2 M3 S5"/>
  </layoutData>
</TextArea>

Answer 1

您可以通过使用VBox控件来实现

<CheckBox text="Custom Note">
    <layoutData>
        <l:GridData span="L2 M3 S6"/>
    </layoutData>
</CheckBox>
<VBox>
    <TextArea value=" " rows="3" />
    <Label text="Max allowed chars 150" wrapping="true"/>
    <layoutData>
        <l:GridData span="L2 M3 S6"/>
    </layoutData>
</VBox>
<CheckBox text="Exception" >
    <layoutData>
        <l:GridData span="L2 M3 S6"/>
    </layoutData>
</CheckBox>
<VBox>
    <TextArea value=" " rows="3"/>                                     
    <Label text="Max allowed chars 150" wrapping="true"/>
    <layoutData>
        <l:GridData span="L2 M3 S6"/>
    </layoutData>
</VBox>

输出

Answer 2

我期望这样的输出：

对于CheckBox，请使用属性text。
对于TextArea下面的字符限制消息，有两个选项：
1. 没有value绑定：只需定义maxLength并设置showExceededText="true"。
2. 具有value绑定：将value与类型sap.ui.model(.odata).type.String和maxLength: 150绑定。如果超出字符数限制，UI5将相应地处理显示消息。有关更多信息，请参见文档主题 Error, Warning, and Info Messages 。

sap.ui.getCore().attachInit(() => sap.ui.require([
  "sap/ui/core/Fragment",
  "sap/ui/model/json/JSONModel",
  "sap/ui/core/Core",
], (Fragment, JSONModel, Core) => Fragment.load({
  definition: `<App xmlns="sap.m" autoFocus="false">
    <Page class="sapUiResponsiveContentPadding" showHeader="false">
      <HBox renderType="Bare" justifyContent="SpaceAround">
        <CheckBox text="My custom checkbox text" />
        <TextArea xmlns:core="sap.ui.core" core:require="{ StringType: 'sap/ui/model/type/String' }"
          value="{
            path: '/value',
            type: 'StringType',
            constraints: {
              maxLength: 150
            }
          }"
          maxLength="150"
          width="100%"
          height="5.5rem"
          showExceededText="true"
        >
          <layoutData>
            <FlexItemData maxWidth="13rem"/>
          </layoutData>
        </TextArea>
      </HBox>
    </Page>
  </App>`,
}).then(control => Core.getMessageManager().registerObject(control.setModel(new JSONModel({
  value: "",
})).placeAt("content"), true))));

<script id="sap-ui-bootstrap"
  src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
  data-sap-ui-libs="sap.ui.core, sap.m"
  data-sap-ui-async="true"
  data-sap-ui-theme="sap_fiori_3"
  data-sap-ui-compatversion="edge"
  data-sap-ui-xx-waitfortheme="init"
></script>
<body id="content" class="sapUiBody sapUiSizeCompact"></body>

如果超出限制（使用value绑定和type）：

如何在表单中添加消息

2 个答案: