Collection View

From Sense/Net Wiki
Jump to: navigation, search
  •  
  •  
  •  
  •  
  • 100%
  • 6.0
  • Enterprise
  • Community
  • Planned

Overview

Collection View
A Collection View is an ASP.Net user control (in the form of an .ascx file in the Content Repository) that can be used to render multiple content. A Collection View is primarily used only to display content in browse mode, not to modify content.

Details

The basic way to display multiple content is to use a Collection View. The Collection View defines the custom HTML to be rendered when the underlying Content Collection is displayed. As a Content Collection consists of Content and Content are built up of Fields, the Collection View can iterate through the Content of the Collection and display Field values for each Content. Collection Views are placed in the Content Repository under the folder /Root/Global/renderers.

Connecting a Collection View and a Content Collection

To present a Content Collection using a Collection View in practice means that when presenting a Content Collection with a Portlet you may choose a Collection View at the appropriate Portlet property to present the Content Collection with. For example when using a Content collection Portlet you can pick a Collection View in the Renderer property:

Selecting a Collection View in a portlet

Portlets supporting Content Collection rendering

  • Content collection Portlet - defines the Content Collection as the children of the specified Content. Also capable of representing references of a Content as a Content Collection and some other collections - see reference documentation.
  • Content query presenter Portlet - represents the result set of a given query as the Content Collection

Iterating through the collection

Iterating through the Content Collection is done via the this.Model.Items member. The Collection View has to be inherited from the SenseNet.Portal.Portlets.ContentCollectionView class. See #Example/Tutorials section.

Paging, Sorting, number of Content in Collection

Sorting and limiting the number of visible Content is primarily controlled through setting the appropriate Portlet properties. The Content collection Portlet provides direct properties for this - read the reference documentation for more information. When sorting and paging are enabled you can control the pager and sorting controls from the Collection View itself. See the #Example/Tutorials section!

Managing Collections

You could create a Collection View that uses custom actions to manage the displayed content, however the Collection View is primarily designed to render and display content, not to modify them. Instead, use a Content List if you want to create a surface where the ability to manage a multiple content is the primary goal.

Other ways of presenting Content

When displaying a single Content Content Views (ASP.Net control) can be used. Content and Content Collections can also be displayed using XSLT Renderers.

Example/Tutorials

Simple list with action links

The source below shows an example Collection View that renders browse links to the Content of the Collection and action menus for members of the Administrator group.

<%@ Control Language="C#" AutoEventWireup="true" Inherits="SenseNet.Portal.Portlets.ContentCollectionView" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="SenseNet.Portal.Helpers" %>
 
<div class="sn-contentlist">
 
  <%foreach (var content in this.Model.Items)
    { %>
      <div class="sn-content sn-contentlist-item">
          <h1 class="sn-content-title">
              <%=Actions.BrowseAction(content)%>
              <%if (Security.IsInRole("Administrators"))%>
                  <%= Actions.ActionMenu(content.Path, "Actions", "ListItem") %>
          </h1>
      </div>
  <%} %>
 
</div>

Paging and sorting

The following is an excerpt from /Root/System/SystemPlugins/Portlets/ContextSearch/AdvancedView.ascx and is an example for creating pager and sorting controls in a Collection View. Use this view in a Content Collection Portlet with its Enable paging and Show pager control properties set to true.

<% if ((((ContentCollectionPortlet)this.Model.State.Portlet).ShowPagerControl && this.Model.Pager.Pagecount > 1) || this.Model.VisibleFieldNames.Length > 0)
   { %>
<div class="sn-list-navigation ui-widget-content ui-corner-all ui-helper-clearfix">
 
    <% if (this.Model.VisibleFieldNames.Length > 0) { %>
    <select class="sn-sorter sn-ctrl-select ui-widget-content ui-corner-all" onchange="if (this.value!='') window.location.href=this.value;">
        <option value="">Select ordering...</option>   
        <%foreach (var field in this.Model.VisibleFieldNames) { %>
            <option value="<%=this.Model.SortActions.First(sa => sa.SortColumn == field && sa.SortDescending == false).Url %>"><%=field %> ascending</option>
            <option value="<%=this.Model.SortActions.First(sa => sa.SortColumn == field && sa.SortDescending == true).Url %>"><%=field %> descending</option>
        <% } %>
    </select>
    <%} %>
 
    <% if (((ContentCollectionPortlet)this.Model.State.Portlet).ShowPagerControl && this.Model.Pager.Pagecount > 1)
       { %>
    <div class="sn-pager">
        <%foreach (var pageAction in this.Model.Pager.PagerActions) {
 
            if (pageAction.CurrentlyActive) {  %>
                <span class="sn-pager-item sn-pager-active"><%=pageAction.PageNumber%></span>
            <%} else { %>
                <a class="sn-pager-item" href="<%=pageAction.Url %>"><%=pageAction.PageNumber%></a>
            <%} %>
 
        <% } %>
    </div>
    <% } %>
</div>
<% } %>

Advanced Field presentation

The following code is an excerpt from /Root/Global/renderers/KPI/WorkspaceAggregatedKPI/WorkspaceList.ascx and is a good example of presenting Field values in an advanced way. This control renders a workspace list also displaying the manager's avatar for every workspace:

<%@ Control Language="C#" AutoEventWireup="true" Inherits="SenseNet.Portal.Portlets.ContentCollectionView" %>
<%@ Import Namespace="System.Linq" %>
<%@ Import Namespace="SenseNet.Portal.Portlets" %>
<%@ Import Namespace="SenseNet.Portal.Helpers" %>
<%@ Import Namespace="SenseNet.ContentRepository.Fields" %>
 
<div class="sn-workspace-list">
 
    <%foreach (var content in this.Model.Items)
      { %>
 
            <% 
          var managers = content["Manager"] as List<SenseNet.ContentRepository.Storage.Node>;
          var imgSrc = "/Root/Global/images/orgc-missinguser.png?dynamicThumbnail=1&width=64&height=64";
          var managerName = "No manager associated";
          if (managers != null) {
              var manager = managers.FirstOrDefault() as SenseNet.ContentRepository.User;
              if (manager != null) {
                  var managerC = SenseNet.ContentRepository.Content.Create(manager);
                  managerName = manager.FullName;
                  var imgField = managerC.Fields["Avatar"] as SenseNet.ContentRepository.Fields.ImageField;
                  imgField.GetData(); // initialize image field
                  var param = SenseNet.ContentRepository.Fields.ImageField.GetSizeUrlParams(imgField.ImageMode, 64, 64);
                  if (!string.IsNullOrEmpty(imgField.ImageUrl))
                      imgSrc = imgField.ImageUrl + param;
              }
          }
          %>
 
        <div class="sn-content ui-helper-clearfix" style="background-color: #FFF; border: solid 1px #DDD; padding: 10px;">
            <img style="float:right;" src="<%= imgSrc %>" title="<%= managerName %>" />
            <div style="float:right;  margin-right: 40px; text-align: right;">
                Deadline:
                <big style="font-size: 18px; display: block;"><strong><%= ((DateTime)content["Deadline"]).ToShortDateString()%></strong></big>
            </div>
            <div style="padding-right:170px">
                <h2 class="sn-content-title">
                    <%= SenseNet.Portal.UI.IconHelper.RenderIconTag(content.Icon, null, 32) %>
                    <a href="<%=Actions.BrowseUrl(content)%>"><%=content.DisplayName %></a>
                </h2>
                <div class="sn-content-lead"><%= content["Description"] %></div>
            </div>
        </div>
 
    <%} %>
</div>

Related links

References