Add custom client-side logic to the JavaScript file of the News designer

If you want to add additional client-side logic to the default designer view, you need to override the default designer JavaScript file. To do this, perform the following:

1. In your SitefinityWebApp, in folder Mvc, create a folder and name it Scripts
2. In folder Mvc/Scripts/, create a folder and name it News
3. In folder Mvc/Scripts/News/, create a file designerview-simple.js
4. In the file, paste the following code:
   JavaScript

   (function ($) {
       angular.module('designer').requires.push('expander', 'sfSelectors');
   
       angular.module('designer').controller('SimpleCtrl', ['$scope', 'propertyService', function ($scope, propertyService) {
           var sortOptions = ['PublicationDate DESC', 'LastModified DESC', 'Title ASC', 'Title DESC', 'AsSetManually'];
           var emptyGuid = '00000000-0000-0000-0000-000000000000';
   
           $scope.feedback.showLoadingIndicator = true;
           $scope.additionalFilters = {};
           $scope.newsSelector = { selectedItemsIds: [] };
   
           $scope.$watch(
               'additionalFilters.value',
               function (newAdditionalFilters, oldAdditionalFilters) {
                   if (newAdditionalFilters !== oldAdditionalFilters) {
                       $scope.properties.SerializedAdditionalFilters.PropertyValue = JSON.stringify(newAdditionalFilters);
                   }
               },
               true
           );
   
           $scope.$watch(        'properties.ProviderName.PropertyValue',        function (newProviderName, oldProviderName) {            if (newProviderName !== oldProviderName) {                $scope.properties.SelectionMode.PropertyValue = 'AllItems';                $scope.properties.SerializedSelectedItemsIds.PropertyValue = null;            }        },        true
           );
   
           $scope.$watch(
               'newsSelector.selectedItemsIds',
               function (newSelectedItemsIds, oldSelectedItemsIds) {
                   if (newSelectedItemsIds !== oldSelectedItemsIds) {
                       if (newSelectedItemsIds) {
                           $scope.properties.SerializedSelectedItemsIds.PropertyValue = JSON.stringify(newSelectedItemsIds);
                       }
                   }
               },        true
           );
   
           $scope.updateSortOption = function (newSortOption) {
               if (newSortOption !== "Custom") {
                   $scope.properties.SortExpression.PropertyValue = newSortOption;
               }
           };
   
           propertyService.get()
               .then(function (data) {
                   if (data) {
                       $scope.properties = propertyService.toAssociativeArray(data.Items);
   
                       var additionalFilters = $.parseJSON($scope.properties.SerializedAdditionalFilters.PropertyValue || null);
   
                       $scope.additionalFilters.value = additionalFilters;
   
                       var selectedItemsIds = $.parseJSON($scope.properties.SerializedSelectedItemsIds.PropertyValue || null);
   
                       if (selectedItemsIds) {
                           $scope.newsSelector.selectedItemsIds = selectedItemsIds;
                       }
   
                       if (sortOptions.indexOf($scope.properties.SortExpression.PropertyValue) >= 0) {
                           $scope.selectedSortOption = $scope.properties.SortExpression.PropertyValue;
                       }
                       else {
                           $scope.selectedSortOption = "Custom";
                       }
                   }
               },
               function (data) {
                   $scope.feedback.showError = true;
                   if (data)
                       $scope.feedback.errorMessage = data.Detail;
               })
               .then(function () {
                   $scope.feedback.savingHandlers.push(function () {
                       if ($scope.properties.OpenInSamePage.PropertyValue && $scope.properties.OpenInSamePage.PropertyValue.toLowerCase() === 'true') {
                           $scope.properties.DetailsPageId.PropertyValue = emptyGuid;
                       }
                       else {
                           if (!$scope.properties.DetailsPageId.PropertyValue ||
                                   $scope.properties.DetailsPageId.PropertyValue === emptyGuid) {
                               $scope.properties.OpenInSamePage.PropertyValue = true;
                           }
                       }
   
                       if ($scope.properties.SelectionMode.PropertyValue === "FilteredItems" &&
                           $scope.additionalFilters.value &&
                           $scope.additionalFilters.value.QueryItems &&
                           $scope.additionalFilters.value.QueryItems.length === 0) {
                           $scope.properties.SelectionMode.PropertyValue = 'AllItems';
                       }
   
                       if ($scope.properties.SelectionMode.PropertyValue !== "FilteredItems") {
                           $scope.properties.SerializedAdditionalFilters.PropertyValue = null;
                       }
   
                       if ($scope.properties.SelectionMode.PropertyValue !== 'SelectedItems') {
                           $scope.properties.SerializedSelectedItemsIds.PropertyValue = null;
   
                           // If the sorting expression is AsSetManually but the selection mode is AllItems or FilteredItems, this is not a valid combination.
                           // So set the sort expression to the default value: PublicationDate DESC
                           if ($scope.properties.SortExpression.PropertyValue === "AsSetManually") {
                               $scope.properties.SortExpression.PropertyValue = "PublicationDate DESC";
                           }
                       }
                   });
               })
               .finally(function () {
                   $scope.feedback.showLoadingIndicator = false;
               });
       }]);
   })(jQuery);

5. Add your custom client-side logic.
6. Save and close the file.