Enhancing SAP Timesheet Management with a Custom Calendar-Based Application

By - Dhanushiya Palanisamy

Business Requirement and Objectives

In many SAP landscapes, timesheet entry becomes more complex than necessary due to limited visibility, repetitive data entry, and rigid week-based interfaces. This project focused on simplifying timesheet management while ensuring that all recorded hours are posted directly to SAP in real time.

A key requirement was to improve usability and user adoption without introducing parallel systems, manual reconciliation, or deviations from SAP standard processes and authorization models.

The primary objectives were:

  • Calendar-based booking of working hours
  • Clear visibility of booked hours across day, week, and month views
  • Real-time integration using SAP standard Workforce Timesheet APIs
  • Timesheet booking against Project Work Packages
  • User-specific access aligned with SAP authorization

Proposed System

The proposed system is a centralized Timesheet Calendar Application developed using SAP UI5 and deployed on SAP Business Technology Platform (BTP) via SAP Build Work Zone. It operates as a standalone application interface integrated with SAP, providing a simple and user-friendly way for employees to manage their timesheets.

The application offers a calendar-based view that allows users to easily record and track their working hours across day, week, and month periods. Compared to the standard SAP Timesheet, it provides improved visibility, reduces manual effort, and enables faster time entry.

Overall, the solution simplifies timesheet booking, reduces errors, saves time, and works seamlessly with SAP to manage timesheets accurately and reliably.

Technical Solution

The Timesheet Calendar Application is a custom SAP UI5 solution developed on SAP Business Technology Platform using SAP Business Application Studio. The application provides a calendar-based interface built with the SinglePlanningCalendar control, supporting Month, Week, Work Week, and Day views to simplify timesheet booking.

User-specific data handling is implemented throughout the application, ensuring that each user can view only their own timesheet entries and company codes based on login credentials.

The application uses email-based login, ensuring that all data displayed and managed in the app is specific to the logged-in user. Users can create, read, update, copy, and delete only their own records, and all operations are integrated with SAP backend systems using OData services.

Upon login, users can view all timesheets booked for the selected period, such as the current week or month. They are permitted to create, update, copy, and delete only their own records, while access to other users’ data remains restricted.

The solution integrates with SAP backend systems using standard Workforce Timesheet OData APIs for CRUD operations, along with custom CDS views and OData services for retrieving user-based Company Code and Work Package data. Additional panels provide week-wise and month-wise hour calculations, enabling better tracking and validation of recorded working hours.

The application is deployed on SAP BTP using SAP Build Work Zone and accessed through user-based login and role-based authorization, delivering a secure, scalable, and user-friendly timesheet booking experience.

Technical Architecture

Read

After login, users can view only their own timesheet data based on user-level authorization.

The application displays the logged-in user’s booked timesheets in a calendar view with month, week, and day options. The timesheet data is retrieved from the SAP standard Workforce Timesheet application.

Total booked hours are shown in month-wise and week-wise summaries, helping users track and review their working hours for the selected period.

Read - Timesheet Calendar App

Snippet ⧉ Copy Code 
			var sFilter = "TimeSheetDate ge datetime'" + formatDate(oStart) +
    "' and TimeSheetDate le datetime'" + formatDate(oEnd) +
    "' and (TimeSheetStatus eq '10' or TimeSheetStatus eq '20' or TimeSheetStatus eq '30' or TimeSheetStatus eq '50')" +
    " and PersonWorkAgreement eq '" + PWA + "'";

