My Timesheet v2 app extension

[former_member273893]

Hi Experts,

We have a client requirement to add a text field to display remaining hours (target hours -(minus) clocked duration) below the calendar date.

How to extend sap.me.calendar control to add the remaining hours/day under the date? Is this attainable.. Pls help! 

Attached screenshot of the requirement..

Thanks and regards,

Saranya

[jamie_cawley · Accepted solution]

There's no extension point within the view to add your desired requirement, so you could use a view replacement extension with a copy of the original.  I would just add a FlexBox between the calendar and Object List Items.  Then create a controller extension of the s3 controller and add a function to perform the calculation.  You can get the targetHours and recordedHours from the TSM_WEEKLY model.

Regards,

Jamie

SAP - Technology RIG

[former_member273893 · Accepted solution]

Thanks Jamie,

We have added a FlexBox between the Calendar and object list items. But we are stuck on binding the FlexBox with the Calendar. Can you pls suggest on how to proceed.

Regards,

Saranya

[jamie_cawley · Accepted solution]

Assuming that you have provided an id of "remainTimeTxt" for the flexbox, start by creating a controller extension of the S3 controller.  In the controller provide the code

onInit: function() {
       this.loadListParentFn = hcm.mytimesheet.view.S3.prototype.loadList;
  },
loadList: function() {
       this.loadListParentFn();
       this.addCustomData();
  },
addCustomData: function(){
       var oModel = this.oApplicationFacade.oApplicationImplementation.getModel("TSM_WEEKLY");
       var days = oModel.getData().days;
       var sResult;
       var oTxtList = this.getView().byId("remainTimeTxt");
       var oCal = this.getView().byId("WEEKLY_CALENDAR");
       var daysIndex = 0;
       var calDay = oModel.getData().weekStart;

       //clean any previous data
       oTxtList.removeAllItems();
       for (var i = 0; i < oCal.getWeeksPerRow() * 7; i++) {
            if(days[daysIndex] && days[daysIndex].dateStr === calDay){
                 sResult = days[daysIndex].targetHours - days[daysIndex].recordedHours;
                 daysIndex++;
            }else{
                 sResult = "0";
        }
       calDay = new Date(calDay.substr(0,4), calDay.substr(4,2) - 1, calDay.substr(6,2));
       calDay.setTime( calDay.getTime() + 1 * 86400000 );
       calDay = calDay.toISOString();
       calDay = calDay.split("T")[0].replace(/-/g,"");
       oTxtList.addItem(new sap.m.Text({text: sResult}));
       }
  }

Regards,

Jamie

SAP - Technology RIG

[former_member273893 · Accepted solution]

Thank you Jamie! We implemented the same and works as expected

Regards,

Saranya

[former_member273893 · Accepted solution]

Hi Jamie,

Attached image of the extension incorporated for Remaining hours as you suggested..

But not able to align remaining hours with the date. Or is it possible to highlight the remaining hours with the selected day. Can you please suggest on how to attain this?

Thanks and regards,

Saranya

[jamie_cawley · Accepted solution]

Here's what I used to make it centered

<sap.ui.layout:fixContent>
  <FlexBox width="100%" alignItems="Center" justifyContent="SpaceAround" id="remainTimeTxt">
  <items>
  </items>
  </FlexBox>
  </sap.ui.layout:fixContent>

Regards,

Jamie

SAP - Technology RIG

[former_member273893 · Accepted solution]

Hi Jamie,

Attached screen shots of my timesheet extended app Timesheet page,

and Create Time Entry page,

The data in the Remaining hours of 2nd page is not in sync with the 1st page.. The second page is not updated with the correct value(i.e.TSM_WEEKLY model is not refreshing).

Can you please us on understanding this issue.. and how to over come it?

[jamie_cawley · Accepted solution]

What changes did you make in the S31 controller to do this?

Regards,

Jamie

SAP - Technology RIG

[former_member273893 · Accepted solution]

We are calling getWorkDays and getTimeDataList services again from S31 controller to update remaining hours. And also used S3 controller initialize method logic in S31 controller.

We have a requirement to stay on the Create Time Entry Page even after Submitting the time-entry and page has to be refreshed to update the remaining hours. And the user be able to create more time-entries on the same page on the same date or choosing different dates.

Thanks and regards,

Saranya 

[jamie_cawley · Accepted solution]

You should be able to add the same functionality into the other controller, maybe add it as a utility.  You could either use a publish/subscribe or add another listener on the attachRouteMatched method to call the function and call it after your submit if you are staying on the view.

Regards,

Jamie

SAP - Technology RIG

[former_member182372]

so technically you can use the same logic to calculate width of day

//oControl is a sap.me.Calendar

var aWeekDays = oControl.getDays();

var iWeekDays = aWeekDays.length;

var iWeeksPerRow = oControl.getWeeksPerRow();

var iDaysInRow = iWeeksPerRow * iWeekDays;

var iDayWidth = (100 / iDaysInRow);

//oRm.addStyle("width", iDayWidth + "%");

that calendar is in S3.view.xml so you would need cretea an extension to modify it

[ricardo_pereira6]

Hi Saranya.

Did you prepared the development ambient to change this application?
If not follow the links to mount the development machine.

For installation part you can refer this

http://help.sap.com/hana_one/SAP_UI5_Reference_for_SAP_HANA_en.pdf

For using (developer guide)

http://help.sap.com/hana/SAP_UI5_Developer_Guide_for_SAP_HANA_en.pdf

Best regards

Ricardo Pereira