sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("StudentList.controller.Main", {
onInit: function () {
this.data = {
students: [{
firstName: "Fritz",
middleName: "",
lastName: "",
gender: 0,
dateOfBirth: null,
fathersName: "Bert",
contactNumber: "",
alternativeNumber: null,
bExisting: true
}],
};
const oModel = new sap.ui.model.json.JSONModel(this.data);
this.getView().setModel(oModel)
},
openStudentDialog: function () {
const template = Object.freeze({
firstName: "?",
middleName: null,
lastName: null,
gender: null,
dateOfBirth: null,
fathersName: null,
contactNumber: null,
alternativeNumber: null,
bExisting: false
});
this.getOwnerComponent().openSDialog(template);
},
onDetailPress: function (oEvent) {
const oCurrentStudent = oEvent.getSource().getBindingContext();
this.getOwnerComponent().openSDialog(oCurrentStudent.getObject());
},
onItemPressed: function (oEvent) {console.log("Pressed")},
onObjectListItemPress: function (oEvent) {console.log("Object Pressed")},
onDelete: function (oEvent) {oEvent.getSource().removeItem(oEvent.getParameter("listItem"))},
onDeleteStudent: function (oEvent) {
const oCurrentStudent = oEvent.getSource().getBindingContext().getObject();
const oParentViewModel = this.getView().getModel();
const oParentViewData = oParentViewModel.getData();
// this.getModel("oModel").setProperty("/path", null) .setProperty("/path", []);
oParentViewData.students = oParentViewData.students.filter(row => row !== oCurrentStudent);
oParentViewModel.setData(oParentViewData);
}
});
});
sap.ui.define([
"sap/ui/base/ManagedObject",
"sap/ui/core/Fragment"
], function (ManagedObject, Fragment) {
"use strict";
return ManagedObject.extend("StudentList.controller.StudentDialog", {
constructor: function (oParentView) {
this._oParentView = oParentView;
},
onInit: function (oEvent) {
},
open: function (record) {
const oParentView = this._oParentView;
const theView = oParentView.byId("idStudentDialog");
function populateAndOpen(theView, record) {
function clone(obj) {
return Object.assign(Object.create(Object.getPrototypeOf(obj)), obj)
}
const temp = clone(record);
temp.target = record;
theView.setModel(new sap.ui.model.json.JSONModel(temp));
theView.open()
}
// Create dialog lazily
if (!theView) {
const oFragmentController = {
onCloseDialog: function () {
oParentView.byId("idStudentDialog").close();
},
onSaveDialog: function (oEvent) {
const oParentViewModel = oParentView.getModel();
const oDialogData = oEvent.getSource().getModel().getData();
const target = oDialogData.target;
switch (oDialogData.gender) {
case 1 : oDialogData.genderText = "Male"; break;
case 2 : oDialogData.genderText = "Female"; break;
case 3 : oDialogData.genderText = "Androgynous"; break;
default: oDialogData.genderText = "Not disclosed";
}
if (oDialogData.bExisting) {
Object.keys(oDialogData).forEach(function (key) {
target[key] = oDialogData[key];
});
} else {
oDialogData.bExisting = true;
oParentViewModel.getData().students.push(oDialogData);
}
oParentViewModel.setData(oParentViewModel.getData());
oParentView.byId("idStudentDialog").close()
}
};
// load asynchronous XML fragment
Fragment.load({
id: oParentView.getId(),
name: "StudentList.view.StudentDialog",
controller: oFragmentController
}).then(function (oDialog) {
// connect dialog to the root view of this component (models, lifecycle)
// oParentView.addDependent(oDialog);
populateAndOpen(oDialog, record)
});
} else {
populateAndOpen(theView, record)
}
},
});
});
title=Student List
appTitle=App Title
appDescription=App Description
sap.ui.define([
"sap/ui/model/json/JSONModel",
"sap/ui/Device"
], function (JSONModel, Device) {
"use strict";
return {
createDeviceModel: function () {
const oModel = new JSONModel(Device);
oModel.setDefaultBindingMode("OneWay");
return oModel
}
}
});
<mvc:View xmlns:mvc="sap.ui.core.mvc"
controllerName="StudentList.controller.Main"
displayBlock="true" xmlns="sap.m">
<App>
<pages>
<Page title="{i18n>title}" class="sapUiContentPadding">
<content>
<Table id="idProductsTable"
alternateRowColors="true"
items="{/students}"
mode="Delete"
delete=".onDelete"
noDataText="No students."
selectionChange=".onItemPressed">
<headerToolbar>
<OverflowToolbar>
<ToolbarSpacer/>
<OverflowToolbarButton type="Transparent" icon="sap-icon://add"
press=".openStudentDialog"/>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Name"/>
</Column>
<Column width="12em">
<Text text="Gender"/>
</Column>
<Column width="12em">
<Text text="Date of Birth"/>
</Column>
<Column width="12em" hAlign="Center">
<Text text="Fathers Name"/>
</Column>
<Column width="12em" hAlign="Right">
<Text text="Contact Number"/>
</Column>
<Column width="12em" hAlign="Right">
<Text text="Action"/>
</Column>
</columns>
<items>
<ColumnListItem id="listItem"
type="DetailAndActive"
counter="0"
press=".onObjectListItemPress"
detailPress=".onDetailPress">
<cells>
<ObjectIdentifier title="{firstName}"/>
<Text text="{genderText}"/>
<Text text="{dateOfBirth}"/>
<Text text="{fathersName}"/>
<Text text="{contactNumber}"/>
<HBox justifyContent="End">
<Button icon="sap-icon://delete" press=".onDeleteStudent"/>
</HBox>
</cells>
</ColumnListItem>
</items>
</Table>
</content>
</Page>
</pages>
</App>
</mvc:View>
<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:f="sap.ui.layout.form"
xmlns:l="sap.ui.layout"
xmlns="sap.m">
<Dialog id="idStudentDialog">
<f:SimpleForm
class="editableForm" title="Registration Form"
columnsL="1" columnsM="1"
editable="true"
emptySpanL="0" emptySpanM="0"
labelSpanL="2" labelSpanM="2"
layout="ResponsiveGridLayout" maxContainerCols="2">
<f:content>
<HBox justifyContent="End">
<Button enabled="false" icon="sap-icon://edit"/>
<Button enabled="false" icon="sap-icon://delete"/>
</HBox>
<core:Title text="Basic Information"/>
<Label text="Name" labelFor="idFirstname"/>
<Input value="{/firstName}" id="idFirstname"
placeholder="First name"/>
<Input value="{/middleName}" placeholder="Middle name">
<layoutData>
<l:GridData span="L3 M3 S4"/>
</layoutData>
</Input>
<Input value="{/lastName}" placeholder="Last name">
<layoutData>
<l:GridData span="L3 M3 S4"/>
</layoutData>
</Input>
<core:Icon src="sap-icon://person-placeholder" size="2em"/>
<Label text="Gender" labelFor="idgender"/>
<RadioButtonGroup id="idGender"
selectedIndex="{/gender}" columns="4" width="100%">
<buttons>
<RadioButton text="No disclosure"/>
<RadioButton text="Male"/>
<RadioButton text="Female"/>
<RadioButton text="Androgynous"/>
</buttons>
</RadioButtonGroup>
<Label text="Date of Birth" labelFor="idValidFromDatePicker"/>
<DatePicker id="idValidFromDatePicker"
displayFormat="yyyy-MM-dd" valueFormat="yyyy-MM-dd"
value="{/dateOfBirth}">
<layoutData>
<l:GridData span="L4 M3 S4"/>
</layoutData>
</DatePicker>
<Label text="Fathers name" labelFor="idFathersname"/>
<Input value="{/fathersName}" id="idFathersname"
placeholder="Enter Fathers name">
<layoutData>
<l:GridData span="L4 M3 S4"/>
</layoutData>
</Input>
<Label text="Contact No." labelFor="idContactNo"/>
<Input value="{/contactNumber}" id="idContactNo"
placeholder="Enter Contact number">
<layoutData>
<l:GridData span="L4 M3 S4"/>
</layoutData>
</Input>
<Label text="AlternativeNumber No."
labelFor="idAlternativeNumber"/>
<Input value="{/alternativeNumber}"
placeholder="Enter Alternative contact number">
<layoutData>
<l:GridData span="L4 M3 S4"/>
</layoutData>
</Input>
<Label text="" labelFor="idSave"/>
<Button text="Save" id="idSave" type="Accept" press=".onSaveDialog"/>
<Button text="Cancel" id="idCancel" type="Reject" press=".onCloseDialog"/>
</f:content>
</f:SimpleForm>
</Dialog>
</core:FragmentDefinition>
<!DOCTYPE HTML>
<html>
<head>
<meta content="IE=edge" http-equiv="X-UA-Compatible"/>
<meta charset="UTF-8">
<title>Student List</title>
<meta content="" name="description">
<meta content="width=device-width, initial-scale=1" name="viewport">
<script id="sap-ui-bootstrap"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-libs="sap.m"
data-sap-ui-preload=""
data-sap-ui-resourceroots='{"StudentList": ""}'
data-sap-ui-theme="sap_belize"
src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js">
</script>
<link href="css/style.css" rel="stylesheet" type="text/css">
<script>
sap.ui.getCore().attachInit(function () {
new sap.m.Shell({
app: new sap.ui.core.ComponentContainer({
height: "100%",
name: "StudentList"
})
}).placeAt("content");
});
</script>
</head>
<body class="sapUiBody" id="content">
</body>
</html>
{
"_version": "1.12.0",
"sap.app": {
"id": "StudentList",
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
"version": "1.0.0"
},
"title": "{{appTitle}}",
"description": "{{appDescription}}"
},
"sap.ui": {
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
}
},
"sap.ui5": {
"rootView": {
"viewName": "StudentList.view.Main",
"type": "XML",
"async": true,
"id": "app"
},
"dependencies": {
"minUI5Version": "1.60",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.layout": {}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "StudentList.i18n.i18n"
}
}
},
"routing": {
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"viewPath": "StudentList.view",
"controlId": "app",
"controlAggregation": "pages"
},
"routes": [],
"targets": []
},
"resources": {
"css": [
{
"uri": "https://openui5.hana.ondemand.com/resources/sap/m/themes/sap_belize/library.css"
}
]
}
}
}
sap.ui.define([
"./controller/StudentDialog",
"./model/models",
"sap/ui/core/UIComponent",
"sap/ui/Device"
], function (StudentDialog, models, UIComponent, Device) {
"use strict";
return UIComponent.extend("StudentList.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* @public
* @override
*/
init: function () {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// set the device model
this.setModel(models.createDeviceModel(), "device");
// set dialog
this._studentDialog = new StudentDialog(this.getRootControl());
this.getRouter().initialize();
},
openSDialog: function (record) {
this._studentDialog.open(record)
}
});
});