Example of Value State and Text binding

by Arnaud Buchholz

HTML

<!DOCTYPE HTML>
<html>
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta charset="utf-8">
		<title>Just a Button</title>
		<script src="https://ui5.sap.com/resources/sap-ui-core.js"
			id="sap-ui-bootstrap"
			data-sap-ui-libs="sap.m,sap.ui.layout"
			data-sap-ui-theme="sap_fiori_3"
			data-sap-ui-async="true"></script>
	</head>
	<body id="content" class="sapUiBody">
	</body>
</html>

JavaScript

sap.ui.require([
	'sap/ui/core/Fragment',
  'sap/ui/model/json/JSONModel'
], async function (Fragment, JSONModel) {

  function xfrag (xmlContent) {
    return Fragment.load({
      type: 'XML',
      definition: `
<core:FragmentDefinition
  xmlns:core="sap.ui.core"
>
  ${xmlContent}
</core:FragmentDefinition>`
    });
  }
  
  const view = await xfrag`
<f:SimpleForm
  xmlns="sap.m"
  xmlns:f="sap.ui.layout.form"
  xmlns:core="sap.ui.core"

  title="Value state example"
  layout="ResponsiveGridLayout"
  labelSpanXL="3"
  labelSpanL="3"
  labelSpanM="3"
  labelSpanS="12"
  adjustLabelSpan="false"
  emptySpanXL="4"
  emptySpanL="4"
  emptySpanM="4"
  emptySpanS="0"
  columnsXL="1"
  columnsL="1"
  columnsM="1"
  singleContainerFullSize="false"  
>
  <f:content>
    <Label text="Control to interact with" />
    <Input id="controlId" value="Any value"
      valueState="{/controlId/ValueState}"
      valueStateText="{/controlId/valueStateText}"
    />
    <Label text="Value state" />
    <Select selectedKey="{/controlId/ValueState}">
      <core:Item key="None" text="None" />
      <core:Item key="Error" text="Error" />
      <core:Item key="Information" text="Information" />
      <core:Item key="Success" text="Success" />
      <core:Item key="Warning" text="Warning" />
    </Select>    
    <Label text="Value state text" />
    <Input value="{/controlId/valueStateText}"/>
  </f:content>
</f:SimpleForm>
`;

  view.setModel(new JSONModel({
    controlId: {}
  }));
  view.placeAt('content');
});