4

I am thinking of building a time management system. What I am thinking is building one object task to hold different tasks and another object task-record to hold each single entry on how much time is spent on one single task on that day. Say suppose I spent 4 hours on Task A on Wednesday, the record will hold a lookup relationship to Task A and a date field which is Wednesday and a time spent field.

Since inputting each task one by one is a tedious work, I am thinking of building a VF page which looks like this:

enter image description here

In each cell, it brings up the existing value from database and by changing the values and click submit button it will automatically update database.

But the question is how should I implement this? I am thinking of using <apex:repeat> to generate the table and use javascript remoting to generate a two dimensional list to show and persist the data. This should be doable but a bit tedious. Is there any more straight-forward way in doing this?

  • Managing Time and Day is always tedious in Salesforce as well as on other systems. You should go with the approach you have presented in question. Take care of Time zone as well. – Ashwani Jun 19 '15 at 5:39
  • 1
    Although the solutions provided below are superb, but to kill my curiosity I have to ask this - Why would we not use apex:dataTable component here? and then use <apex:column> <apex:inputtext value={!custom_field__c}> – datmannz Jun 19 '15 at 11:10
  • @Mann I think using dataTable is a far better solution and I am thinking of a way to utilise it. The reason why it is not used here is because in my current design, it is not one record per line in the table. – Lance Shi Jun 19 '15 at 11:26
  • @Lance what is the structure of the object then? I was assuming the obj structure to be exactly how the picture depicts – datmannz Jun 19 '15 at 11:32
  • @Mann, I have already implemented that using dataTable. My original design is each activity has a fixed date, a task field, an hours cost field. But in the table, each line will be for one task, but for several days. I changed the structure a little bit by using the activity object to record down one week's tasks' cost which perfectly solved the issue – Lance Shi Jun 19 '15 at 12:17
2

you can use handson table for your task

http://handsontable.com/

It is a javascript library and can serve your need .I have some sample code to help get started

<apex:page sidebar="false" showHeader="false" applyHtmlTag="false" applyBodyTag="false" docType="html-5.0">
 <html>
 <head>

 <style type="text/css">
   body {background: white; margin: 20px;}
   h2 {margin: 20px 0;}
 </style>

  <script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
    <link href="{!URLFOR($Resource.HandsOnExcelPlugin, 'HandsOnToolPlugin/main.css')}" rel="stylesheet"/>
    <link href="{!URLFOR($Resource.HandsOnExcelPlugin, 'HandsOnToolPlugin/handsontable.full.min.css')}" rel="stylesheet"/>
         <script src="{!URLFOR($Resource.HandsOnExcelPlugin, 'HandsOnToolPlugin/handsontable.full.min.js')}"></script>

  </head>
        <body>
       <div id="basic_example"></div>
          <script>
            $(document).ready(function () {

            var container = document.getElementById('basic_example');

         var data = function () {
             return Handsontable.helper.createSpreadsheetData(100, 12);
         };//Use javascript remoting here to fetch JSON data

         var hot = new Handsontable(container, {
         data: data(),
         height: 396,
        colHeaders: true,
        rowHeaders: true,
          stretchH: 'all',
        columnSorting: true,
       contextMenu: true
      });

    console.log(hot.getData());

  });

</script>
</body>

Demo Link

http://handsontable.com/examples.html#fndtn-basic

  • For my curiosity, does it allow inline input editing? – Ashwani Jun 19 '15 at 5:51
  • @Ashwani Yes it does..I have updated my answer with small demo link – Mohith Shrivastava Jun 19 '15 at 5:52
  • @Ashwani I think for time zone he needs to handle but this can be starting point – Mohith Shrivastava Jun 19 '15 at 5:53
  • I believe so he will have to calibrate JavaScript client side time zone with Salesforce Users time zone. Some times SOQL also play with time zone. It needs to be taken care. This solution is great to start! – Ashwani Jun 19 '15 at 6:05
  • Still not fully understand this. But I am not quite worried about the look and feel. I am more worried about the data though. – Lance Shi Jun 19 '15 at 6:06
0

The other option is to Ext Scheduler. I have used this scheduler to manage the booking screen in my application. It gives interface like outlook calendar.

It gives following features.

1) inline editing 2) Drag Drop 3) can show multiple events on same/overlapping time slot

So almost like outlook calendar. Take a look at this example.

http://www.bryntum.com/examples/scheduler-latest/examples/columnsummary/columnsummary.html

As you can see its JS so you will need to populate the data with help of remote actions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.