Custom List View Templates

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.

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:

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
icon	returns the url of the current item's icon
id	returns the Recurrence ID of an item
hasattachments	returns 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.
attachments	returns 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;/%>
field	returns 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.

List Properties

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

App Properties

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