oModel.read("/TimeSheetEntryCollection", {
    urlParameters: {
        "$filter": sFilter
    },
    success: function (oData) {
        var aWPData = oWPModel.getProperty("/workPackages") || [];

        var aAppointments = oData.results.map(function (entry) {
            // colour:
            var fHours = parseFloat(entry.TimeSheetDataFields.RecordedHours || 0);

            // Default type
            var sType = "Type06";

            // project name:
            var oMatch = aWPData.find(function (wp) {
                return (
                    wp.WorkPackage === entry.TimeSheetDataFields.WBSElement &&
                    wp.EngagementProjectResource === entry.TimeSheetDataFields.ActivityType
                );
            });

            var sProjectName = oMatch ? oMatch.ProjectName : "Unknown Project";
            var sShortProjectName = sProjectName.length > 18 ? sProjectName.substring(0, 18) + "..." : sProjectName;

            var sTooltip = "Project: " + sProjectName;

            return {
                uuid: entry.UUID || entry.ID || jQuery.sap.uid(), 
                title: sShortProjectName + " - " + that._convertHoursToReadable(fHours),
                tooltip: sTooltip,
                text: entry.TimeSheetRecord,
                type: sType,
                startDate: UI5Date.getInstance(entry.TimeSheetDate),
                endDate: UI5Date.getInstance(entry.TimeSheetDate),
                recordedHours: entry.TimeSheetDataFields.RecordedHours,
                WorkPackage: entry.TimeSheetDataFields.WBSElement,
                ActivityType: entry.TimeSheetDataFields.ActivityType,
                CompanyCode: entry.CompanyCode,
                Notes: entry.TimeSheetDataFields.TimeSheetNote,
                PersonWorkAgreementExternalID: entry.PersonWorkAgreementExternalID,
                TimeSheetRecord: entry.TimeSheetRecord
            };
        });

        var oJsonModel = new JSONModel({
            appointments: aAppointments,
            startDate: oBaseDate
        });
        oView.setModel(oJsonModel, "calendar");

Create

When the user clicks the Create button, a popup dialog appears to enter timesheet details. The user first selects the Work Package, based on which the Project Name, Customer Name, Activity Type, and Customer Hierarchy are automatically populated.

The Timesheet Date and Working Hours are mandatory fields. The Work Package and Company Code are also mandatory. Once the Company Code is selected, the corresponding Person Work Agreement is automatically filled. The Notes field is optional.

After entering all required details, the user clicks Save. The created timesheet entry is immediately visible in the calendar application and is successfully saved and reflected in the SAP backend application.

Create - Timesheet Calendar App

SAP Timesheet application

Snippet ⧉ Copy Code 
var oNewEntry = {
    "TimeSheetDataFields": {
        "ControllingArea": "A000",
        "ActivityType": oPopupData.EngagementProjResource,
        "WBSElement": oPopupData.WorkPackage,
        "TimeSheetNote": oPopupData.TimeSheetNote,
        "RecordedHours": oPopupData.WorkingHours

    },
    "PersonWorkAgreementExternalID":oPopupData.PersonWorkAgreementExternalID,
    "CompanyCode": oPopupData.CompanyCode,
    "TimeSheetDate": sFinalDate,
    "TimeSheetOperation": "C"
};

console.log("oNewEntry:", oNewEntry);
var oPostModel = this.getView().getModel();

oPostModel.create("/TimeSheetEntryCollection", oNewEntry, {
    success: function (oData) {
        MessageToast.show("Timesheet created successfully!");
        this._loadAppointments();  // auto-refresh after creation
    }.bind(this),
    error: function (oError) {
        MessageBox.error("Error while saving entry: " + oError.message);
    }
});

this._resetPopupModel();
this._oDialog.close();

Update

The application allows users to update existing timesheet entries directly from the calendar view. To update an entry, the user selects the required timesheet record from the calendar and clicks the Edit button. This opens a dialog displaying the details of the selected entry.

Only Working Hours and Notes are editable during the update process. Other key fields such as Work Package, Company Code, Activity Type, and Timesheet Date are displayed in read-only mode and cannot be modified.

After making the required changes, the user clicks the Update button to save the changes. Once successfully updated, the modified entry is immediately reflected in the calendar view and synchronized with the SAP backend system.

Update - Timesheet Calendar App

Copy

The application allows users to copy existing timesheet entries directly from the calendar view. To copy an entry, the user selects the required timesheet record from the calendar and clicks the Copy button. This opens a dialog displaying the details of the selected entry.

In the copy dialog, the user can reuse the same details for a different date or modify required fields such as Working Hours, Notes, or Date as needed. This helps users quickly create similar timesheet entries without re-entering all details.

After updating the required fields, the user clicks the Copy button to save the entry. Once successfully copied, the new timesheet entry is immediately reflected in the calendar view and synchronized with the SAP backend system.

Copy - Timesheet Calendar App

Delete

The application allows users to delete their timesheet entries directly from the calendar view.

Users select the required record and click the Delete button, after which a confirmation dialog is displayed to prevent accidental deletion.

Once confirmed, the entry is removed from the calendar and synchronized with the SAP backend system.

Delete - Timesheet Calendar App

Benefits of the Timesheet Calendar Application

  • The calendar-based interface makes timesheet booking simple, visual, and user-friendly, helping users save time and reduce errors.
  • Real-time integration with the SAP backend ensures accurate and consistent data, while secure role-based access protects user-specific information.
  • Week-wise and month-wise hour tracking improves transparency, productivity, and compliance with work agreements.
  • Related to External consultants and Internal employees where license is a concern.
  • Consolidated hours – Provides a combined view of total booked hours across day, week, and month for better tracking and review.

SAP Standard Timesheet vs Custom Timesheet Calendar Application

SAP Standard Timesheet Application

  • Provides only a week-wise view of timesheet entries with basic create, update, delete, copy, and view functionalities.
  • Does not support month-wise summaries, total working hour comparisons, or additional business details.
  • Offers limited flexibility as it follows SAP’s standard UI design.

Custom Timesheet Calendar Application

  • Provides day-wise, week-wise, and month-wise calendar views with clear visibility of worked vs required hours. 
  • Displays additional business details such as Customer Hierarchy, Customer Name, and Person Work Agreement, auto-filled based on Work Package selection. 
  • Designed to meet specific business needs, improving usability, accuracy, and overall productivity.

Conclusion

The Timesheet Calendar Application is a secure and easy-to-use system where employees can manage their timesheets in one place. It connects seamlessly with SAP backend systems, allowing users to create, update, copy, and delete their own records in real time. The application saves time, maintains data accuracy, and follows company policies, providing a reliable and productive experience for all employees.

Dhanushiya Palanisamy

Categories -
SAP S/4HANA Public Cloud
Tags -
SAP S/4HANA Public Cloud SAP Business Technology Platform SAP UI5