- SAP Managed Tags:
Hi Readers,
Good Day.
Steps includes:
Introduction:
You can use the Planning Calendar to represent a calendar containing multiple rows with appointments, where each row represents a different person.
You can configure different time-interval views so that the user can switch between hours, days, week, and month. The available navigation allows the user to select a specific interval using a picker or move to the previous/next interval using arrows.
Use Case:
We can use the Planning Calendar to schedule meetings with our team on hourly, daily, weekly and monthly basis.
Technical Specification:
The application developer should add dependency to sap.ui.unified library on application level to ensure that the library is loaded before the module dependencies will be required. The Planning Calendar uses parts of the sap.ui.unified library. This library will be loaded after the Planning Calendar.
Displays rows with appointments for different entities (such as persons or teams) for the selected time interval.
The Planning Calendar has the following structure from top to bottom:
Let me demonstrate how I achieved in developing Planning Calendar and perform the CRUD operations with JSON data step by step.
The default view of the planning calendar will be look like as below, where showing drop down values/options - Hours, days, Months, 1Week and 1Month.
Step 1: Create a JSON Data
Now I have created a JSON Data in controller file as below.
Step 2 : Binding the JSON Data to the Planning Calendar in View.
Now run the application and the planning calendar will be like as below.
Now I have customized the planning calendar view to 3 months view as below.
This code snippet is for developing custom views for displaying Months, Weeks, Days and hours
Add below code in onInIt function.
Now run the application and the planning calendar will be look like as below.
Step 4: Performing CRUD Operations in Planning Calendar.
Create Operation.
Add a create button on the tool bar in the calendar view.
The Create button will be look like this.
Step 5: Fragments
Add below code in fragments folder to create a dialog for new appointment.
CreateFrag.fragment.xml
Add below code in controller to open new appointment dialog.
Click on create button then create dialog will open.
Add below code in controller for save the entered data.
Read Operation
Once the appointment is created then the meeting details will be shown on row.
Add below code in new fragment to open saved data.
Add below code in RowDetailsFrag.fragment.xml
Add below code in controller to open saved data.
Detailed appointment information will be displayed by clicking on the appointment.
Update Operation:
With this operation, we will be able to edit the appointment scheduled and appointment can be re-scheduled.
Click on Edit button, then new dialog will pop up and user has the privilege to edit the appointment details.
Edit the details as per the need and click on Save
Data will be saved, and appointment has be modified successfully.
For update operation we need to create another fragment.
Add below code in EditRowDetails Fragment (EditRowDetailsFrag.fragment.xml)
Add below code in controller for update operation.
Delete Operation:
This Operation will delete the appointment from the calendar.
Click on Delete button to perform this operation.
Appointment Deleted Successfully.
Add below code in controller for Delete operation.
Conclusion:
After reading this blog post you will be able to create custom planning colander and perform CURD operations on planning colander in BAS.
Please feel free to suggest if any correction is needed:)
Good Day.
In this blog post I am going to explain How to Create custom views and Create, Read, Update and Delete appointments using Planning Calendar with JSON Data in BAS (Business Application Studio).
Steps includes:
- Create a JSON Data
- Create a Planning Calendar and bind the JSON Data to the Planning Calendar.
- Adding a custom Views to the Planning Calendar.
- Performing CRUD Operations in Planning Calendar.
Introduction:
You can use the Planning Calendar to represent a calendar containing multiple rows with appointments, where each row represents a different person.
You can configure different time-interval views so that the user can switch between hours, days, week, and month. The available navigation allows the user to select a specific interval using a picker or move to the previous/next interval using arrows.
Use Case:
We can use the Planning Calendar to schedule meetings with our team on hourly, daily, weekly and monthly basis.
Technical Specification:
The application developer should add dependency to sap.ui.unified library on application level to ensure that the library is loaded before the module dependencies will be required. The Planning Calendar uses parts of the sap.ui.unified library. This library will be loaded after the Planning Calendar.
Displays rows with appointments for different entities (such as persons or teams) for the selected time interval.
The Planning Calendar has the following structure from top to bottom:
- A toolbar where you can add your own buttons or other controls using the toolbar Content aggregation.
- A header containing a drop-down menu for selecting the PlanningCalendarViews, and navigation for moving through the intervals using arrows or selecting a specific interval with a picker. Custom views can be configured using the views aggregation. If not configured, the following set of default built-in views is available - Hours, Days, 1 Week, 1 Month, and Months. Setting a custom view(s) replaces the built-in ones.
- The rows of the Planning Calendar that contain the assigned appointments. They can be configured with the rows aggregation, which is of type PlanningCalendarRow.
Let me demonstrate how I achieved in developing Planning Calendar and perform the CRUD operations with JSON data step by step.
The default view of the planning calendar will be look like as below, where showing drop down values/options - Hours, days, Months, 1Week and 1Month.
Step 1: Create a JSON Data
Now I have created a JSON Data in controller file as below.
onInit: function () {
var that = this;
var oViewModel = new JSONModel({
"titleVal": "",
"shortDateVal": "",
"endDateVal": "",
"InfoVal": ""
});
that.getView().setModel(oViewModel, "createModel");
var employeeImage = "https://png.pngtree.com/png-vector/20190710/ourmid/pngtree-user-vector-avatar-png-image_1541962.jpg";
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2023", "0", "15", "8", "0"),
people: [{
pic: employeeImage,
name: "Team Member 1",
role: "Team Leader",
info: "Daily Status",
appointments: [
{
start: new Date("2023", "0", "8", "08", "30"),
end: new Date("2023", "01", "8", "09", "30"),
title: "Team Meeting",
type: "Type03",
info: "Discussion about daily Task",
tentative: false
},
{
start: new Date("2023", "0", "11", "10", "0"),
end: new Date("2023", "0", "11", "12", "0"),
title: "Team Outing",
info: "room 1",
type: "Type01",
pic: "sap-icon://company-view",
tentative: false
},
{
start: new Date("2023", "1", "12", "11", "30"),
end: new Date("2023", "1", "12", "13", "30"),
title: "Lunch",
info: "Canteen",
type: "Type04",
tentative: true
},
{
start: new Date("2023", "4", "15", "11", "30"),
end: new Date("2023", "4", "15", "13", "30"),
title: "Lunch",
info: "Canteen",
type: "Type02",
tentative: true
},
{
start: new Date("2023", "3", "15", "13", "30"),
end: new Date("2023", "3", "15", "17", "30"),
title: "Discussion with clients",
info: "online meeting",
type: "Type05",
tentative: false
},
{
start: new Date("2023", "5", "16", "04", "00"),
end: new Date("2023", "5", "16", "22", "30"),
title: "Discussion of the plan",
info: "Online meeting",
type: "Type06",
tentative: false
},
{
start: new Date("2023", "1", "18", "08", "30"),
end: new Date("2023", "2", "18", "09", "30"),
title: "Meeting with the manager",
type: "Type07",
tentative: false,
info: "Concerns and Requests",
},
{
start: new Date("2023", "3", "18", "11", "30"),
end: new Date("2023", "3", "18", "13", "30"),
title: "Lunch",
info: "canteen",
type: "Type08",
tentative: true
},
{
start: new Date("2023", "6", "21", "00", "30"),
end: new Date("2023", "6", "21", "23", "30"),
title: "New Product",
info: "room 105",
type: "Type09",
tentative: true
},
{
start: new Date("2023", "7", "25", "11", "30"),
end: new Date("2023", "7", "25", "13", "30"),
title: "Lunch",
info: "room 4",
type: "Type10",
tentative: true
},
{
start: new Date("2023", "8", "29", "10", "0"),
end: new Date("2023", "8", "29", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type11",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2023", "9", "30", "08", "30"),
end: new Date("2023", "9", "30", "09", "30"),
title: "Meet Max Mustermann",
type: "Type02",
info: "Client Visit",
tentative: false
},
{
start: new Date("2023", "10", "30", "10", "0"),
end: new Date("2023", "10", "30", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type03",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2023", "11", "30", "11", "30"),
end: new Date("2023", "11", "30", "13", "30"),
title: "Lunch",
type: "Type04",
info: "room 1",
tentative: true
},
{
start: new Date("2023", "1", "31", "10", "00"),
end: new Date("2023", "1", "31", "11", "30"),
title: "Discussion of the plan",
info: "Online meeting",
type: "Type05",
tentative: false
},
{
start: new Date("2023", "01", "3", "08", "30"),
end: new Date("2023", "01", "13", "09", "30"),
title: "Meeting with the manager",
type: "Type01",
info: "Skill information",
tentative: false
},
{
start: new Date("2023", "01", "4", "10", "0"),
end: new Date("2023", "01", "4", "12", "0"),
title: "Team meeting",
info: "room 1",
type: "Type06",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2023", "02", "30", "10", "0"),
end: new Date("2023", "04", "33", "12", "0"),
title: "Working out of the building",
type: "Type07",
info: "room 03",
pic: "sap-icon://sap-ui5",
tentative: false
}
],
headers: [
{
start: new Date("2023", "0", "15", "8", "0"),
end: new Date("2023", "0", "15", "10", "0"),
title: "Reminder",
type: "Type06"
},
{
start: new Date("2023", "0", "15", "17", "0"),
end: new Date("2023", "0", "15", "19", "0"),
title: "Reminder",
type: "Type07"
},
{
start: new Date("2023", "08", "1", "0", "0"),
end: new Date("2023", "10", "30", "23", "59"),
title: "New quarter",
type: "Type02",
tentative: false
},
{
start: new Date("2018", "01", "1", "0", "0"),
end: new Date("2018", "03", "30", "23", "59"),
title: "New quarter",
type: "Type04",
tentative: false
}
]
},
{
pic: employeeImage,
name: "Team Member 2",
role: "Technical Consultant",
appointments: [
{
start: new Date("2023", "0", "15", "18", "00"),
end: new Date("2023", "0", "15", "19", "10"),
title: "Discussion of the plan",
info: "Online meeting",
type: "Type04",
tentative: false
},
{
start: new Date("2023", "0", "16", "10", "0"),
end: new Date("2023", "0", "31", "03", "0"),
title: "Workshop out of the country",
type: "Type07",
info: "room 4",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2018", "0", "1", "0", "0"),
end: new Date("2018", "02", "31", "23", "59"),
title: "New quarter",
type: "Type10",
info: "room 05",
tentative: false
},
{
start: new Date("2023", "01", "11", "10", "0"),
end: new Date("2023", "02", "20", "12", "0"),
title: "Team collaboration",
info: "room 11",
type: "Type05",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2023", "03", "01", "10", "0"),
end: new Date("2023", "03", "31", "12", "0"),
title: "Workshop out of the country",
type: "Type07",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2023", "04", "01", "10", "0"),
end: new Date("2023", "04", "31", "12", "0"),
title: "Out of the office",
info: "room 01",
type: "Type08",
tentative: false
},
{
start: new Date("2023", "07", "1", "0", "0"),
end: new Date("2023", "07", "31", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
}
],
headers: [
{
start: new Date("2023", "0", "15", "9", "0"),
end: new Date("2023", "0", "15", "10", "0"),
title: "Payment reminder",
info: "room 04",
type: "Type04"
},
{
start: new Date("2023", "0", "15", "16", "30"),
end: new Date("2023", "0", "15", "18", "00"),
title: "Private appointment",
info: "room 01",
type: "Type06"
}
]
},
{
pic: employeeImage,
name: "Team Member 3",
role: "Technical Specilist",
appointments: [
{
start: new Date("2023", "0", "15", "08", "30"),
end: new Date("2023", "0", "15", "09", "30"),
title: "Meet John Miller",
type: "Type02",
info: "room 03",
tentative: false
},
{
start: new Date("2023", "0", "16", "0", "0"),
end: new Date("2023", "0", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type08",
tentative: false
},
{
start: new Date("2023", "1", "22", "07", "00"),
end: new Date("2023", "1", "27", "17", "30"),
title: "Discussion with clients",
info: "Client Meeting",
type: "Type10",
tentative: false
},
{
start: new Date("2023", "02", "13", "9", "0"),
end: new Date("2023", "02", "17", "10", "0"),
title: "Payment week",
info: "Room 10",
type: "Type04"
},
{
start: new Date("2023", "03", "10", "0", "0"),
end: new Date("2023", "05", "16", "23", "59"),
title: "Vacation",
info: "out of office",
type: "Type04",
tentative: false
},
{
start: new Date("2023", "07", "1", "0", "0"),
end: new Date("2023", "09", "31", "23", "59"),
title: "New quarter",
info: "Room 11",
type: "Type10",
tentative: false
}
],
headers: [
{
start: new Date("2023", "0", "16", "0", "0"),
end: new Date("2023", "0", "16", "23", "59"),
title: "Private",
info: "Room 11",
type: "Type05"
}
]
},
{
pic: employeeImage,
name: "Team Member 4",
role: "Associate Trainee",
appointments: [
{
start: new Date("2023", "01", "15", "08", "30"),
end: new Date("2023", "01", "15", "09", "30"),
title: "Meet John Miller",
type: "Type02",
info: "Client Meeting",
tentative: false
},
{
start: new Date("2023", "02", "17", "1", "0"),
end: new Date("2023", "02", "18", "22", "0"),
title: "Workshop",
info: "regular",
type: "Type08",
pic: "sap-icon://sap-ui5",
tentative: false
},
{
start: new Date("2023", "03", "13", "9", "0"),
end: new Date("2023", "03", "17", "10", "0"),
title: "Payment week",
info: "Room 12",
type: "Type08"
},
{
start: new Date("2023", "04", "1", "0", "0"),
end: new Date("2023", "04", "31", "23", "59"),
title: "New quarter",
info: "Room 13",
type: "Type10",
tentative: false
}
],
headers: [
{
start: new Date("2023", "01", "16", "0", "0"),
end: new Date("2023", "01", "16", "23", "59"),
title: "Private",
type: "Type05"
}
]
}
]
});
that.getView().setModel(oModel, "CalenderModel");
},Step 2 : Binding the JSON Data to the Planning Calendar in View.
<PlanningCalendar
id="idITCalendarTable"
startDate="{path: 'CalenderModel>/startDate'}"
rows="{path: 'CalenderModel>/people'}"
appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect"
showEmptyIntervalHeaders="false"
viewKey="Month"
stickyHeader="true"
>
<toolbarContent>
<Title id="titleId" text="{i18n>toolBarTitle}" titleStyle="H4" />
</toolbarContent>
<rows>
<PlanningCalendarRow id="palRowId" icon="{CalenderModel>pic}" title="{CalenderModel>name}" text="{CalenderModel>role}" appointments="{path : 'CalenderModel>appointments', templateShareable: false}" intervalHeaders="{path: 'CalenderModel>headers', templateShareable: false}">
<appointments>
<unified:CalendarAppointment id="calAppointmentId" startDate="{CalenderModel>start}" endDate="{CalenderModel>end}" icon="{CalenderModel>pic}" title="{CalenderModel>title}" text="{CalenderModel>info}" type="{CalenderModel>type}" tentative="{CalenderModel>tentative}" />
</appointments>
<intervalHeaders>
<unified:CalendarAppointment id="calHeaderId" startDate="{CalenderModel>start}" endDate="{CalenderModel>end}" icon="{CalenderModel>pic}" title="{CalenderModel>title}" type="{CalenderModel>type}" />
</intervalHeaders>
</PlanningCalendarRow>
</rows>
</PlanningCalendar>Now run the application and the planning calendar will be like as below.
Now I have customized the planning calendar view to 3 months view as below.
This code snippet is for developing custom views for displaying Months, Weeks, Days and hours
Add below code in onInIt function.
var oSPC = that.getView().byId("idITCalendarTable"),
oMyCustomThreeMonthsView = new sap.m.PlanningCalendarView({
key: "Month",
intervalType: "Month",
description: "3 Months",
intervalsS: 1,
intervalsM: 3,
intervalsL: 3,
subIntervals: true
}),
oMyMonthsView = new sap.m.PlanningCalendarView({
key: "Months",
intervalType: "Month",
description: "Months",
intervalsS: 3,
intervalsM: 12,
intervalsL: 12,
subIntervals: true
}),
oDayView = new sap.m.PlanningCalendarView({
key: "Day",
intervalType: "Day",
description: "Day",
intervalsS: 1,
intervalsM: 7,
intervalsL: 7,
subIntervals: true
}),
oWeekView = new sap.m.PlanningCalendarView({
key: "Week",
intervalType: "Week",
description: "Week",
intervalsS: 1,
intervalsM: 5,
intervalsL: 9,
subIntervals: true
});
oSPC.addView(oMyCustomThreeMonthsView);
oSPC.addView(oWeekView);
oSPC.addView(oDayView);
oSPC.addView(oMyMonthsView);Now run the application and the planning calendar will be look like as below.
Step 4: Performing CRUD Operations in Planning Calendar.
Create Operation.
Add a create button on the tool bar in the calendar view.
<toolbarContent>
<Title id="titleId" text="{i18n>toolBarTitle}" titleStyle="H4" />
<Button id="addButton" text="Create" icon="sap-icon://add" press="handleAppointmentCreate" tooltip="Add" type="Emphasized"/>
</toolbarContent>The Create button will be look like this.
Step 5: Fragments
Add below code in fragments folder to create a dialog for new appointment.
CreateFrag.fragment.xml
<core:FragmentDefinition xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<Dialog id="createDialog" title="Create Event" contentWidth="35%">
<beginButton>
<Button id="saveId" text="Save" type="Emphasized" press="handleDialogSaveButton" />
</beginButton>
<endButton>
<Button id="cancelId" text="Cancel" press="handleDialogCancelButton" />
</endButton>
<f:SimpleForm
editable="true" layout="ResponsiveGridLayout" labelSpanXL="5" labelSpanL="5" labelSpanM="5" labelSpanS="5" adjustLabelSpan="false" emptySpanXL="0" emptySpanL="0"
emptySpanM="0" emptySpanS="0" columnsXL="1" columnsL="1" columnsM="1" singleContainerFullSize="false" id="createSimpleFormId">
<f:content>
<Label id="selPerId" text="Select person" labelFor="selectPerson" design="Bold"/>
<Select id="selectPerson" forceSelection="false" change="handleChangeSelect" width="100%" items="{
path: 'CalenderModel>/people'
}">
<core:Item key="{CalenderModel>name}" text="{CalenderModel>name}" id="itemId" />
</Select>
<Label text="Title" labelFor="inputTitle" id="titleId" design="Bold"/>
<Input id="inputTitle" value="{createModel>/titleVal}"/>
<Label text="Start date" labelFor="startDate" id="startDateId" design="Bold"/>
<DateTimePicker id="startDate" required="true" change="handleCreateChange" value="{createModel>/shortDateVal}"/>
<Label text="End date" labelFor="endDate" id="endDateLableId" design="Bold"/>
<DateTimePicker id="endDate" required="true" change="handleCreateChange" value="{createModel>/endDateVal}"/>
<Label text="More information" labelFor="inputInfo" id="infoId" design="Bold"/>
<Input id="moreInfo" value="{createModel>/InfoVal}"/>
</f:content>
</f:SimpleForm>
</Dialog>
</core:FragmentDefinition>
Add below code in controller to open new appointment dialog.
handleAppointmentCreate: function () {
var that = this;
if (!that._sCreateDialog) {
that._sCreateDialog = sap.ui.xmlfragment("com.custpln.customplanningcalander.Fragments.CreateFrag", that.getView().getController());
that.getView().addDependent(that._sCreateDialog);
}
that._sCreateDialog.open();
},
//Close functionality
handleDialogCancelButton: function () {
var that = this;
if (that._sCreateDialog) {
that._sCreateDialog.close();
that._sCreateDialog.destroy();
that._sCreateDialog = null;
}
}Click on create button then create dialog will open.
Add below code in controller for save the entered data.
handleDialogSaveButton: function () {
var that = this, createObj = {};
var createModelData = that.getView().getModel("createModel");
var people = sap.ui.getCore().byId("selectPerson").getSelectedKey();
createObj.title = createModelData.getProperty("/titleVal");
createObj.start = sap.ui.getCore().byId("startDate").getDateValue();
createObj.end = sap.ui.getCore().byId("endDate").getDateValue();
createObj.info = createModelData.getProperty("/InfoVal");
createObj.type = "Type02";
createObj.tentative = false;
var CalenderModelData = that.getView().getModel("CalenderModel").getData().people;
var filterKey = CalenderModelData.filter(function (obj) {
return obj.name === people;
});
for (var i = 0; i < CalenderModelData.length; i++) {
for (var j = 0; j < CalenderModelData[i].appointments.length; j++) {
if (filterKey[0].name === CalenderModelData[i].name) {
CalenderModelData[i].appointments.push(createObj);
that.getView().getModel("CalenderModel").updateBindings(true);
that.handleDialogCancelButton();
return;
}
}
}
}Read Operation
Once the appointment is created then the meeting details will be shown on row.
Add below code in new fragment to open saved data.
Add below code in RowDetailsFrag.fragment.xml
<core:FragmentDefinition xmlns="sap.m" xmlns:f="sap.ui.layout.form" xmlns:core="sap.ui.core">
<ResponsivePopover id="detailsPopover" title="{DetailsModel>/title}" class="sapUiContentPadding" placement="Auto">
<beginButton>
<Button id="editBtnId" text="Edit" type="Emphasized" press="handleEditButton" />
</beginButton>
<endButton>
<Button id="delBtnId" text="Delete" press="handleDeleteAppointment" />
</endButton>
<f:SimpleForm id="resFormId" editable="false" layout="ResponsiveGridLayout" singleContainerFullSize="false">
<Label text="Additional information" labelFor="moreInfoText" id="addInfoId" />
<Text id="moreInfoText" text="{DetailsModel>/info}" />
<Label text="From" labelFor="startDateText" id="fromDateId" />
<Text id="startDateText" text="{path: 'DetailsModel>/start'}" />
<Label text="To" labelFor="endDateText" id="toDateId" />
<Text id="endDateText" text="{path: 'DetailsModel>/end'}" />
</f:SimpleForm>
</ResponsivePopover>
</core:FragmentDefinition>
Add below code in controller to open saved data.
handleAppointmentSelect: function (oEvent) {
var that = this;
oAppointment = oEvent.getParameter("appointment");
if (oAppointment === undefined) {
return;
} else {
var path = oAppointment.getBindingContext("CalenderModel").getPath();
var Selobj = oAppointment.getBindingContext("CalenderModel").getProperty(path);
if (!that._sDetailsPopover) {
that._sDetailsPopover = sap.ui.xmlfragment("com.custpln.customplanningcalander.Fragments.RowDetailsFrag", that);
that.getView().addDependent(that._sDetailsPopover);
var DetailsModel = new JSONModel(Selobj);
that.getView().setModel(DetailsModel, "DetailsModel");
that._sDetailsPopover.openBy(oAppointment);
}
that._sDetailsPopover.attachAfterClose(function () {
that._sDetailsPopover.destroy(oAppointment);
that._sDetailsPopover = null;
});
}
}Detailed appointment information will be displayed by clicking on the appointment.
Update Operation:
With this operation, we will be able to edit the appointment scheduled and appointment can be re-scheduled.
Click on Edit button, then new dialog will pop up and user has the privilege to edit the appointment details.
Edit the details as per the need and click on Save
Data will be saved, and appointment has be modified successfully.
For update operation we need to create another fragment.
Add below code in EditRowDetails Fragment (EditRowDetailsFrag.fragment.xml)
<core:FragmentDefinition xmlns:l="sap.ui.layout" xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:f="sap.ui.layout.form">
<Dialog id="editDialog" title="Edit Event" contentWidth="35%">
<beginButton>
<Button id="editSaveId" text="Save" type="Emphasized" press="onEditSaveData" />
</beginButton>
<endButton>
<Button id="editCancelId" text="Cancel" press="onEditCancel" />
</endButton>
<f:SimpleForm
editable="true"
layout="ResponsiveGridLayout"
labelSpanXL="5"
labelSpanL="5"
labelSpanM="5"
labelSpanS="5"
adjustLabelSpan="false"
emptySpanXL="0"
emptySpanL="0"
emptySpanM="0"
emptySpanS="0"
columnsXL="1"
columnsL="1"
columnsM="1"
singleContainerFullSize="false"
id="editSimpleFormId"
>
<f:content>
<!-- <Label id="editSelPerId" text="Select person" labelFor="selectPerson" design="Bold" /> -->
<!-- <Input id="inputPerId" value="{DetailsModel>/name}" editable="false"/> -->
<!-- <Select id="selectPerson" forceSelection="false" change="handleChangeSelect" width="100%" items="{
path: 'CalenderModel>/people'
}" selectedKey="{DetailsModel>/name}">
<core:Item key="{CalenderModel>name}" text="{CalenderModel>name}" id="itemEditId" />
</Select> -->
<Label text="Title" labelFor="inputTitle" id="titleId" design="Bold" />
<Input id="inputEditTitle" value="{DetailsModel>/title}"/>
<Label text="Start date" labelFor="startDate" id="startDateId" design="Bold" />
<DateTimePicker id="startEditDate" required="true" change="handleCreateChange" value="{DetailsModel>/start}"/>
<Label text="End date" labelFor="endDate" id="endDateLableId" design="Bold" />
<DateTimePicker id="endEditDate" required="true" change="handleCreateChange" value="{DetailsModel>/end}"/>
<Label text="More information" labelFor="inputInfo" id="infoId" design="Bold" />
<Input id="moreEditInfo" value="{DetailsModel>/info}"/>
</f:content>
</f:SimpleForm>
</Dialog>
</core:FragmentDefinition>
Add below code in controller for update operation.
handleEditButton: function (oAppointment) {
var that = this;
if (!that._EditDialog) {
that._EditDialog = sap.ui.xmlfragment("com.custpln.customplanningcalander.Fragments.EditRowDetailsFrag", that.getView().getController());
that.getView().addDependent(that._EditDialog);
}
that._EditDialog.open();
},
onEditSaveData: function (oEvent) {
var that = this;
var itemPath = oAppointment.getBindingContext("CalenderModel").getPath();
var Objectdata = oAppointment.getBindingContext("CalenderModel").getProperty(itemPath);
Objectdata.start = new Date(Objectdata.start);
Objectdata.end = new Date(Objectdata.end);
that.getView().getModel("CalenderModel").setProperty(itemPath, Objectdata);
sap.m.MessageToast.show("Appointment modified Successfully");
that.onEditCancel();
}
onEditCancel: function () {
var that = this;
if (that._EditDialog) {
that._sCreateDialog.close();
that._EditDialog.destroy();
that._EditDialog = null;
}
}Delete Operation:
This Operation will delete the appointment from the calendar.
Click on Delete button to perform this operation.
Appointment Deleted Successfully.
Add below code in controller for Delete operation.
handleDeleteAppointment: function (oEvent) {
var that = this;
var path = oAppointment.getBindingContext("CalenderModel").getPath();
var oModel = that.getView().getModel("CalenderModel");
var oData = that.getView().getModel("CalenderModel").getData();
for (var i = 0; i < oData.people.length; i++) {
if (i === parseInt(path.split("/")[2])) {
var selAppointment = oData.people[i].appointments;
var index = path.split("/appointments")[1]; // result "/1"
var indexPath = parseInt(index.split("/")[1], 0); // result 1
selAppointment.splice(indexPath, 1);
oModel.setData(oData);
oModel.updateBindings(true);
oModel.refresh(true);
sap.m.MessageToast.show("Appointment Deleted Successfully");
that.onEditCancel();
}
}
},Conclusion:
After reading this blog post you will be able to create custom planning colander and perform CURD operations on planning colander in BAS.
Please feel free to suggest if any correction is needed:)
