Custom List View includes a wide selection of templates to display content, or as a starting point for customization. New templates are regularly added and you may also have templates built specially for your district. 

Content templates allow you to easily display and manage your content. We've already thought about the design, coding and presentation on any device, desktop or mobile. If you have a suggestion to improve or create a new template please get in touch.

Available Templates

The following (incomplete) list is an overview of available templates. It hopefully provides a flavor of the available templates and what you can do with Custom List View.

TemplateNotes
Custom Template

Customize the display template using your own markup.

Important Note: It's best to use this template for new templates only. If you change a pre-existing Custom List View template to this template, because future updates will not be applied. However, you can always reapply the original template.

Announcement ArchiveDisplays an archive of all announcements posted on your site.
Announcement ItemDisplays a single announcement.
Announcement SummaryDisplays a summary of current announcements.
Announcement Summary with ImagesDisplays a summary of current announcements with an image.
Away ListDisplay a list of staff, teachers or students not in school this week. Great for staff rooms.
Basic Document LibraryList of files (with icons) stored in a document library.
Bell ScheduleDisplay a list of bell times on your school website.
Blog SummaryConnects to a blog post list to display a summary of posts anywhere on the site.
Board Members SummaryDisplay a list of board members including a title, photo (attach a file), title and contact information. Great for district websites.
Bus Alert SummaryDisplays a special announcement of bus alerts. Used in case of delays or severe weather conditions. Under notrmal conditions this alert will not display.

Bus Schedule Archive

Displays bus status and schedules.
Bus Schedule SummaryThis is an alternate view of the Bus Alert Summary. This only shows special conditions. Under normal conditions, nothing will display.
Buy and Sell ArchiveUsed to create a buy/sell feature, displays a list of all buy and sell listings.
Buy and Sell ItemUsed to display buy and sell items.
Buy and Sell SummaryDisplays a list of buy and sell items.
District Bus Alert SummaryDisplays all bus alerts for all schools in the district. Used in case of delays or severe weather conditions. Under notrmal conditions this alert will not display.
Document DownloadsConnects to a document library and forces files to be downloaded (such as .pdf files).
Event ArchiveDisplays an archive of events, new and old.
Event ItemDisplays a calendar detail view for an invdividual event.
Event Item Week ViewDisplays a calendar view of a week's events.
Events SummaryDisplays a list of calendar events.
Events Summary SlideDisplays a slide show of calendar events. Use only in a web part zone that takes up 100% of the page width.
Events Summary Week ViewDisplays a list of events by the week.
FAQs SummaryFrequently asked questions.
Featured LinksDisplays featured links.
Featured Links ArchiveDisplays an archive of featured links.
Featured Links DropdownAllows users to navigate to links from a dropdown menu.
Featured Links with Image

Adds stylized featured links with colour and images.

Featured Videos SummaryDisplays links to external videos with a preview image.
Form ListList forms, by adding links or text descriptions. Specify categories to organise the list.
Image Gallery Summary, Item, ArchiveConnects to an image gallery to display photos and images.
Image Gallery Item Displays a single image gallery item.
Image Gallery SummaryDisplays a list of images in the image galery.
LinksDisplays a links list and highlights featured items.
Media GalleryConnects to a media gallery to display items.
Newsletter Attachment ListDisplays newsletter attachments in a single publically available archive list, making them available to any site visitors.
School ListDisplay a list of schools on a district website.
School SearchA School Directory page specific app for searching the local listing of schools.
School Search DropdownA drop-down list of all schools, usually used on a District home page.
Schoolday SummaryDisplays the current school day for the district.
Site ListDisplay a list of sites organised by category.
Special Announcement ItemVarious templates to display special announcements.
Special Announcement SummaryUsed on home pages to display current special announcements.

Template Lists & Pages

Some of the templates simply work by pointing them at a list or document library. Easily create the list and fields necessary for a Display Template by using the Create List for Template option. You'll find this option available in the app settings when no list has been specified. The more advanced templates must be connected to a list with specific columns, or connect to subsequent pages with specific names. 

While it's possible to reverse engineer the template markup to create the relevant lists and pages manually we recommend contacting support for help.

Custom Templates

Custom List View, at its core, generates repeating HTML based on a template and a SharePoint list. Custom templates are intended for advanced users with prior knowledge of SharePoint lists, HTML and CSS Stylesheets.

The information below includes examples and details the markup supported by Custom List View. These allow you complete flexibility so you can present your list information exactly as desired. 

