Monday, June 3, 2013

Enumerate all properties of javascript context object in display templates in Sharepoint 2013

If you create custom display template e.g. for search result type, it is useful to know what properties are exposed in the javascript context object (ctx). It can be achived quite easy. In the html file of your display template write the following code:

   1: for (var p in ctx.CurrentItem)
   2: {
   3:     console.log(p + ":" + $getItemValue(ctx, p));
   4: }

After that when search result will show the item which corresponds to the result type, for which you specified custom display template, if you will open javascript console (F12 in IE and FF and select Console tab), you will see something like this:

   1: Rank:11.27 
   2: DocId:5367 
   3: WorkId:5367 
   4: Title:test123 
   5: Author:Developer 
   6: Size:0 
   7: Path:http://example.com/test/DispForm.aspx?ID=1 
   8: Description: 
   9: Write:Mon Jun 3 19:55:58 UTC+0300 2013 
  10: CollapsingStatus:0 
  11: HitHighlightedSummary: 
  12: HitHighlightedProperties:<HHTitle><c0>test123</c0></HHTitle><HHUrl>
  13: http://example.com/test/DispForm.aspx?ID=1</HHUrl><author hashh="0">Developer</author> 
  14: contentclass:STS_ListItem_GenericList 
  15: PictureThumbnailURL: 
  16: ServerRedirectedURL: 
  17: ServerRedirectedEmbedURL: 
  18: ServerRedirectedPreviewURL: 
  19: FileExtension:aspx 
  20: ContentTypeId:0x0100...
  21: ParentLink:http://example.com/test/AllItems.aspx 
  22: ViewsLifeTime: 
  23: ViewsRecent: 
  24: SectionNames: 
  25: SectionIndexes: 
  26: SiteLogo: 
  27: SiteDescription: 
  28: deeplinks: 
  29: importance: 
  30: SiteName:http://example.com
  31: IsDocument:No 
  32: LastModifiedTime:Monday, June 3, 2013 
  33: FileType: 
  34: IsContainer:No 
  35: WebTemplate: 
  36: SecondaryFileExtension: 
  37: docaclmeta: 
  38: OriginalPath:http://example.com/test/DispForm.aspx?ID=1 
  39: EditorOWSUSER:Developer 
  40: DisplayAuthor:Developer 
  41: ResultTypeIdList:38;6 
  42: PartitionId:0c37852b-34d0-418e-91c6-2ac25af4be5b 
  43: UrlZone:0 
  44: AAMEnabledManagedProperties:AttachmentURI;deeplinks;DefaultEncodingURL;ExternalMediaURL;HierarchyUrl;
  45: OrgParentUrls;OrgUrls;OriginalPath;ParentLink;Path;PictureThumbnailURL;PictureURL;PublishingImage;
  46: recommendedfor;ServerRedirectedEmbedURL;ServerRedirectedPreviewURL;ServerRedirectedURL;SiteLogo;
  47: SitePath;SPSiteURL;UserEncodingURL 
  48: ResultTypeId:38 
  49: RenderTemplateId:~sitecollection/_catalogs/masterpage/Display Templates/Search/Item_test.js 
  50: piSearchResultId:0_1 
  51: ParentTableReference:[object Object] 
  52: csr_id:ctl00_PlaceHolderMain_ctl01_csr2_item 

This information will help you to create display template.

3 comments:

  1. Hi I need to get the list item id of the current search result. How can I include that here?

    Eg: ctx.CurrentItem['listItemId']

    ReplyDelete
  2. Malin,
    at first you need to add ListItemID to managed properties mappings inside your display template:
    mso:ManagedPropertyMapping msdt:dt="string" 'Title':'Title','Path':'Path','Description':'Description','EditorOWSUSER':'EditorOWSUSER','LastModifiedTime':'LastModifiedTime','CollapsingStatus':'CollapsingStatus','DocId':'DocId','HitHighlightedSummary':'HitHighlightedSummary','HitHighlightedProperties':'HitHighlightedProperties','FileExtension':'FileExtension','ViewsLifeTime':'ViewsLifeTime','ParentLink':'ParentLink','FileType':'FileType','IsContainer':'IsContainer','SecondaryFileExtension':'SecondaryFileExtension','DisplayAuthor':'DisplayAuthor','SPSiteURL':'SPSiteURL',,'ListItemID':'ListItemID' mso:ManagedPropertyMapping

    (tags are removed, because blogger doesn't allow them in comments). After that you can do it like this: ctx.CurrentItem.ListItemID.

    ReplyDelete