How to create a Content View

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

Overview

A Content View defines the set of Fields of a content to be displayed using Field Controls. A Content View is an ASP.Net user control (in the form of an .ascx file in the Content Repository) that defines the layout of the HTML block that represents a Content. Content Views are built up of Field Controls - displaying values of Content Fields for content operations and manipulations (for example the Edit Content View for a content most likely contains a Save or Done editing button for saving changes and returning to the previous page) - embedded into a custom HTML layout. The next tutorial shows you how to create a Content View for a custom Content

Steps

This section will show you how to make a Content View that displays a Content in Edit mode. It is helpful to use some html editor software to complete this tutorial, but you can use a simple notepad or the editor in Content Explorer also.

1. Create a Content View folder and add Content Views

A Content can be presented in three different modes depending on whether it is to be edited, to be browsed or to be created. Different Content Views can be chosen for the Content according to these three main scenarios. The name of the Content View for the edit mode is 'InlineEdit.ascx. This Content View will display the Fields of the Content that we want to let users to edit.

You have to create a folder for the Content's Content View in 'Root/Global/contentviews' and name it with the name of the Content Type. There are two different ways to create a Content View folder. You can add an 'Empty Content view folder' and upload or add the Content Views in it one by one, or you can add a Folder which contains default Content Views (Browse.ascx, InlineNew.ascx and InlineEdit.ascx).

Add a Content View folder

The default Content Views contains samples of the built-in Field Controls, so you can check how to use and customize them.

Default InlineEdit.ascx

2. Add Field Controls

Let's say you want to modify the Car's InlineEdit.ascx to display only three editable Fields: 'DisplayName', 'Make' and 'Style'. You have to add two ShortText Fields for 'DisplayName' and 'Make', and you can choose between DropDown, RadioButtonGroup and CheckboxGroup Field Controls to display 'Style' Field (depending on whether you want to allow selecting multiple items or not). To enable save functionality you have to add a 'Save' and a 'Cancel' buttons to your Content View with a Command Buttons control.


<%@ Control Language="C#" AutoEventWireup="true" Inherits="SenseNet.Portal.UI.SingleContentView" %>
 
<sn:ShortText runat="server" ID="DisplayName" FieldName="DisplayName" />
<sn:ShortText runat="server" ID="Make" FieldName="Make" />
<sn:DropDown runat="server" ID="Style" FieldName="Style" />
 
<sn:CommandButtons ID="CommandButtons1" runat="server" />


You can add HTML blocks into the view, around the texboxes or the buttons and you can customize both the added HTML blocks, or the textboxes and buttons with CSS and JavaScript. After saving this Content View the Content in Edit mode only displays three textboxes and the Save and Cancel buttons.

Edit a car content

3. Add a custom Template to a Field Control

Generally Field Control Templates define how a Field displays, but it can be overridden in a Content View. If you want to modify a Field Control in your custom view you have to add a template into the control with an inner asp control and customize it as you wish.


<sn:ShortText runat="server" ID="Make" FieldName="Make">
  <EditTemplate>
    <asp:TextBox ID="InnerShortText" runat="server"></asp:TextBox>
  </EditTemplate>
</sn:ShortText>


4. Generic Field Control

If there are so many Fields that you want to display in your view that it is easier to define which Fields will not be displayed, you can use Generic Field Control. You only have to add it to the view and specify which fields you want to exclude.


<sn:GenericFieldControl runat="server" ID="GenericFieldControl1" ExcludedFields="Avatar Name" />


Of course you can define not only the excluded Fields but the included also. If you want to display only a few Fields and don't want to customize them, you have to add Generic Field Control to the view and specify the Fields that you want to display.


<sn:GenericFieldControl runat="server" ID="GenericFieldControl1" FieldsOrder="DisplayName Make Style" />

Related links

References

There are no external references for this article.