Editing Templates

To customize a template or create your own first select Custom Template from the Custom List View app settings pane. The markup from the previously applied template becomes editable, useful if you want to customize an existing template. The following templates can now be edited:

Templates(Disabled unless Custom Template selected)
Header TemplateHTML template used for the header.
Grouping Header TemplateHTML template used for each group header.
Item TemplateHTML template used for each item. 
Grouping Footer TemplateHTML template for each group footer. 
Footer TemplateHTML template for the footer.

Markup Notes

  • Markup is case sensitive
  • Use URL Query string ItemID=id number to return a single item (to connect multiple apps together such as list and detail view)
  • Item tags follow the format <%context=tag name; param name=param value; /%>
  • Parameters are optional unless otherwise indicated.
  • Semicolons are important!
  • Easily include CSS styles or JavaScript by embedding them in the header template (e.g. <style type="text/css"> .myclass { } </style>)

Markup Examples

  • Get the field "Category" with spaces removed:
    <%field=Category; stripchars=;/%>
  • Get the field "Category with spaces, underscores, and commas removed:
    <%field=Category; stripchars= _,;/%>
  • Get the field "Body" with html stripped except links and 250 word limit:
    <%field=Body; strip=notlinks; wordlimit=250; moretext=<span>...</span>;/%>
  • Get the first image from field "Body" if it exists, otherwise point to default image:
    <%field=Body; image=/domokun.jpeg;/%>
  • Get the first image from field "Body" if it exists, otherwise print nothing:
    <%field=Body; image=;/%>  =>   <img class="sl-AnnouncementImage" src="/path/to/image.jpg" />
  • Get "Created" field with custom date format:
    <%field=Created; alldayformat=yy/MM/dd "All Day"; multidayformat=yy/MM/dd "Multi Day"; dateformat=yy/MM/dd, hh:mm tt;/%>
  • Print "Foo" if the "Check" field is true and print "Bar" if false:
    <%field=Check; iftrue=Foo; iffalse=Bar;/%>
  • Print "Foo if the list item has attachments and print "Bar if it doesn't.
    <%item=hasattachments; iftrue=Foo; iffalse=Bar;/%>
  • Get all attachments with anchor tags that open to a new window.
    <%item=attachments; target=_blank;/%>
  • Permissions:
    <p>Everyone sees this</p><%list=permission;%><a href="<%list=newitemurl;/%>">This needs permission</a></%list=permission;%>

Item Properties

Display and manipulate information from your list. These tags work in the item template only.

Tag Name
Description
Parameters
Syntax
Notes
iconreturns the url of the current item's icon   
idreturns the Recurrence ID of an item   
hasattachmentsreturns one of the specified values based on whether or not the item has attachments

iftrue=(string)

The string to return if the item has attachments. Returns nothing if not specified.

iffalse=(string)

The string to return if the item does not have attachments. Returns nothing if not specified.

<%item=hasattachments; iftrue=This is true!; iffalse=This is false!;/%>

The parameter values can include HTML markup. The only prohibited character is semicolon.

attachmentsreturns a series of anchor tags that link to attachments on this item

target=(string)

The target for all anchor tags returned.

<%item=attachments; target=_blank;/%> 
fieldreturns the value of the specified field on this item

alldayformat=(format code)

The date format to render this date field in if this item event is an all day event. Must be specified in front of the dateformat parameter.

dateformat=(format code)

The date format to render this date field in.

encode=(option)

Encode or decode the field value. Available options are: urlencode, urldecode, htmlencode, htmldecode, jsencode

iftrue=(string)

Returns the specified string if the field value equals true. Otherwise returns nothing.

iffalse=(string)

Returns the specified string if the field value equals false. Otherwise returns nothing.

ifempty=(string)

Returns the specified string if the field value is empty. Otherwise returns the field value.

ifnotempty=(string)

Returns the specified string if the field value is not emtpy. Otherwise returns nothing.

image=(string)

Returns the first image tag found in the field value. Otherwise returns the specified string.

moretext=(string)

The string to append if the field value was truncated by the wordlimit parameter.

morelink=(string)

The more link url and text (in the format "url, text") to append if the field value was truncated by the wordlimit parameter. Outputs in the format "<a href="url?QStrItemID=id" class="sl-ReadMore">text</a>".The text parameter is optional.

multidayformat=(format code)

The date format to render this date field in if this item event is a multi-day event. Must be specified in front of the dateformat parameter.

