Understanding the List Dialogs setting in SharePoint 2010


With the introduction of SharePoint 2010 two modes became available  when working with Libraries/List forms   from user experience perspective. Dialogs option in List Settings indicates whether to navigate the full page (Yes) or that the list form page is launched in a modal dialog (No)


Figure 1. List settings 

Pay attention to the last part of the description that says:

Note: Dialogs may not be available on all forms.

Interesting, isn’t it, but what exactly does it mean? In order to find out we need to investigate how List Dialogs settings is handled in SharePoint 2010.  So, Let’s get started.

How it works

Depending on which option is selected link events for List/Library forms (New|Edit|View) are handled differently. When the “Launch forms in a dialog” is selected form pages are opened in modal dialog boxes.

How it is implemented

Through SharePoint Object Model the specified List settings for enabling/disabling modal dialog boxes is accessible via  SPList.NavigateForFormsPages property.   As it turns out, the value of  this property is passed to the XSL transform via  XsltListViewWebPart.ModifyXsltArgumentList method:

/// <summary>
/// Partial implementation of XsltListViewWebPart.ModifyXsltArgumentList method
/// The remaining code is omitted for clarity here
/// </summary>
protected override void ModifyXsltArgumentList(ArgumentClassWrapper argList)
argList.AddParameter("NavigateForFormsPages", string.Empty, this.SPList.NavigateForFormsPages ? (object) BaseXsltListWebPart.XslOneString : (object) BaseXsltListWebPart.XslZeroString);

The XSLT global parameter NavigateForFormsPages  declared in main.xsl file is utilized in CTXGeneration template:

Partial implementation of CTXGeneration template
(The remaining code is omitted for clarity here)
<xsl:template name="CTXGeneration" ddwrt:ghost="always">
<script type="text/javascript">
ctx = new ContextInfo();
<!–Save List Dialogs parameter in NavigateForFormsPages property of ContextInfo structure–>
ctx.NavigateForFormsPages = <xsl:choose>
<xsl:when test="$NavigateForFormsPages='1'">true</xsl:when>
ctx<xsl:value-of select="$ViewCounter"/> = ctx;
g_ctxDict['ctx<xsl:value-of select="$ViewCounter"/>'] = ctx;

This template is intended for rendering  extra information about List settings on the client side  (ContextInfo structure). It is invoked every time when the List View is rendered on page. Pay attentions that List Dialogs setting that corresponds to NavigateForFormsPages property of ContextInfo structure.

And finally the event handler of the List form links is as follows:

//Handler for List form links in SharePoint 2010
// (from CORE.js)
function _EditLink2(elm, ctxNum)
var fn=function()
var url=GetGotoLinkUrl(elm);
if (url==null)
var ctxT=window["ctx"+ctxNum];
if (ctxT !=null && ctxT.clvp !=null)
var clvp=ctxT.clvp;
if (FV4UI() && !ctxT.NavigateForFormsPages) //check if Dialogs option (NavigateForFormsPages property of ContextInfo) is set to 'No'
clvp.ShowPopup(url); //open form in modal dialog boxes
return false;
GoToLink(elm); //navigate using href attribute of link
EnsureScript("inplview", typeof(inplview), fn);

view raw


hosted with ❤ by GitHub

How the List Form link should be handled is determined by the NavigateForFormsPages parameter in the specified function, i.e. :

  • by navigating to a full page using href attribute of link
  • display form in modal dialog box

List Dialogs setting in ListViewWebPart

Now it is time to return to the question about why this settings is not available on all the forms. For answering on that question let me step back and explain a little bit about rendering a List View. Up until now we were talking only about rendering a List View via XsltListViewWebPart  that  handles view rendering for default lists, such as document libraries and announcements. But what about ListViewWebPart that is used for rendering specific List Views like  Calendar, Gantt or Chart Views.

The point is that this parameter (List Dialogs) does not take into account when a List View is rendered via ListViewWebPart. And the message “Dialogs that may not be available on all forms” concerns exactly this situation.

