<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>Student</title>
<script id="sap-ui-bootstrap" type="text/javascript" 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">
</script>
<style type="text/css">
#__xmlview0--oPage-intHeader {
box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1);
background: linear-gradient(#fff, rgba(240, 240, 240, 0.9));
border-bottom: 1px solid #d4d4d4;
z-index: 1010;
transition: top .4s;
}
.sapMLabel {
font-size: 0.975rem !important;
margin-top: 15px !important;
}
.barStyle {
background-color: transparent;
}
</style>
<!-- XML-based view definition -->
<script id="oView" type="sapui5/xmlview">
<mvc:View controllerName="myView.Template" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m" xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" class="viewPadding">
<App>
<pages>
<Page id="oPage" title="Students" class="marginBoxContent">
<content>
<Bar class="barStyle">
<contentRight>
<Button text="Add Student" icon="sap-icon://add" press="onStudentAdd" />
</contentRight>
</Bar>
<Panel id="oPanel" width="auto" class="sapUiResponsiveMargin">
<content>
<l:Grid defaultSpan="L12 M12 S12" hSpacing="2" width="auto">
<l:content>
<f:Form id="FormDisplay354" minWidth="1024" maxContainerCols="2">
<f:layout>
<f:ResponsiveGridLayout labelSpanL="2" labelSpanM="2" emptySpanL="2" emptySpanM="2" columnsL="1" columnsM="1" />
</f:layout>
<f:formContainers>
<f:FormContainer>
<f:formElements>
<f:FormElement label="Name">
<f:fields>
<Input />
</f:fields>
</f:FormElement>
<f:FormElement id="oSubjectElement" label="Subjects">
<f:fields>
<Input />
<Input />
<Input />
<Button text="Add Subject" icon="sap-icon://add" press="onSubjectAdd" />
</f:fields>
</f:FormElement>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
</l:content>
</l:Grid>
</content>
</Panel>
</content>
</Page>
</pages>
</App>
</mvc:View>
</script>
<script>
// Controller definition
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/ui/model/Filter',
'sap/ui/model/json/JSONModel'
], function(jQuery, Controller, Filter, JSONModel) {
"use strict";
var PanelController = Controller.extend("myView.Template", {
onInit: function(oEvent) {
},
onStudentAdd: function(oEvent) {
var oPage = this.getView().byId("oPage");
var oLength = oPage.getContent().length;
var oPanel = this.getView().byId("oPanel");
var oPanelCopy = oPanel.clone();
var oFormContent = oPanelCopy.getContent()[0].getContent()[0];
var oFormContainer = oFormContent.getFormContainers()[0];
var oFormElements = oFormContainer.getFormElements();
if (oFormElements.length > 2) {
oFormElements.slice(0, 2);
var oElements = oFormElements;
oFormContainer.removeAllFormElements();
oFormContainer.insertFormElement(oElements[1]);
oFormContainer.insertFormElement(oElements[0]);
}
oFormElements[0].getFields()[0].setValue("");
oFormElements[1].getFields()[0].setValue("");
oFormElements[1].getFields()[1].setValue("");
oFormElements[1].getFields()[2].setValue("");
var oPage = this.getView().byId("oPage");
oPage.insertContent(oPanelCopy, oLength + 1);
},
onSubjectAdd: function(oEvent) {
var oForm = oEvent.getSource().getParent().getParent().getParent();
var oFormContainer = oForm.getFormContainers()[0];
var oLength = oFormContainer.getFormElements().length;
var oSubjectElement = this.getView().byId("oSubjectElement");
var oSubjectElementCopy = oSubjectElement.clone();
oSubjectElementCopy.getFields()[0].setValue("");
oSubjectElementCopy.getFields()[1].setValue("");
oSubjectElementCopy.getFields()[2].setValue("");
oFormContainer.insertFormElement(oSubjectElementCopy, oLength + 1);
}
});
return PanelController;
});
// Instantiate the View and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#oView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */