Hi All,
In this blog post, I am going to explain a business scenario that I had gone through and how I gave a solution to it.
Business Scenario:
Develop a web application that shows a calendar showing which agent is assigned to jobs on which days at which location.
Solution:
I have designed and developed SAP UI5 Responsive Web Application using sap.m.planningcalendar which displays rows with appointments for different entities (such as persons or teams) for the selected time interval.
About Planning Calendar:
Planning Calendar containing multiple rows with appointments, where each row represents a different person.
We can configure different time-interval views that make us switch between, such as hours or days, and even a whole week/month. The available navigation allows us to select a specific interval using a picker, or move to the previous/next interval using arrows.
The PlanningCalendar uses parts of the sap.ui.unified library.
Logon to the Business Application Studio and follow the below steps.
Step 1:
Create a Sample Application named “Planning Calendar”.
Step 2.1: Open the View1.view.xml file and add the below libraries.
xmlns:core="sap.ui.core"
xmlns:unified="sap.ui.unified"
Step2.2: Add the below code.
Step3:
Open the View1.controller.js file and add the below code.
Step4:
Run the Application. The Output screen would be like below. By default Hours view will be selected.
We can navigate to different Views by selecting options available in the dropdown like below.
We can see 1 month View in Ipad Mode like below:
Step5:
Sometimes in Month view, we can’t able to see the clear information (Location) of the appointment. For that, we are adding a message box to pops up while clicking on the selected appointment.
Add the below function in js file.
Reload the application and click on any of the appointments to show detailed info.
Conclusion: By the following, we have successfully visualized the Agent details clearly in different Views.
I hope it helps.
Thank you.
In this blog post, I am going to explain a business scenario that I had gone through and how I gave a solution to it.
Business Scenario:
Develop a web application that shows a calendar showing which agent is assigned to jobs on which days at which location.
Solution:
I have designed and developed SAP UI5 Responsive Web Application using sap.m.planningcalendar which displays rows with appointments for different entities (such as persons or teams) for the selected time interval.
About Planning Calendar:
Planning Calendar containing multiple rows with appointments, where each row represents a different person.
We can configure different time-interval views that make us switch between, such as hours or days, and even a whole week/month. The available navigation allows us to select a specific interval using a picker, or move to the previous/next interval using arrows.
The PlanningCalendar uses parts of the sap.ui.unified library.
Logon to the Business Application Studio and follow the below steps.
Step 1:
Create a Sample Application named “Planning Calendar”.
Step 2.1: Open the View1.view.xml file and add the below libraries.
xmlns:core="sap.ui.core"
xmlns:unified="sap.ui.unified"
Step2.2: Add the below code.
<PlanningCalendar
id="PC1"
startDate="{path: '/startDate'}"
rows="{path: '/people'}"
appointmentsVisualization="Filled"
appointmentSelect="handleAppointmentSelect"
showEmptyIntervalHeaders="false"
showWeekNumbers="true">
<rows>
<PlanningCalendarRow
title="{name}"
appointments="{path : 'appointments', templateShareable: true}">
<appointments>
<unified:CalendarAppointment
startDate="{start}"
endDate="{end}"
title="{title}"
text="{info}"
type="{type}"
tentative="{tentative}">
</unified:CalendarAppointment>
</appointments>
</PlanningCalendarRow>
</rows>
</PlanningCalendar> Step3:
Open the View1.controller.js file and add the below code.
onInit: function () {
// create model
var oModel = new JSONModel();
oModel.setData({
startDate: new Date("2020", "11", "01", "8", "0"),
people: [{
name: "Sunil",
appointments: [
{
start: new Date("2020", "11", "1", "08", "30"),
end: new Date("2020", "11", "8", "09", "30"),
title: "Telangana",
info: "Manikonda,Hyderabad",
type: "Type02",
tentative: false
},
{
start: new Date("2020", "11", "11", "10", "0"),
end: new Date("2020", "11", "11", "12", "0"),
title: "Andhra Pradesh",
info: "Balaji Colony,Tirupathi",
type: "Type01",
tentative: false
},
{
start: new Date("2020", "11", "15", "10", "0"),
end: new Date("2020", "11", "15", "12", "0"),
title: "Andhra Pradesh",
info: "MVP Colony,Visakapatnam",
type: "Type01",
tentative: false
}
]
},
{
name: "Anil",
appointments: [
{
start: new Date("2020", "11", "1", "18", "00"),
end: new Date("2020", "11", "2", "19", "10"),
title: "Telangana",
info: "Madhapur,Hyderabad",
type: "Type04",
tentative: false
},
{
start: new Date("2020", "11", "5", "18", "00"),
end: new Date("2020", "11", "8", "19", "10"),
title: "Telangana",
info: "Banjara Hills,Hyderabad",
type: "Type04",
tentative: false
},
{
start: new Date("2020", "11", "11", "18", "00"),
end: new Date("2020", "11", "15", "19", "10"),
title: "Andhra Pradesh",
info: "Rushikonda,Visakapatnam",
type: "Type04",
tentative: false
}
]
},
{
name: "Chaithanya",
appointments: [
{
start: new Date("2020", "11", "15", "08", "30"),
end: new Date("2020", "11", "15", "09", "30"),
title: "Telangana",
info: "Jiblee Hills,Hyderabad",
type: "Type02",
tentative: false
},
{
start: new Date("2020", "11", "1", "11", "0"),
end: new Date("2020", "11", "31", "23", "59"),
title: "Telangana",
info: "Mothi Nagar,Hyderabad",
type: "Type10",
tentative: false
}
]
}
]
});
this.getView().setModel(oModel);
}Step4:
Run the Application. The Output screen would be like below. By default Hours view will be selected.
We can navigate to different Views by selecting options available in the dropdown like below.
We can see 1 month View in Ipad Mode like below:
Step5:
Sometimes in Month view, we can’t able to see the clear information (Location) of the appointment. For that, we are adding a message box to pops up while clicking on the selected appointment.
Add the below function in js file.
handleAppointmentSelect: function (oEvent) {
var oAppointment = oEvent.getParameter("appointment"),
sSelected;
if (oAppointment) {
sSelected = oAppointment.getSelected() ? "selected" : "deselected";
MessageBox.show("'" + oAppointment.getTitle() + "' " + sSelected +"\n"+ oAppointment.getText());
} else {
var aAppointments = oEvent.getParameter("appointments");
var sValue = aAppointments.length + " Appointments selected";
MessageBox.show(sValue);
}
}Reload the application and click on any of the appointments to show detailed info.
Conclusion: By the following, we have successfully visualized the Agent details clearly in different Views.
I hope it helps.
Thank you.
- SAP Managed Tags:
8 Comments
