Skip to content

Instantly share code, notes, and snippets.

@pmarcely

pmarcely/ui5-app.html

Last active August 29, 2015 14:04
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pmarcely/186ccfc03d572fafbee6 to your computer and use it in GitHub Desktop.
Save pmarcely/186ccfc03d572fafbee6 to your computer and use it in GitHub Desktop.
Download ZIP
Sample ui5 app that consumes oData service
Raw
ui5-app.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.ui.table"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
//create the ApplicationHeader control
var oAppHeader = new sap.ui.commons.ApplicationHeader("appHeader");
oAppHeader.setLogoSrc("http://sap.github.io/openui5/images/icotxt_white_220x72_blue_open.png");
oAppHeader.setDisplayWelcome(false);
oAppHeader.setDisplayLogoff(false);
oAppHeader.placeAt("content");
// setting up model
var oModel = new sap.ui.model.odata.ODataModel("link_to_your_odata_service", false);
sap.ui.getCore().setModel(oModel);
/***** CREATE Operation *****/
function openCreateDialog(){
var oCreateDialog = new sap.ui.commons.Dialog();
oCreateDialog.setTitle("Create user");
var oSimpleForm = new sap.ui.layout.form.SimpleForm({
maxContainerCols: 2,
content:[
new sap.ui.core.Title({text:"Person"}),
new sap.ui.commons.Label({text:"Email"}),
new sap.ui.commons.TextField({value:""}),
new sap.ui.commons.Label({text:"Firstname"}),
new sap.ui.commons.TextField({value:""}),
new sap.ui.commons.Label({text:"Lastname"}),
new sap.ui.commons.TextField({value:""}),
new sap.ui.commons.Label({text:"Age"}),
new sap.ui.commons.TextField({value:""}),
new sap.ui.commons.Label({text:"Address"}),
new sap.ui.commons.TextField({value:""}),
]
});
oCreateDialog.addContent(oSimpleForm);
oCreateDialog.addButton(
new sap.ui.commons.Button({
text: "Submit",
press: function() {
var content = oSimpleForm.getContent();
var oEntry = {};
oEntry.Email = content[2].getValue();
oEntry.Firstname = content[4].getValue();
oEntry.Lastname = content[6].getValue();
oEntry.Age = content[8].getValue();
oEntry.Address = content[10].getValue();
sap.ui.getCore().getModel().create('/UserSet', oEntry, null, function(){
oCreateDialog.close();
sap.ui.getCore().getModel().refresh();
},function(){
oCreateDialog.close();
alert("Create failed");
}
);
}
})
);
oCreateDialog.open();
};
/***** PUT Operation *****/
function openUpdateDialog(user){
var oUpdateDialog = new sap.ui.commons.Dialog();
oUpdateDialog.setTitle("Update user's data");
var oSimpleForm = new sap.ui.layout.form.SimpleForm({
maxContainerCols: 2,
content:[
new sap.ui.core.Title({text:"Person"}),
new sap.ui.commons.Label({text:"Email"}),
new sap.ui.commons.TextField({value: user[0].getValue(), editable: false}),
new sap.ui.commons.Label({text:"Firstname"}),
new sap.ui.commons.TextField({value: user[1].getValue()}),
new sap.ui.commons.Label({text:"Lastname"}),
new sap.ui.commons.TextField({value: user[2].getValue()}),
new sap.ui.commons.Label({text:"Age"}),
new sap.ui.commons.TextField({value: user[3].getValue()}),
new sap.ui.commons.Label({text:"Address"}),
new sap.ui.commons.TextField({value: user[4].getValue()}),
]
});
oUpdateDialog.addContent(oSimpleForm);
oUpdateDialog.addButton(
new sap.ui.commons.Button({
text: "Submit",
press: function() {
var content = oSimpleForm.getContent();
var oEntry = {};
oEntry.Email = content[2].getValue();
oEntry.Firstname = content[4].getValue();
oEntry.Lastname = content[6].getValue();
oEntry.Age = content[8].getValue();
oEntry.Address = content[10].getValue();
sap.ui.getCore().getModel().update("/UserSet('" + oEntry.Email + "')", oEntry, null, function(){
sap.ui.getCore().getModel().refresh();
oUpdateDialog.close();
},function(){
oUpdateDialog.close();
alert("Update failed");
}
);
}
})
);
oUpdateDialog.open();
};
/***** DELETE Operation *****/
function openDeleteDialog(email) {
var oDeleteDialog = new sap.ui.commons.Dialog();
oDeleteDialog.setTitle("Delete user");
var oText = new sap.ui.commons.TextView({text: "Are you sure to delete this user?"});
oDeleteDialog.addContent(oText);
oDeleteDialog.addButton(
new sap.ui.commons.Button({
text: "Confirm",
press:function(){
sap.ui.getCore().getModel().remove("/UserSet('" + email + "')", null, function() {
sap.ui.getCore().getModel().refresh();
oDeleteDialog.close();
},function(){
oDeleteDialog.close();
alert("Delete failed");
});
}
})
);
oDeleteDialog.open();
}
// setting up table
var oTable = new sap.ui.table.Table({
editable: false,
toolbar: new sap.ui.commons.Toolbar({
items: [
new sap.ui.commons.Button({
text: "Create user",
press: function() {
openCreateDialog();
},
}),
new sap.ui.commons.Button({
text: "Update user's data",
press: function() {
var idx = oTable.getSelectedIndex();
if (idx == -1) return;
var rows = oTable.getRows();
var user = rows[idx].getCells();
openUpdateDialog(user);
},
}),
new sap.ui.commons.Button({
text: "Delete user",
press: function() {
var idx = oTable.getSelectedIndex();
if (idx == -1) return;
var rows = oTable.getRows();
var user = rows[idx].getCells();
openDeleteDialog(user[0].getValue());
},
})
]
}),
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Email"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Email"),
editable: false,
sortProperty: "Email"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Firstname"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Firstname"),
sortProperty: "Firstname",
editable: false,
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Lastname"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Lastname"),
sortProperty: "Lastname",
editable: false,
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Age"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Age"),
sortProperty: "Age",
editable: false,
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({text: "Address"}),
template: new sap.ui.commons.TextField().bindProperty("value", "Address"),
sortProperty: "Address",
editable: false,
}));
oTable.setModel(oModel);
oTable.bindRows("/UserSet");
oTable.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment