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: 
    @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.

 

Want to learn more?

Increase your Sitefinity skills by signing up for our free trainings. Get Sitefinity-certified at Progress Education Community to boost your credentials.

Get started with Integration Hub | Sitefinity Cloud | Sitefinity SaaS

This free lesson teaches administrators, marketers, and other business professionals how to use the Integration hub service to create automated workflows between Sitefinity and other business systems.

Web Security for Sitefinity Administrators

This free lesson teaches administrators the basics about protecting yor Sitefinity instance and its sites from external threats. Configure HTTPS, SSL, allow lists for trusted sites, and cookie security, among others.

Foundations of Sitefinity ASP.NET Core Development

The free on-demand video course teaches developers how to use Sitefinity .NET Core and leverage its decoupled architecture and new way of coding against the platform.

Was this article helpful?