replaceregx=(regex)

The regex string that specifies the string to replace. Must be specified before the replacewith parameter.

replacewith=(string)

The replacement string for the one found by the replaceregx expression. Must be specified after the replaceregx parameter.

strip=(string)

Strips ALL HTML tags except the ones specified.
The list is a comma delimited list of tag names to NOT strip.

stripchars=(characters)

Removes all of the specified characters from the field value.

wordlimit=(number)

Truncate the field value to the specified number of words.

<%field=String Field; strip=br,a; stripchars=an$ ,.~; wordlimit=26; moretext=more...;/%>

<%field=Event Field; alldayformat=MMM dd, yyyy "(All Day)"; multidayformat=MMM dd, yyyy "(Multi Day)"; dateformat=MMM dd, yyyy hh:mm tt;/%>

<%field=String Field; image=; /%>

<%field=Choice Field; iftrue=This is true!; iffalse=This is false!;/%>

 

Grouping Properties

Include grouping field properties in your template.These tags work in the group header and footer templates only.

Tag Name
Description
Parameters
Syntax
Notes
fieldreturns the value of the grouping fieldSame as the item property field tag<%group=field;/%> 
id

returns the id of the folder if grouping by folders

returns the grouping field value otherwise

None<%group=id;%> 

List Properties

Include list properties directly in your template. Available in all templates.

Tag Name
Description
Parameters
Syntax
Notes
idreturns ID of of the listNone<%list=id/%> 
titlereturns the title of the listNone<%list=title;/%> 
descriptionreturns the description of the listNone<%list=description;/%> 
allowrssreturns True if RSS is enabled for the list

iftrue=(string)

The string to return if RSS is enabled. Returns nothing if not specified.

iffalse=(string)

The string to return if RSS is disabled. Returns nothing if not specified.

<%list=allowrss;iftrue=This is true!; iffalse=This is false!;/%> 
openinbrowserreturns True if library is set to open item in browser (instead of client)

iftrue=(string)

The string to return if item opens in browser. Returns nothing if not specified.

iffalse=(string)

The string to return if item opens in client. Returns nothing if not specified.

<%list=openinbrowser;iftrue=This is true!; iffalse=This is false!;/%> 
urlreturns the server relative url of the listNone<%list=url;/%> 
weburlreturns the protocol agnostic absolute url of the web that the list is onNone<%list=weburl;/%> 
viewlisturlreturns the url for the default list viewNone<%list=viewlisturl;/%> 
newitemurlreturns the url of the default add new item pageNone<%list=newitemurl;/%> 
resultcountreturns the count of items returned by the list queryNone<%list=resultcount;/%> 
resulttruncatedreturns True if results were truncated by MaxItems, False otherwiseNone<%list=resulttruncated;/%> 
nextreturns the query string for the next pageSame as field tag<%list=next;/%> 
prevreturns the query string for the previous pageSame as field tag<%list=prev;/%> 
rangestartreturns the field value of the first groupSame as field tag<%list=rangestart;/%>Only available when grouping is enabled and on an event list
rangeendreturns the field value of the last groupSame as field tag<%list=rangeend;/%>Only available when grouping is enabled and on an event list
permissiononly shows the inner text if the current user has list edit permissionsNone<%list=permission;%>Yay, you have permission!<%/list=permission;%> 
noitemsonly shows the inner text if there are no items in the listNone<%list=noitems;%>There are no items.<%/list=noitems;%>Only works in the header and footer templates
overflowonly shows the inner text if results were truncated by MaxItemsNone<%list=overflow;%>There are more items<%/list=overflow;%>Only works in the header and footer templates

App Properties

Include app (web part) properties directly in your template. Available in all templates.

Tag Name
Description
Parameters
Syntax
Notes
idreturns the internal ID of the app (web part)None<%webpart=id;/%> 
clientidreturns the unique client side markup ID of the appNone<%webpart=clientid;/%>Use this to target the app in javascript
titleurlreturns the titleurl attribute of the appSame as field tag<%webpart=titleurl;/%> 
descriptionreturns the description attribute of the appSame as field tag<%webpart=description;/%> 
helpurlreturns the helpurl attribute of the appSame as field tag<%webpart=helpurl;/%> 
pageurlreturns the current web page urlSame as field tag<%webpart=pageurl;/%> 
requesturlreturns the raw page request url including the query stringSame as field tag<%webpart=requesturl;/%>