Add client components to the News default designer view

If you want to add additional elements in the default designer view, you need to override the default designer view file. To do this, perform the following:

1. In your SitefinityWebApp, in folder Mvc/Views/, create a folder named News
2. In folder Mvc/Views/News/, create a file DesignerView.Simple.cshtml
3. In the file, paste the following markup: 
   HTML+Razor

   @using Telerik.Sitefinity.Frontend.Mvc.Helpers;
   
   @Html.QueryBuilderScriptReferences()
   
   <server-data default-provider-name='@Html.DefaultProviderName(Telerik.Sitefinity.Modules.News.NewsManager.GetManager())'>
   </server-data>
   
   <tabset class="nav-tabs-wrapper">
       <tab heading="@Html.Resource("Content")">
           <h4>@Html.Resource("NewsToDisplay")</h4>
           <div class="form-group">
               <div class="row">
                   <div class="col-xs-6">
                       <sf-provider-selector  sf-manager-type="Telerik.Sitefinity.Modules.News.NewsManager"
                           sf-provider-label='@Html.Resource("Provider")'
                           ng-model="properties.ProviderName.PropertyValue">
                       </sf-provider-selector>
                   </div>
               </div>
           </div>
   
           <div class="form-group">
               <div class="radio">
                   <label for="allNews" class="full-width">
                       <input id="allNews" type="radio" ng-model="properties.SelectionMode.PropertyValue" value="AllItems" />
                       @Html.Resource("AllPublishedNews")
                   </label>
               </div>
               <div class="radio">
                   <label for="selectedNews" class="full-width">
                       <input id="selectedNews" type="radio" ng-model="properties.SelectionMode.PropertyValue" value="SelectedItems" />
   
                       @Html.Resource("SelectedNews")
                   </label>
                   <div class="label-content">
                       <sf-list-selector sf-news-selector ng-show="properties.SelectionMode.PropertyValue=='SelectedItems'"
                                     sf-multiselect="true" sf-sortable="true"
                                     sf-provider="properties.ProviderName.PropertyValue"
                                     sf-selected-ids ="newsSelector.selectedItemsIds"></sf-list-selector>
   
                   </div>
               </div>
               <div class="radio">
                   <label for="filterNews" class="full-width">
                       <input id="filterNews" type="radio" ng-model="properties.SelectionMode.PropertyValue" value="FilteredItems" />
   
                       @Html.Resource("NarrowSelection")
                       <sf-filter-selector sf-query-data="additionalFilters.value"
                           sf-taxonomy-fields="@CustomFieldsHelpers.GetTaxonomyFields(typeof(Telerik.Sitefinity.News.Model.NewsItem))"
                           sf-provider="properties.ProviderName.PropertyValue"
                           ng-show="properties.SelectionMode.PropertyValue=='FilteredItems'"
                           class="sf-filter-selector"
                           ></sf-filter-selector>
                   </label>
               </div>
           </div>
       </tab>
   
       <tab heading="@Html.Resource("ListSettings")">
           <div class="form-group">
               <div class="radio">
                   <label for="usePaging">
                       <input id="usePaging" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="Paging" />
   
                       <strong>@Html.Resource("UsePaging")</strong><br />
   
                       <span>
                           @Html.Raw(String.Format(Html.Resource("DivideToItemPerPage"),
                           "<input type='text' style='width: 40px' ng-disabled='properties.DisplayMode.PropertyValue!=\"Paging\"' ng-model='properties.ItemsPerPage.PropertyValue'/>"))
                       </span>
                   </label>
               </div>
               <div class="radio">
                   <label for="useLimit">
                       <input id="useLimit" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="Limit" />
   
                       <strong>@Html.Resource("UseLimit")</strong><br />
   
                       <span>
                           @Html.Raw(String.Format(Html.Resource("ShowLimitedItems"),
                           "<input type='text' style='width: 40px' ng-disabled='properties.DisplayMode.PropertyValue!=\"Limit\"' ng-model='properties.ItemsPerPage.PropertyValue'/>"))
                       </span>
                   </label>
               </div>
               <div class="radio">
                   <label for="allItems">
                       <input id="allItems" type="radio" ng-model="properties.DisplayMode.PropertyValue" value="All" />
   
                       <strong>@Html.Resource("NoLimitPaging")</strong><br />
   
                       <span>@Html.Resource("ShowAllItems")</span>
                   </label>
               </div>
           </div>
   
           <div  class="form-group">
               <div class="row">
                   <div class="col-xs-6">
                       <label for="sortOptions">@Html.Resource("SortNews")</label>
   
                       <select id="sortOptions" ng-model="selectedSortOption" class="form-control" ng-change="updateSortOption(selectedSortOption)">
                           <option value="PublicationDate DESC"> @Html.Resource("LastPublished")</option>
                           <option value="LastModified DESC"> @Html.Resource("LastModified")</option>
                           <option value="Title ASC"> @Html.Resource("ByTitleAZ")</option>
                           <option value="Title DESC"> @Html.Resource("ByTitleZA")</option>
                           <option value="AsSetManually"> @Html.Resource("AsSetManually")</option>
                           <option value="Custom"> @Html.Resource("AsSetInAdvancedMode")</option>
                       </select>
                   </div>
               </div>
           </div>
   
           <div class="form-group">
               <label for="newsTemplateName">@Html.Resource("ListTemplate")</label>
   
               <div class="row">
                   <div class="col-xs-6">
                       <select id="newsTemplateName" ng-model="properties.ListTemplateName.PropertyValue" class="form-control">
                            @foreach (var viewName in Html.GetViewNames("News", @"List\.(?<viewName>[\w\s]*)$"))
                            {
                                <option value="@viewName"> @viewName</option>
                            }
                       </select>
                   </div>
               </div>
           </div>
   
           <expander expander-title='@Html.Resource("MoreOptions")'>
               
               <div class="row">
                   <div class="col-xs-6">
   
                       <style-dropdown selected-class="properties.ListCssClass.PropertyValue" view-name="properties.ListTemplateName.PropertyValue"></style-dropdown>
                   </div>
               </div>
   
               <div class="form-group">
                   <label for="navCssClass">@Html.Resource("CssClasses")</label>
                   <input type="text" id="navCssClass" ng-model="properties.ListCssClass.PropertyValue" class="form-control" />
               </div>
   
           </expander>
       </tab>
   
       <tab heading="@Html.Resource("SingleItemSettings")">
           <div class="form-group">
               <strong>@Html.Resource("OpenSingleItem")</strong>
               <div class="radio">
                   <label for="samePage">
                       <input id="samePage" type="radio" ng-model="properties.OpenInSamePage.PropertyValue" value="True" />
                          @Html.Resource("ShowInSamePage") <span class="text-muted">@Html.Resource("ShowInSamePageNote")</span>
                   </label>
               </div>
               <div class="radio">
                   <label for="existingPage">
                       <input id="existingPage" type="radio" ng-model="properties.OpenInSamePage.PropertyValue" value="False" />
   
                       @Html.Resource("ShowInExistingPage")
                   </label>
                   <div class="label-content">
                       <sf-list-selector
                           sf-page-selector
                           sf-selected-item-id="properties.DetailsPageId.PropertyValue"
                           ng-hide="properties.OpenInSamePage.PropertyValue == 'True'"></sf-list-selector>
                   </div>
               </div>
           </div>
   
           <div  class="form-group m-top-md row">
               <div class="col-xs-6">
                   <label for="newsTemplateName">@Html.Resource("DetailTemplate")</label>
   
                   <select id="newsTemplateName" ng-model="properties.DetailTemplateName.PropertyValue" class="form-control">
                        @foreach (var viewName in Html.GetViewNames("News", @"Detail\.(?<viewName>[\w\s]*)$"))
                        {
                            <option value="@viewName"> @viewName</option>
                        }
                   </select>
               </div>
           </div>
   
           <expander expander-title='@Html.Resource("MoreOptions")'>            
               
               <div class="row">
                   <div class="col-xs-6">
   
                       <style-dropdown selected-class="properties.DetailCssClass.PropertyValue" view-name ="properties.DetailTemplateName.PropertyValue"></style-dropdown>
   
                       <div class="form-group">
                           <label for="newsCssClass">@Html.Resource("CssClasses")</label>
                           <input type="text" id="newsCssClass" ng-model="properties.DetailCssClass.PropertyValue" class="form-control" />
                       </div>
   
                   </div>
               </div>
   
           </expander>
       </tab>
   </tabset>

4. Add the additional client component.
   Add an image field client component, following procedure Image filed.
5. Save and close the file.
6. Override the JSON file.
   You need to do this, because there are additional scripts for the image field client component.
   For more information, see Add a script to the News designer JSON file.
7. Override the default JavaScript file.
   You need to do this to include the image field AngularJS and to make use of this image field client component logic. 
   For more information, see Add custom client-side logic to the JavaScript file of the News designer.