3

I have a three columns in SharePoint list:

  1. Hours (Numbers column)
  2. Date (Date only)
  3. Months (calculated column depends on Date field)

Using a dropdown selection, when I select any month in dropdown, it should calculate total number of hours are employee's are working in that particular month. Using Jquery

  • Please share the code example what you have tried so far. – Harsh Dec 5 '17 at 6:00
  • Still I didn't write any code for that. Actually I need to add total values in Hours field, when date column value and month value are same. – sandy Dec 5 '17 at 6:48
  • You can use the onchange event of dropdown and then multiply the month value with 30*24. – Harsh Dec 5 '17 at 6:51
1

In HTML file:

<script type="text/javascript" src="https://techindyapvt.sharepoint.com/sites/RnD/SiteAssets/MonthFilter/jquery-2.1.4.js"></script>
<script type="text/javascript" src="https://techindyapvt.sharepoint.com/sites/RnD/SiteAssets/MonthFilter/jquery.SPServices-2014.js"></script>
<script type="text/javascript" src="https://techindyapvt.sharepoint.com/sites/RnD/SiteAssets/MonthFilter/sharepointplus-4.0.js"></script>
<script type="text/javascript" src="https://techindyapvt.sharepoint.com/sites/RnD/SiteAssets/MonthFilter/MonthsFilter.js"></script>
<script type="text/javascript" src="https://techindyapvt.sharepoint.com/sites/RnD/SiteAssets/MonthFilter/Date.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<body>
<label style="margin:10px; font-size:15px; font-weight:bold;"> Total Hours Per Month : </label>
<select id="CategoryFetchingHrs" style="width:125px; height:35px;">
                <option value="Select Month">Select Month</option>
                <option value="January">January</option>
                <option value="February">February</option>
                <option value="March">March</option>
                <option value="April">April</option>
                <option value="May">May</option>
                <option value="June">June</option>
                <option value="July">July</option>
                <option value="August">August</option>
                <option value="September">September</option>
                <option value="October">October</option>
                <option value="November">November</option>
                <option value="December">December</option>
            </select>
<input id="txtHrs" type="text" style="width:80px; color:black; font-weight:bold;" disabled>
</body>

In JS File:

var getformattedMonth;
$(document).ready(function() {
        $("#RnDdateFetchingHrs").datepicker();
        $("#txtDate").datepicker(); 
            $("#RnDdateFetchingHrs").datepicker({
            minDate: 0,
            maxDate: "+2M"
            }); 
            $("#txtDate").datepicker({
            minDate: 0,
            });  
    loggedInUser = $().SPServices.SPGetCurrentUser({
            fieldNames: ["ID", "Title"],
            debug: false
        });
});
$(document).on('change', '#CategoryFetchingHrs', function(e) {
var MonthVal = $(this).val();
var TotalAmount = 0;
$().SPServices({
            operation: "GetListItems",
            async: false,
            listName: "RCCP Timecard",
            CAMLQuery: "<Query><Where><Eq><FieldRef Name='Month' /><Value Type='text'>" + MonthVal + "</Value></Eq></Where></Query>",
            CAMLViewFields: "<ViewFields><FieldRef Name='Month' /><FieldRef Name='Hours' /></ViewFields>",
            completefunc: function(xData, Status) {
                $(xData.responseXML).SPFilterNode("z:row").each(function() {
                    var Amount  =0;
                    Amount = parseFloat($(this).attr("ows_Hours"));
                    if(!isNaN(Amount))
                    {
                    TotalAmount += Amount;  
                    }
                });
            }
});
$("#txtHrs").val(TotalAmount+" hrs");
});

I think it will work for you..

Output:

enter image description here

0

See this

 $("#monthDropdownId").change(function () {
    var month = $('#monthDropdownId').val();
    var hours = month*30*24;
    //...assign to Hours column
});

Here I am trying to get the value from the monthDropdownId with onchange event. After getting the month value I got the hours value by month*30*24. Now this hours you can assign to the Hours column.

0

You could use rest api to filter items when month changing mentioned by Harsh, then calculate the total hours.

Filter based on calculated column.

Is Possible to make filter on calculated column??

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.