Skip to content

Instantly share code, notes, and snippets.

@pmarcely

pmarcely/image-ui5.html

Last active August 27, 2018 09:08
Show Gist options
  • Save pmarcely/c9483f7d27d7ccd04ea8 to your computer and use it in GitHub Desktop.
Save pmarcely/c9483f7d27d7ccd04ea8 to your computer and use it in GitHub Desktop.
Download ZIP
Upload Image in UI5
Raw
image-ui5.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="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.ui.commons, sap.ui.table, sap.ui.unified"
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("your_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();
};
/***** Upload dialog *****/
function openUploadDialog(user){
var oUploadDialog = new sap.ui.commons.Dialog();
oUploadDialog.setTitle("Upload photo");
sap.ui.getCore().getModel().refreshSecurityToken();
// prepare the FileUploader control
var oFileUploader = new sap.ui.unified.FileUploader({
uploadUrl : "your_service/UserSet('"+ user[0].getValue() +"')/Photo",
name: "simpleUploader",
uploadOnChange: false,
sendXHR: true,
useMultipart: false,
headerParameters: [
new sap.ui.unified.FileUploaderParameter({name: "x-csrf-token", value: sap.ui.getCore().getModel().getHeaders()['x-csrf-token'] }),
],
uploadComplete: function (oEvent) {
var sResponse = oEvent.getParameter("response");
if (sResponse) {
oUploadDialog.close();
sap.ui.commons.MessageBox.show("Return Code: " + sResponse, "Response", "Response");
}
}
});
// create a button to trigger the upload
var oTriggerButton = new sap.ui.commons.Button({
text:'Upload',
press:function() {
// call the upload method
oFileUploader.insertHeaderParameter(new sap.ui.unified.FileUploaderParameter({name: "slug", value: oFileUploader.getValue() }));
oFileUploader.upload();
}
});
oUploadDialog.addContent(oFileUploader);
oUploadDialog.addContent()
oUploadDialog.addContent(oTriggerButton);
oUploadDialog.open();
}
/***** User's card *****/
function openDetailDialog(user){
var oDetailDialog = new sap.ui.commons.Dialog({minWidth: "600px"});
oDetailDialog.setTitle("User's card");
var oImage = new sap.ui.commons.Image({width: "200px"});
oImage.setSrc("your_service/UserPhotoSet('"+ user[0].getValue() +"')/$value");
oImage.setAlt("alternative image text for image");
var oSimpleForm = new sap.ui.layout.form.SimpleForm({
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:"Name"}),
new sap.ui.commons.TextField({value: user[1].getValue() + " " + user[2].getValue(), editable: false}),
new sap.ui.commons.Label({text:"Age"}),
new sap.ui.commons.TextField({value: user[3].getValue(), editable: false}),
new sap.ui.commons.Label({text:"Address"}),
new sap.ui.commons.TextField({value: user[4].getValue(), editable: false}),
new sap.ui.core.Title({text:"Photo"}),
oImage,
]
});
oDetailDialog.addContent(oSimpleForm);
oDetailDialog.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: "Show user's card",
press: function() {
var idx = oTable.getSelectedIndex();
if (idx == -1) return;
var rows = oTable.getRows();
var user = rows[idx].getCells();
openDetailDialog(user);
},
}),
new sap.ui.commons.Button({
text: "Upload user's photo",
press: function() {
var idx = oTable.getSelectedIndex();
if (idx == -1) return;
var rows = oTable.getRows();
var user = rows[idx].getCells();
openUploadDialog(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