Add a custom AngularJS module to the News designer module requirements

If you want to load your custom AngularJS module in the default widget designer, you need to override the default designer JavaScript file. To do this, perform the following:

1. In your SitefinityWebApp, create a folder and name it Scripts
2. Inside folder Mvc/Scripts/, create a folder and name it News
3. In folder Mvc/Scripts/News/, create a file designerview-simple.js
4. In this 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. In the designer module dependencies, add the additional module dependency.
6. Save and close the file.