Special Instructions example

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"
			data-sap-ui-compatVersion ="edge"
		></script>
	</head>
	<body id="content" class="sapUiBody">
	</body>
</html>

JavaScript

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

	debugger;
  
  const nativeConstrutor = Event.prototype.constructor
  Event.prototype.constructor = function (...args) {
    debugger;
    nativeConstrutor.apply(this, args);
  };

	const event = new Event('test', null, {
    abc: 123
  });

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

    title="Special Instructions"
    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>
      <m:Label text="Special instruction required" />
      <m:CheckBox selected="{viewState>/siRequired}" />
      <m:Label text="Special instruction acknowledged" />
      <m:CheckBox selected="{viewState>/siAcknowledged}" />
  	</f:content>
	</f:SimpleForm>
  <m:Button id="finalizeReview"
    enabled="{= !\${viewState>/siRequired} || !!\${specialInstruction} }"
    text="Finalize review"
  />
  <m:MessageStrip id="siContent"
    visible="{= \${viewState>/siRequired} &amp;&amp; !\${specialInstruction} }"
  	text="These are the special instructions"
		type="Warning"
		showIcon="true"
  />
  <m:Button id="ackSI"
    visible="{= \${viewState>/siRequired} &amp;&amp; !\${specialInstruction} }"
    text="Acknowledge the special instructions"
  />
  <m:MessageStrip id="siAckInfo"
    visible="{= !!\${specialInstruction} }"
  	text="Instructions acknowledged by User"
		showIcon="true"
 ...