Then the question arise, how do we deal with the case where we need to open List Forms as a full pages for ListViewWebPart?  Let’s consider a real-world example when we need a Calendar forms to be opened as a full pages.

There are several ways how to achieve it, but we will consider only one, one of the simplest. The idea is to specify explicitly NavigateForFormsPages parameter for ContextInfo structure.


1. Add CEWP into Calendar View page (Calendar.aspx)

2.  Place the following JavaScript code into CEWP

//Additional properties for ContextInfo () to be utilized in Calendar List View
//Specify actions navigate to the full page
var ContextInfo = (function() {
var ContextInfo_Orig = ContextInfo;
return function() {
this.NavigateForFormsPages = true; // Set navigate to the full page for list forms links

That’s all, after that the Calendar forms will be opened as a full pages.

Customize the rendering of a List View in Sharepoint 2013: Displaying List Items in Accordion


We have already discussed how to create Accordion List View in SharePoint 2010 in this post.
SharePoint 2013 introduces client side rendering framework for List View that allows to define the rendering logic of SharePoint list views using HTML/JavaScript. So, let’s discuss how to create Accordion List View in SharePoint 2013 based on client-side rendering.

For demonstration purposes we will create FAQ List based on Custom List. Default view for our list  will look like this


And our goal here to customize it in such a way list items will be displayed  in accordion as shown below



In order to simplify our solution we restrict ourselves to the creation of client side rendering template only and applying it to the existing List View. If you are interested how to build custom solution for Accordion List  please follow my post about creating Accordion List View for SharePoint 2010.

Create Custom List for FAQ

FAQ List is based on Custom List. For storing questions we will utilize Title field, for Answers we will create new field with Note type

Create  client-side rendered view for Accordion

Client-side rendered view of an FAQ list is presented below

(function () {
function OnAccordionViewPostRender(renderCtx) {
jQuery(function() {
jQuery( "#accordionFAQ" ).accordion();
function loadCss(url){
var link = document.createElement('link');
link.href = url;
link.rel = 'stylesheet';
function OnAccordionViewPreRender(renderCtx) {
function RenderAccordionViewBodyTemplate(renderCtx) {
var listData = renderCtx.ListData;
if (renderCtx.Templates.Body == '') {
return RenderViewTemplate(renderCtx);
var accordionHtml ='';
accordionHtml = '<div id="accordionFAQ">';
for (var idx in listData.Row) {
var listItem = listData.Row[idx];
accordionHtml += '<h3>';
accordionHtml += listItem.Title;
accordionHtml += '</h3>';
accordionHtml += '<div>';
accordionHtml += listItem.Answer;
accordionHtml += '</div>';
accordionHtml += '</div>';
return accordionHtml;
function _registerAccordionViewTemplate() {
var accordionViewContext = {};
//accordionViewContext.BaseViewID = 'Accordion';
accordionViewContext.Templates = {};
accordionViewContext.Templates.View = RenderAccordionViewBodyTemplate;
accordionViewContext.OnPreRender = OnAccordionViewPreRender;
accordionViewContext.OnPostRender = OnAccordionViewPostRender;
ExecuteOrDelayUntilScriptLoaded(_registerAccordionViewTemplate, 'clienttemplates.js');

Customize a List View

The last step is to apply client-side rendering template to existing view. Let’s first add FAQ List instance on on page, after that  we only need to specify JSLink property value for List View

Please note that actually  three JavaScript files have been specified(the first two are jQuery libraries) for  JSLink property. All of them are stored in my case in hive, but of course they could be stored not only in file system.

Customize the rendering of a List View in Sharepoint 2010: Displaying List Items in Accordion


The creation of non standard presentations for Lists/Libraries  is a fairly common  scenario and using the XSLT List View Web Part (XLV) possibilities that can be achieved pretty easily.
Let’s take a look how to render list of question and answers using Accordion Menu in SharePoint. Actually the idea for this post appeared after posting  of corresponding question on StackOverflow.
So, let’s discuss how it could be accomplished using XLV. For Accordion we will utilize jQuery UI library.



FAQ Custom List

First of all, let us define where  the questions and answers (FAQ) we’ll be stored. For this we will use Custom List with Content Type.

<ContentType ID="0x0100fb1027dc96a44bf280f6cb823a8da5ae"
Description="FAQ Content Type"
<FieldRef Name="LinkTitle" ID="{82642ec8-ef9b-478f-acf9-31f7d45fbc31}" DisplayName="Question" Sealed="TRUE"/>
<FieldRef Name="LinkTitleNoMenu" ID="{bc91a437-52e7-49e1-8c4e-4698904b2b6d}" DisplayName="Question" Sealed="TRUE"/>
<FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question" Sealed="TRUE"/>
<FieldRef ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}" Name="Answer"/>

Custom View for arranging items using jQuery UI Accordion

After creating Custom List we add new View for displaying Accordion for FAQ items

<View BaseViewID="10" Type="HTML" WebPartZoneID="Main" DisplayName="Accordion" DefaultView="FALSE" SetupPath="pages\viewpage.aspx" ImageUrl="/_layouts/images/generic.png" Url="Accordion.aspx">
<Toolbar Type="Standard" />
<XslLink Default="TRUE">FAQ.xsl</XslLink>
<RowLimit Paged="TRUE">30</RowLimit>
<FieldRef Name="Title" ID="{fa564e0f-0c70-4ab9-b863-0177e6ddd247}" DisplayName="Question" Sealed="TRUE"/>
<FieldRef Name="Answer" ID="{b0747420-54bc-41b2-a1b3-8432f2dbdc70}"></FieldRef>
<FieldRef Name="ID"></FieldRef>

XSLT style sheet for rendering Accordion View

XSLT style sheet for FAQ List is intended for the following purposes:

  • loading jQuery Core and UI Libraries
  • rendering list items using layout as specified for Accordion menu
  • initializing and rendering Accordion for List items

<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema"
version="1.0" exclude-result-prefixes="xsl msxsl ddwrt x d asp __designer SharePoint ddwrt2"
<xsl:import href="/_layouts/xsl/main.xsl"/>
<xsl:output method="html" indent="no"/>
<xsl:template match="View[@BaseViewID='10']" mode="full" ddwrt:ghost="always">
<tr class="ms-viewheadertr"></tr>
<div id="accordionFAQ">
<xsl:apply-templates select="." mode="RenderView" />
<xsl:apply-templates mode="footer" select="." />
<xsl:template mode="Item" match="Row[../../@BaseViewID='10']" ddwrt:ghost="always">
<xsl:param name="Fields" select="."/>
<xsl:param name="Collapse" select="."/>
<xsl:param name="Position" select="1"/>
<xsl:param name="Last" select="1"/>
<xsl:variable name="thisNode" select="."/>
<xsl:value-of select="$thisNode/@Title" />
<xsl:value-of select="$thisNode/@Answer" disable-output-escaping="yes" />
<xsl:template name="FAQViewOverride" mode="RootTemplate" match="View[List/@TemplateType=11999]" ddwrt:dvt_mode="root">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
$(function() {
$( "#accordionFAQ" ).accordion();
<xsl:call-template name="View_Default_RootTemplate"/>

view raw


hosted with ❤ by GitHub

Using jQuery UI Accordion

jQuery Core and UI libraries are injected during XSLT style sheet processing. After JavaScript files which hosted on Microsoft CDN are loaded, jQuery UI Accordion is initialized for items.

<xsl:template name="FAQViewOverride" mode="RootTemplate" match="View[List/@TemplateType=11999]" ddwrt:dvt_mode="root">
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.10/themes/redmond/jquery-ui.css" />
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.8.0.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.22/jquery-ui.js"></script>
$(function() {
$( "#accordionFAQ" ).accordion();
<xsl:call-template name="View_Default_RootTemplate"/>


FAQ List Accordion View rendered in XLV is shown below on picture

FAQ Accordion View