<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta charset="UTF-8">
<title>SAPUI5 Walkthrough</title>
<script
id="sap-ui-bootstrap"
src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'>
</script>
<script>
new sap.m.Shell("ShellId",{title: "InputError Demo",
showLogout: false,
app: new sap.ui.core.ComponentContainer({
name: "sap.ui.demo.wt"
})
}).placeAt("content");
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
// Code goes here
/* Styles go here */
jQuery.sap.declare("sap.ui.demo.wt.Component");
sap.ui.core.UIComponent.extend("sap.ui.demo.wt.Component", {
createContent : function () {
// create root view
var oView = sap.ui.view({
id : "app",
viewName : "sap.ui.demo.wt.Home",
type : "JS",
});
var dataObject = [
{Product: "Power Projector 4713", Weight: "33"},
{Product: "Gladiator MX", Weight: "33"},
{Product: "Hurricane GX", Weight: "45"},
{Product: "Webcam", Weight: "33"},
{Product: "Monitor Locking Cable", Weight: "41"},
{Product: "Laptop Case", Weight: "64"}];
var model = new sap.ui.model.json.JSONModel();
model.setData({
modelData: {
productsData : []
}
});
oView.setModel(model);
oView.getModel().setProperty("/modelData/productsData", dataObject);
return oView;
}
});
sap.ui.jsview("sap.ui.demo.wt.Home", {
/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf routingdemo.App
*/
getControllerName : function() {
return "sap.ui.demo.wt.Home";
},
/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf routingdemo.App
*/
createContent : function(oController) {
this.setDisplayBlock(true);
this.app = new sap.m.App("mainApp",{initialPage:"FirstPage"});
var page = sap.ui.xmlview("FirstPage", "sap.ui.demo.wt.FirstPage");
this.app.addPage(page);
return this.app;
}
});
sap.ui.controller("sap.ui.demo.wt.Home", {
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf zui5_sample.Home
*/
// onInit: function() {
//
// },
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf zui5_sample.Home
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf zui5_sample.Home
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf zui5_sample.Home
*/
// onExit: function() {
//
// }
});
<mvc:View
controllerName="sap.ui.demo.wt.FirstPage"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns="sap.m">
<Page
title="XML Fragment Eventing"
class="marginBoxContent" >
<content>
<FlexBox
alignItems="Start"
justifyContent="Center">
<items>
<Button
class="sapUiSmallMarginBottom"
text="Show Input"
press="handleListPress"
type="Emphasized"
icon="sap-icon://request"/>
</items>
</FlexBox>
</content>
</Page>
</mvc:View>
sap.ui.controller("sap.ui.demo.wt.FirstPage", {
onInit : function () {
this.getView().setModel(new sap.ui.model.json.JSONModel({
name : "",
email : ""
}));
// attach handlers for validation errors
sap.ui.getCore().attachValidationError(function (evt) {
var control = evt.getParameter("element");
if (control && control.setValueState) {
control.setValueState("Error");
}
});
sap.ui.getCore().attachValidationSuccess(function (evt) {
var control = evt.getParameter("element");
if (control && control.setValueState) {
control.setValueState("None");
}
});
},
handleListPress:function(){
this._oDialog = sap.ui.xmlfragment("sap.ui.demo.wt.Dialog", this);
this._oDialog.setModel(this.getView().getModel());
// toggle compact style
jQuery.sap.syncStyleClass("sapUiSizeCompact", this.getView(), this._oDialog);
this._oDialog.open();
},
handleContinue : function (evt) {
// collect input controls
var view = this.getView();
var inputs = [
view.byId("nameInput"),
view.byId("emailInput")
];
// check that inputs are not empty
// this does not happen during data binding as this is only triggered by changes
jQuery.each(inputs, function (i, input) {
if (!input.getValue()) {
input.setValueState("Error");
}
});
// check states of inputs
var canContinue = true;
jQuery.each(inputs, function (i, input) {
if ("Error" === input.getValueState()) {
canContinue = false;
return false;
}
});
// output result
if (canContinue) {
sap.m.MessageToast.show("The input is correct. You could now continue to the next screen.");
} else {
jQuery.sap.require("sap.m.MessageBox");
sap.m.MessageBox.alert("Complete your input first.");
}
},
/**
* This is a custom model type for validating email
*/
typeEMail : sap.ui.model.SimpleType.extend("email", {
formatValue: function (oValue) {
return oValue;
},
parseValue: function (oValue) {
//parsing step takes place before validating step, value can be altered
return oValue;
},
validateValue: function (oValue) {
// The following Regex is NOT a completely correct one and only used for demonstration purposes.
// RFC 5322 cannot even checked by a Regex and the Regex for RFC 822 is very long and complex.
var mailregex = /^\w+[\w-+\.]*\@\w+([-\.]\w+)*\.[a-zA-Z]{2,}$/;
if (!oValue.match(mailregex)) {
throw new sap.ui.model.ValidateException("'" + oValue + "' is not a valid email address");
}
}
})
});
<core:FragmentDefinition
xmlns="sap.m"
xmlns:core="sap.ui.core">
<Dialog
title="Select Input" >
<content>
<VBox id="oVBox">
<Label text="Name" />
<Input
id="nameInput"
class="sapUiSmallMarginBottom"
type="Text"
placeholder="Enter Name ..."
valueStateText="Name must not be empty. Maximum 10 characters."
value="{
path : '/name',
type : 'sap.ui.model.type.String',
constraints : {
minLength: 1,
maxLength: 10
}
}" />
<Label text="EMail" />
<Input
id="emailInput"
class="sapUiSmallMarginBottom"
type="Email"
placeholder="Enter EMail ..."
valueStateText="EMail must be a valid email address."
value="{
path : '/email',
type : '.typeEMail'
}" />
<Button
text="Continue"
press="handleContinue" />
</VBox>
</content>
</Dialog>
</core:FragmentDefinition>