Getting started - building portals

From Sense/Net Wiki
Jump to: navigation, search
Ready to build portals with multiple sites and pages, present content in various situations and create custom layouts and skins for your pages and content? This guide let's you know everything about portal building. HTML, Css, XSLT skills are required and don't be afraid to reorganize elements of an ASP.Net control! No C# or other developer skills are required.

This guide assumes you already have a basic knowledge of managing and presenting content in Sense/Net. If you are new to Sense/Net please read Getting started - using Sense/Net before advancing.

Customizing appearance of content

Content View
When you want to present a content on a page you can select a Content View to provide a custom layout for the appearing content. A Content View is an ASP.Net control that defines the HTML layout of presented content also defining the set of Fields of the content to be displayed. Content Views are placed in the folder /Root/Global/contentviews (http://localhost/Explore.html#/Root/Global/contentviews This link works only if you have a live demo install on your localhost! (Don't forget! Some feature needs authentication and/or admin rights!)) and are organized along Content Types. Most built-in types use the Generic Content Views that are located in the root of contentviews folder but there are some content with custom Content Views, for example Article or User content are presented with special layout. Separate Content Views can be defined for different scenarios: a content may appear in browse, edit or new mode. Go through the following tutorial to get a picture of how to change the appearance of a content presented on a page:

Read more about Content Views here:

Creating a Content View

Creating Content View
A Content View defines the set of Fields of the content to be displayed using Field Controls. A Content View also usually contains a control for content operations and manipulations (for example the Edit mode Content View for a content most likely contains a Save or Done editing button for saving changes and returning to the previous page). The next tutorial shows you how to create a Content View for a custom Content Type:

To create a Content View from scratch you will need some reference documentation of the available Field Controls. You can find the complete list here:

Also, the wiki articles for Fields contain references to the supported Field Controls, so it might be a good idea to check the wiki for the Fields contained in the Content Type Definition of the Content Type:

To know more about Content View path resolution, follow this link:

FieldControl Templates

Field Control Template
As you have seen before, a Content View contains Field Controls to allow presentation or manipulation of Field data of a Content. The layout of the Field Controls is set, but can be customized using Field Control Templates - an HTML/ASP.Net template that defines the layout of the Field Control. Pre-defined Field Control Templates can be found under the /Root/Global/fieldcontroltemplates. Editing these files will cause the layout of a specific Field Control be changed in every Content View. The layout of Field Controls can however also be customized using local Field Control Templates in Content Views meaning that you give the HTML/ASP.Net template in the Content View and thus the layout will be independent of the global Field Control Templates. Read the following how-to on how to use templates for Field Controls:

You can read more about Field Control Templates here:

Customizing appearance of content collections

For customizing the layout of a listed content collection you can use custom collection views just like Content Views for individual content. A view is an ASP.Net control or an XSLT renderer that defines the HTML layout of the presented list of content. It defines what field values to render on screen for each content. You can find collection views in the folder /Root/Global/renderers (http://localhost/Explore.html#/Root/Global/renderers This link works only if you have a live demo install on your localhost! (Don't forget! Some feature needs authentication and/or admin rights!)). You can learn more on how to change the appearance of collections by reading the following tutorial:

Read more about Collection Views here:

Create an XSLT renderer for Content

XSLT renderer
You already know how to create a Content View for presenting content. Besides that you can also display a content in browse mode using an XSLT renderer. Content Fields and Field values are represented with an XML and thus with a simple XSLT file you can generate custom HTML output for a Content. Simply give an XSLT renderer for the portlet presenting the Content and off you go. Read the following how-to to see how it's done step-by-step:

Not only individual Content but Content Collections can also be represented with an XML so presenting collections using XSLT is about just as easy as presenting a single Content. Read the following article on how to do this:

You can read more about XSLT renderers here:

Displaying a single content or collections on a page could not be any easier - but still: you might be wondering how could you save time when you are just about to present hundreds of different individual content? Let these content be of the same type or of completely different types, with the aid of Sense/Net Smart Pages presenting them is just as easy as it is for a single content. Read on to check it out!

Smart Pages

Smart Page
Let's say you created a content of your own defined Content Type and created a single page to present this content. Now you want to display hundreds of other content of the same type using the same layout and page that you've created previously. You can do this by placing your page in the /Root/(apps) folder (http://localhost/Explore.html#/Root/(apps) This link works only if you have a live demo install on your localhost! (Don't forget! Some feature needs authentication and/or admin rights!)) under a folder named the same as your type (/Root/(apps)/Car for example for Car Content Types), name it Browse and make your portlets on the page presenting the content context bound to the current content. Now you can address your content with their path in the browser (for example http://localhost/mycars/mycar1) and you will see your page presenting the content you have addressed. And this single page from now on will present all content of this type! Read this tutorial to see this process step-by-step:

Editing Smart Pages is not a big deal. When you are viewing a content presented with a Smart Page the Portal Remote Control provides some handy shortcuts to edit the page right-away:

If you want to create more pages for the same type to allow displaying content in several scenarios (for example one page for browsing and one page for editing content) you just have to place your pages in the same folder as above (/Root/(apps)/MyType/) and use the action parameter when addressing the content (for example name your new page Edit and request your content with the http://localhost/mycars/mycar1?action=Edit url! Your Edit page will display the content). To create an action link for your Smart Pages so that your users can access them without typing in the address bar of the browser follow the steps of this next tutorial:

Note, that the Smart Pages you create for a Content Type will serve all content of this type and of derived types as well. You can read more about creating Smart Pages here:

Now your pages can handle any content when content are addressed with the appropriate action. Ready for some more advanced stuff? Read on!

Advanced site building with Smart pages

Advanced portal building
When addressing content the appropriate Smart Page for presenting the content is selected using a special resolution logic. (apps) folders can be placed anywhere in the Content Repository allowing the creation of Smart Pages customized for content under a specific path. You can use Smart Pages to present specific Content Types, and also to present individual content - simply place your Smart Page in the This folder under the (apps) of the content. You can read about these and some other advanced features here:

The following tutorial shows you how the dynamic demo content of the demo site was built up. This may be extremely helpful when creating sites like the news demo:

Creating page templates

When creating a new page you always have to specify the page template to be used as the base layout of page. A page template is a simple HTML page containing some Sense/Net specific markups. Follow the steps of the next tutorial on how to create a new page template:

The system comes with some built-in page templates that were designed to include layouts that you'll most probably need when creating custom pages. These can be found under the /Root/Global/pagetemplates folder. Read more on pre-defined Sense/Net layouts here:

More on page templates:

Image storing and resizing

Image handling
One common aspect of building portals is the handling of images used on pages. An image can be stored in the Content Repository in two ways: either as an individual Image content after uploading an image file, or as the value of a Binary Field on a content (for example the cover of a book can be stored as an image binary in a Field of the book content). To handle an image related to a content either as a Reference to an image content or as a Binary Field Sense/Net introduces the Image Field and the Image Field Control providing a simple interface for handling images. You can read about the configuration of an Image Field and the usage in XSLT renderers or Content Views here:

Resizing of images can be done using a special Application that persists resized versions of the image onto the file system and serves the images from the file system whenever a resized version is available. You can read more about the built-in image resizer here:

Customizing List Views

List views
Creating a new List View is no big deal in Sense/Net. But the List View itself builds only one part of the visible list displayed by the List Portlet. The template that generates the actual layout is a simple XSLT renderer using the XML that is generated based on the List View and can be given as a Reference in the Markup template field of the view. You can find built-in templates under the folder /Root/System/SystemPlugins/ListView/Templates. These render an sn:ListGrid ASP.Net control that displays list data as a sortable table. The toolbar and the enclosing frame for the table is defined by a view frame. A view frame is a simple ASCX control containing a placeholder for the rendered List View. Pre-defined view frames are located under the folder /Root/System/SystemPlugins/ListView (ie.ViewFrame.ascx, MiniFrame.ascx, etc.). The following how-to shows you how to create a fully custom List View:

Skin system

Skin system
Skins can be used to customize the look and feel of your pages. In practice this means that the stylesheets of the pages can be overridden and customized. The Sense/Net Skin system however is capable of much more: besides individual CSS stylesheets you can override ContentViews, FieldControlTemplates and javascript files as well. For example if you have a ContentView for a Car content in the base skin, then you can specify another ContentView in another skin folder to differentiate the look of Car content according to whether it is displayed on a page using the base skin or your skin. For this reason whenever you use a CSS or a javascript on a page or reference a ContentView, you have to use the $skin/ path prefix and in case of CSS or javascript files you need to use some special controls to reference them. The following article introduces you these special techniques:

Also read the following how-to on creating new skins:

This next article shows you how to build a complex page using all available features of the Sense/Net Skin system:

Congratulations! You have finished the Getting started guide on building portals with Sense/Net! Customizing the presentation of content and building complex portal sites should not be a problem for you from now on. You can check out the How-tos page to see more tutorials or you can return to the Main Page and check out other Getting started guides to get acquainted with other areas of Sense/Net!


Sense/Net ECMS is a perfect choice for enterprises or companies providing portals for a huge audience, where accessing a site in different languages is crucial. We provide an easy way for clients to localize the core Sense/Net system, and an API for developers and portal builders for creating globalized features in Sense/Net.