Need help to fix the code.

[vidhya_mouli]

I am creating a custom widget which will use a month range to display the incident records. The following is the code. However, when I change using the arrows, the year is not displaying correctly. Can someone please help me to fix this code.

HTML

<div ng-controller="OutageWidgetController" ng-init="init()">
  <div id="monthSelector">
    <span id="prevMonth" ng-click="changeMonth(-1)">&#9666;</span>
    <span id="selectedMonth">{{selectedMonth}}</span>
    <span id="nextMonth" ng-click="changeMonth(1)">&#9656;</span>
  </div>

  <div ng-repeat="record in limitedRecords">
    <div class="record-container" style="padding: 15px; border: 1px solid #ccc; margin-bottom: 10px;">
      <div>
        <div class="message-container">{{record.number}}</div>
        <div class="published-container"><strong>{{record.sys_created_on}}</strong></div>
        <div class="description-container">{{record.short_description}}</div>
        <div class="description-container">{{record.description}}</div>
      </div>
    </div>
  </div>
</div>

Client Script:

function ($scope, $http) {
 // Initialize currentMonthIndex and currentYear
  $scope.currentMonthIndex = 0;
  $scope.currentYear = 0;

  // Initialize function to fetch records
  $scope.init = function () {
    // Initialize currentMonthIndex to 3 months before the current month
    var currentDate = new Date();
    var currentMonth = currentDate.getMonth();
		var currentYear = currentDate.getFullYear();
    $scope.currentMonthIndex = (currentMonth - 2 + 12) % 12;
		$scope.currentYear = currentYear;

    // Update the displayed month range
    $scope.updateMonth();

    // Fetch records
    $scope.fetchRecords();
  };

  // Fetch records function
  $scope.fetchRecords = function () {
    var state = $scope.selectedState;
		
		// Calculate start and end dates based on the selected month range
		var startDate = new Date($scope.currentYear, $scope.currentMonthIndex, 1);
  	var endDate = new Date($scope.currentYear, $scope.currentMonthIndex + 2, 0);

    // Adjust API request based on the selected state and date range
  var queryParams = state === 'all' ? {} : { sysparm_query: 'u_state=' + state };
  queryParams.sysparm_query += '^sys_created_onBETWEEN' + startDate.toISOString() + '@' + endDate.toISOString();

    if ($scope.searchText) {
      queryParams.sysparm_query += '^short_descriptionLIKE' + $scope.searchText + '^ORmessageLIKE' + $scope.searchText;
    }

    // Make an AJAX request to the server to fetch records
    $http.get('/api/now/table/incident', { params: queryParams })
      .then(function (response) {
        $scope.totalRecords = response.data.result.length;
        $scope.showLoadMoreButton = $scope.totalRecords > $scope.batchSize;

        // Display only the first batch of records initially
        $scope.limitedRecords = response.data.result.slice(0, $scope.batchSize);
      });
  };

  // Function to change the month
 $scope.changeMonth = function (delta) {
    $scope.currentMonthIndex += delta;

    // Update the year if moving to the previous or next year
    if ($scope.currentMonthIndex < 0) {
      $scope.currentMonthIndex += 12;
      $scope.currentYear--;
    } else if ($scope.currentMonthIndex >= 12) {
      $scope.currentMonthIndex -= 12;
      $scope.currentYear++;
    }

    $scope.updateMonth();
    $scope.fetchRecords();
  };

  $scope.updateMonth = function () {
    var months = [
      "January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"
    ];

    var startMonthIndex = $scope.currentMonthIndex;
    var endMonthIndex = (startMonthIndex + 2) % 12;

    var startMonth = months[startMonthIndex];
    var endMonth = months[endMonthIndex];

    // Adjust the displayed year based on the current month
    var displayStartYear = $scope.currentYear;
		var displayEndYear = $scope.currentYear;
    if (endMonthIndex === 0 || endMonthIndex === 1) {
      displayStartYear--; // If current month is January or February, display the previous year
    } else if (startMonthIndex === 10 || startMonthIndex === 11) {
      displayEndYear++; // If current month is November or December, display the next year
    }

    // Include the year in the displayed month range
    $scope.selectedMonth = startMonth + ' ' + displayStartYear + ' - ' + endMonth + ' ' + displayEndYear;
    console.log("Selected Range:", $scope.selectedMonth);
};

  $scope.init(); // Call init to initialize the selectedMonth
}

Server script:

(function () {
  data.fetchRecords = function (state, searchText) {
    var gr = new GlideRecord('incident');
    gr.addQuery('active', true);
		gr.addQuery('sys_created_on', '>=', startDate);
		gr.addQuery('sys_created_on', '<=', endDate);
    gr.query();

    var records = [];
    while (gr.next()) {
      var record = {
        number: gr.number().toString,
				short_description: gr.short_description.toString(),
        sys_created_on: gr.sys_created_on.toString(),
        description: gr.description.toString()
      };
      records.push(record);
    }
    return records;
  };
})();

[Sohithanjan G]

Hi @vidhya_mouli ,

The issue you're encountering with the year not displaying correctly when changing months is likely due to the way you're updating the displayStartYear and displayEndYear variables in the updateMonth function.

You need to adjust these variables based on the start and end months to ensure that the year is displayed correctly. Here's how you can modify the updateMonth function:

$scope.updateMonth = function () {
    var months = [
      "January", "February", "March", "April", "May", "June",
      "July", "August", "September", "October", "November", "December"
    ];

    var startMonthIndex = $scope.currentMonthIndex;
    var endMonthIndex = (startMonthIndex + 2) % 12;

    var startMonth = months[startMonthIndex];
    var endMonth = months[endMonthIndex];

    // Adjust the displayed year based on the start and end months
    var displayStartYear = $scope.currentYear;
    var displayEndYear = $scope.currentYear;
    if (endMonthIndex < startMonthIndex) {
        displayEndYear++;
    }

    // Include the year in the displayed month range
    $scope.selectedMonth = startMonth + ' ' + displayStartYear + ' - ' + endMonth + ' ' + displayEndYear;
    console.log("Selected Range:", $scope.selectedMonth);
};

In this updated version, the displayEndYear is incremented by 1 if the end month is earlier than the start month. This adjustment ensures that the correct years are displayed when changing months.

Additionally, make sure that startDate and endDate variables are properly defined within the fetchRecords function in the server script. Currently, they seem to be missing.

Mark my answer as Accepted as Solution & helpful if it suffices your requirement. It will help other too !! 

[Anurag Tripathi]

Found a typo in our server script , fixing it

(function () {
  data.fetchRecords = function (state, searchText) {
    var gr = new GlideRecord('incident');
    gr.addQuery('active', true);
		gr.addQuery('sys_created_on', '>=', startDate);
		gr.addQuery('sys_created_on', '<=', endDate);
    gr.query();

    var records = [];
    while (gr.next()) {
      var record = {
        number: gr.number().toString(),
				short_description: gr.short_description.toString(),
        sys_created_on: gr.sys_created_on.toString(),
        description: gr.description.toString()
      };
      records.push(record);
    }
    return records;
  };
})();