如何在表单中添加消息

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

I am expecting output as like this:

对于CheckBox，使用属性 text。
对于TextArea以下的字符限制消息，有两种选择：
1. 没有 value-绑定：只需定义 maxLength 并设置 showExceededText="true".
2. 使用 value-绑定：使用类型 sap.ui.model(.odata).type.String 和 maxLength: 150 绑定 value。如果超出字符限制，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）：

如何在表单中添加消息

How to add a message in form

sapui5