Corey Roth [MVP] : Presentationshttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/tags/Presentations/default.aspxTags: PresentationsenCommunityServer 2007.1 (Build: 20917.1142)Speaking at TechEd North America 2014http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/04/23/speaking-at-teched-north-america-2014.aspxWed, 23 Apr 2014 22:41:13 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6739CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6739http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/04/23/speaking-at-teched-north-america-2014.aspx#comments<p><a href="http://northamerica.msteched.com/">TechEd North America 2014</a> is right around the corner.&#160; I&#39;m proud to be among the few offering SharePoint sessions at the conference.&#160; This year, the conference is in my old neighborhood, Houston, TX.&#160; If you are going to be at the conference and have survived until the last day, Thursday (5/15), I have two great sessions for you to see.</p> <ul> <li><strong>Windows PowerShell 3.0 Administration with Microsoft SharePoint 2013 and SharePoint Online</strong> (OFC-B328) [Room 332A] (5/15/2014 8:30a) - If you love PowerShell and SharePoint this session is for you.&#160; We&#39;re going to build custom scripts to work with SharePoint 2013 and SharePoint Online. </li> <li><strong>Search Content Enrichment and Extensibility in Microsoft SharePoint 2013</strong> (OFC-B269) [Room 381A] (5/15/2014 1:00p) - In this session, you will learn all about how to extend search using the Content Enrichment Web Service and Custom Entity Extraction. </li> </ul> <p>I&#39;m looking forward to seeing everyone in Houston!</p> <p>Also, be sure and check out my <a href="http://www.itunity.com/article/teched-guide-sharepoint-people-229">TechEd Guide for SharePoint People</a> on IT Unity.</p> <p>Follow me on twitter: <a href="https://twitter.com/coreyroth">@coreyroth</a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6739" width="1" height="1">Enterprise SearchPresentationsPowerShellSharePoint OnlineOffice 365Office 365 GridTechEdSharePoint 2013Useful JavaScript to know when working with SharePoint Display Templates (#SPC3000)http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/26/useful-javascript-for-working-with-sharepoint-display-templates-spc3000-spc14.aspxWed, 26 Feb 2014 16:58:14 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6678CoreyRoth21http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6678http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/26/useful-javascript-for-working-with-sharepoint-display-templates-spc3000-spc14.aspx#comments<p>With the display templates feature in SharePoint 2013, you can highly customize the look of search using HTML, JavaScript, and jQuery.&#160; It turns out there are a lot of helper functions to make your life easier in the out-of-the-box scripts.&#160; Unfortunately, there is not a lot of documentation out there on how to get started aside from looking at the code of OOTB display templates.&#160; You can also find quite a bit by looking at the debug versions of the scripts <strong>Search.cbs.debug.js</strong> and <strong>Search.clientcontrols.js</strong>.&#160; This post today serves as a guide to go along with my upcoming <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/10/speaking-at-sharepoint-conference-2014-spc14.aspx">Display Templates</a> talk (<a href="https://twitter.com/search?q=%23SPC3000">#SPC3000</a>) at SharePoint Conference 2014.</p> <h4>Meet ctx</h4> <p>When it comes to display templates, <strong>ctx</strong> is your content object for your display template.&#160; With this object, you can get access to managed properties, the number of results, and DOM elements that make up your display template.&#160; Your display template will have a reference to <strong>ctx</strong> automatically and you will need to pass it to many of the methods to get access.</p> <h4>Accessing the Current Item</h4> <p>Now that you have met <strong>ctx</strong>, you can use it to do a number of actions.&#160; Use this in your item display templates and hover panels.</p> <p><strong>ctx.CurrentItem</strong></p> <p>This gives you access to all of the managed properties that have been set in the <strong>ManagedPropertyMapping</strong> element.&#160; See below for the syntax to request the values.</p> <p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateDebuggerCtxCurrentItem_6486C122.png"><img title="DisplayTemplateDebuggerCtxCurrentItem" style="border-left-width:0px;border-right-width:0px;background-image:none;border-bottom-width:0px;padding-top:0px;padding-left:0px;display:inline;padding-right:0px;border-top-width:0px;" border="0" alt="DisplayTemplateDebuggerCtxCurrentItem" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateDebuggerCtxCurrentItem_thumb_18BAEA69.png" width="411" height="197" /></a></p> <p><strong>Get the index of the current item</strong></p> <div style="font-size:10pt;font-family:consolas;background:white;color:black;"> <p style="margin:0px;"><span style="color:blue;">var</span> index = ctx.CurrentItemIdx;</p> </div> <p>An item display template gets called for each result you have.&#160; This property is useful to determine if you are on the first or last result.</p> <h4>Accessing Managed Properties</h4> <p>The basics of retrieving values of managed properties is accessing managed properties.&#160; You can do this in two ways by using the managed property name or the display name in the <strong>ManagedPropertyMapping</strong> element of the display template.&#160; You’ll find your managed properties typically in a format like the one below with the display property on the left and the managed property name on the right.&#160; The value in brackets is optional and is used by the Content Search web part and it&#39;s what the web part shows in the property mapping section as a label.</p> <pre>&#39;Line 1&#39;{Line 1}:&#39;Title&#39;</pre>
<pre><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/ContentSearchPropertyMappings_463C0A2C.png"><img title="ContentSearchPropertyMappings" style="border-top:0px;border-right:0px;background-image:none;border-bottom:0px;padding-top:0px;padding-left:0px;border-left:0px;display:inline;padding-right:0px;" border="0" alt="ContentSearchPropertyMappings" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/ContentSearchPropertyMappings_thumb_08AEAC63.png" width="238" height="335" /></a></pre>
<p><strong>Get Property Value by Managed Property Name</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">ctx.CurrentItem.LastModifiedTime</p>
</div>
</div>
<p>Your managed properties that you define in the <strong>ManagedPropertyMappings </strong>will show up as typed properties that you can access directly from the <strong>ctx</strong> object.&#160; The example above display the last modified time.&#160; Remember you can display a field from inside the HTML markup with the _#= =#_ markup.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">_#= ctx.CurrentItem.LastModifiedTime =#_</p>
</div>
<p><strong>Get Property Value by Display Name</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> line4value = $getItemValue(ctx, <span style="color:#a31515;">&quot;Line 4&quot;</span>);</p>
</div>
</div>
<p>You can also use <strong>$getItemValue</strong> to get the value of a property using the web part display name (the value in the brackets).&#160; This is good for the content search web part where you don&#39;t know what managed property the user has mapped to your column.&#160; For example, in the screenshot above if I request Line 4, it will provide me the value of the <em>Path </em>managed property.</p>
<h4></h4>
<h4>Useful Properties</h4>
<p>There are a number of properties that might be useful to you if you plan on working with the JavaScript object model.&#160; For example, add the following to your <strong>ManagedPropertyMapping</strong> element to get the id of the list, list item id, and site collection URL.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:#006400;">&#39;ListItemID&#39;:&#39;ListItemID&#39;,&#39;ListID&#39;:&#39;ListID&#39;,&#39;SPSiteUrl&#39;:&#39;SPSiteUrl&#39;</span></p>
</div>
<p><strong>Get the host list id</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> listId = ctx.CurrentItem.ListID;</p>
</div>
</div>
<p>This will retrieve the GUID of the list containing the item.</p>
<p><strong>Get the list item id</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> listItemId = ctx.CurrentItem.ListItemID;</p>
</div>
</div>
<p>This will return the numeric list item id of the list item.&#160; This returns the integer value as opposed to the GUID.</p>
<p><strong>Get the site collection URL</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> siteCollectionUrl = ctx.CurrentItem.SPSiteUrl;</p>
</div>
</div>
<p>The site collection URL is available with the <strong>SPSiteUrl</strong> managed property.&#160; If you need access to the site (web) instead of the site collection, the process is a little bit more involved.</p>
<p><strong>Get the file extension</strong></p>
<pre><pre style="font-size:13px;font-family:consolas;background:white;color:black;">ctx.CurrentItem.FileExtension
</pre></pre>
<p>This lets you get the file extension of the current item.&#160; Many of the helper functions use this to determine the type of document.</p>
<h4>Including External Scripts and Style sheets</h4>
<p>Since display templates are just HTML and JavaScript, you may want to reference external script files such as jQuery.&#160; You can also reference CSS files as well.&#160; You need to put these references in a <strong>&lt;script&gt;</strong> element block of your display template.</p>
<p><strong>Include an external script</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p>$includeScript(this.url, &quot;~sitecollection/_layouts/15/reputation.js&quot;);</p>
</div>
<p>You can reference external scripts using a relative URL as shown above.&#160; This example pulls the script out of the current site collection.&#160; The first parameter to <strong>$includeScript</strong> is always <strong>this.url</strong>.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">$includeScript(<span style="color:blue;">this</span>.url, <span style="color:#a31515;">https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.0.min.js</span>);</p>
</div>
<p>You can also specify an absolute URL including those residing externally on a CDN.&#160; </p>
<p>You can also load scripts using <strong>SP.SOD</strong> as well if you prefer.&#160; Some recommend this approach over <strong>$includeScript</strong> as it is supposed to be synchronous where $includeScript is not.</p>
<p><strong>Including a style sheet (CSS)</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">$includeCSS(<span style="color:blue;">this</span>.url, <span style="color:#a31515;">&quot;~sitecollection/site/library/mycustom.css&quot;</span>);</p>
</div>
</div>
<p>Referencing a style sheet looks similar to referencing a script.</p>
<h4>Key Building Blocks</h4>
<p>When it comes to working with display templates, many of the things that you need to do must be executed after the rest of the script has rendered.&#160; This especially applies for anything that modifies the DOM.&#160; Refer to the <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/13/for-tips-for-using-jquery-with-sharepoint-display-templates.aspx">four tips for using jQuery</a> post for more details.&#160;&#160; We use Post Render Callbacks to execute code after the display template is done rendering.&#160; Think of these as your jQuery equivalent to $(document).ready().&#160; There are two ways to make this happen.&#160; The first is <strong>ctx.OnPostRender.push()</strong>.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">ctx.OnPostRender = [];</p>
<p style="margin:0px;">ctx.OnPostRender.push(ctx, <span style="color:blue;">function</span> () {</p>
<p style="margin:0px;">&#160;&#160;&#160; <span style="color:green;">// do something</span></p>
<p style="margin:0px;">});</p>
</div>
<p>The first statement clears the array and the second one pushes your function onto it.&#160; This means you can have multiple OnPostRender event handlers. Instead, you may want to use AddPostRenderCallback</p>
<pre><pre style="font-size:13px;font-family:consolas;background:white;color:black;">AddPostRenderCallback(ctx, <span style="color:blue;">function</span> () {&#160;&#160;&#160;&#160; <span style="color:green;">// do something</span>
});</pre></pre>
<p>If you look at the out-of-the-box templates, you&#39;ll see them executed both ways.&#160; I tend to prefer the latter technique.</p>
<p><strong>Get a ClientContext object</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.ScriptApplicationManager.get_clientRuntimeContext();</p>
</div>
<p>This will return a ClientContext object for the site hosting the search component.&#160; If you are looking to get a ClientContext object for the site hosting the search result, see this <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/12/how-to-get-a-clientcontext-for-a-site-given-a-full-url.aspx">post</a>.</p>
<h4>Working with the DOM</h4>
<p>You&#39;ll often need to keep track of some element Ids when working with display templates.&#160; A common practice is to generate a unique base id for the containing div element and then appending strings to those ids for child elements.&#160; This often happens at the begging of every display template and then the markup references these ids.&#160; Let&#39;s look at some examples.</p>
<p><strong>Creating a unique element id for a child element</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> id = ctx.ClientControl.get_nextUniqueId();</p>
</div>
<p>One of the first lines of script you will find in a display template is this one.&#160; It generates a unique id that will be assigned to the first div element.&#160; You&#39;ll then see another line such as this when is actually used by the first div element.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> itemId = id + Srch.U.Ids.item;</p>
</div>
<p>The div element uses <strong>$htmlEncode</strong> (which we&#39;ll cover below) to html encode the id.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">&lt;</span><span style="color:maroon;">div</span> <span style="color:red;">id</span><span style="color:blue;">=&quot;_#= $htmlEncode(itemId) =#_&quot;</span> <span style="color:red;">name</span><span style="color:blue;">=&quot;Item&quot;</span> <span style="color:red;">data-displaytemplate</span><span style="color:blue;">=&quot;DefaultItem&quot;</span> <span style="color:red;">class</span><span style="color:blue;">=&quot;ms-srch-item&quot;</span> <span style="color:red;">onmouseover</span><span style="color:blue;">=&quot;</span>_#= ctx.currentItem_ShowHoverPanelCallback =#_<span style="color:blue;">&quot;</span> <span style="color:red;">onmouseout</span><span style="color:blue;">=&quot;</span>_#= ctx.currentItem_HideHoverPanelCallback =#_<span style="color:blue;">&quot;&gt;</span></p>
</div>
<p>What do these ids look like?&#160; Here is an example.</p>
<p><em>ctl00_ctl53_g_f59f896a_d82a_4957_acea_90abc7a9b86e_csr1</em></p>
<p><strong>Getting the id of the div of the display template</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">ctx.ClientControl.get_id();</p>
</div>
<p>This will return the base id of the display template.</p>
<h4>Utility Functions</h4>
<p>You&#39;ll find a number of useful functions in the Srch.U object for everything from checking for null to manipulation of strings.&#160; A lot of this overlaps with jQuery but there are some other search specific functions.&#160; In the out-of-the-box display templates you&#39;ll sometimes see these methods referenced with Srch.U or with an alias using the $ sign.&#160; Take a look at our first example.</p>
<p><strong>Checking for null</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">if</span> (!$isNull(ctx.ClientControl))</p>
<p style="margin:0px;">{</p>
<p style="margin:0px;">&#160;&#160;&#160; <span style="color:green;">// do something</span></p>
<p style="margin:0px;">}</p>
</div>
<p>The above use of <strong>$isNull</strong> will execute the code in the if statement if the object is not null.&#160; The code snippet below using <strong>Srch.U.n</strong> will also do the same thing.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">if</span> (!Srch.U.n(ctx.ClientControl))</p>
<p style="margin:0px;">{</p>
<p style="margin:0px;">&#160;&#160;&#160; <span style="color:green;">// do something</span></p>
<p style="margin:0px;">}</p>
</div>
<p><strong>Checking for an empty string</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">if</span> (!$isEmptyString(ctx.CurrentItem.DisplayAuthor)) { }</p>
</div>
<p>You can use <strong>$isEmptyString</strong> or <strong>Srch.U.e</strong> to check if a string is empty.</p>
<p><strong>Checking if an array is empty</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">if</span> ($isEmptyArray(myArray)) { }</p>
</div>
<p>To determine if an array is empty <strong>$isEmptyArray</strong>.</p>
<p><strong>Getting an array from multi-value fields such as author</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> authors = Srch.U.getArray(ctx.CurrentItem.DisplayAuthor);</p>
</div>
<p>The <strong>Srch.U.getArray</strong> method is handy because it knows how to split common multi-value fields such as author.&#160; It has a list of known delimeters such as &quot;,#&quot;, &quot;|&quot;, and &quot;;&quot;.</p>
<p><strong>Check if the item is a web page</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">ctx.CurrentItem.csr_ShowViewLibrary = !Srch.U.isWebPage(ctx.CurrentItem.FileExtension);</p>
</div>
</div>
<p>This method knows extensions for common page types and will return true if the extension is a page (i.e.: .aspx or .html).</p>
<p><strong>Get a friendly name for a file extension</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.U.getFriendlyNameForFileExtension(ctx.CurrentItem.FileExtension);</p>
</div>
<p>This method is how search displays the word PowerPoint instead of PPTX.</p>
<p><strong>Get the Display Name from an author field</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> author = Srch.U.getDisplayNameFromAuthorField(ctx.CurrentItem.AuthorOWSUSER);</p>
</div>
<p>This function will display the author&#39;s full name properly.</p>
<p><strong>Setting the icon</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">ctx.CurrentItem.csr_Icon = Srch.U.getIconUrlByFileExtension(ctx.CurrentItem);</p>
</div>
<p>This allows you to override the icon for a given item result.&#160; You can call <strong>Srch.U.getIconUrlByFileExtension()</strong> if you want to get the icon for the given file type.</p>
<p><strong>Get the number of items</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">ctx.ClientControl.get_numberOfItems();</p>
</div>
<p>You can get the number of items returned using <strong>ctx.CurrentItem.get_numberOfItems()</strong>.</p>
<p><strong>Determine if the host is SharePoint Foundation</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">if</span> (!Srch.U.isSPFSKU()) { }</p>
</div>
<p>Some functionality isn&#39;t available in SPF, use this method to determine your version.</p>
<h4>Formatting</h4>
<p>The <strong>Srch.U</strong> class has a number of methods that make formatting values easier.&#160; Besides just the basic formatting, it has formatting methods for numbers, dates, and file sizes that are more human readable such as display &quot;5 MB&quot; instead of &quot;5,000,000 bytes&quot;.&#160; These method are locale aware so they should display your data in the correct format for the user.</p>
<p><strong>Formatting the date</strong> <strong>with a short pattern</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.U.toFormattedDate(ctx.CurrentItem.Write, <span style="color:#a31515;">&#39;ShortDatePattern&#39;</span>);</p>
</div>
<p>By default, this will use <em>LongDatePattern </em>if you don&#39;t specify a date pattern.&#160; </p>
<p><strong>Formatting numbers</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.U.toFormattedNumber(value, 3);</p>
</div>
<p>This formats the number with three decimal places if you are passing it a decimal number.</p>
<p><strong>Format the number using approximations</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.U.toFriendlyNumber(value);</p>
</div>
<p>This is useful for numbers in the 1,000 range and greater.&#160; It rounds down to the nearest thousand.&#160; For example, 52,343 will be returned as &quot;52,000+&quot;.&#160; If the value is greater than 100,000, it will return a value of 100,000+.</p>
<p><strong>Format file sizes</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.U.toFileSizeDisplay(ctx.CurrentItem.FileSize, false);</p>
</div>
<p>This will return the file size in GB, MB, or KB.&#160; You can optionally have it show the decimal part with the second parameter. </p>
<p><strong>Formatting a string</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;"><span style="color:blue;">var</span> myString = String.format(<span style="color:#a31515;">&#39;Hello World {0} {1}&#39;</span>, value1, value2);</p>
</div>
<p>String formatting is available just like you would use in C#.</p>
<p><strong>Truncate a URL</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.U.truncateUrl(ctx.CurrentItem.Path, 40);</p>
</div>
<p>Want to display a truncated path like you see in the search results.&#160; This method is how it is done.&#160; You can specify the number of characters in length you want it with the second parameter.</p>
<p><strong>Trim a string</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.U.getTrimmedString(string, 40);</p>
</div>
<p>Use this to trim a long string.&#160; An ellipsis (...) will be added to the end of the string past the cutoff (second parameter)</p>
<p><strong>Trim Spaces</strong></p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">Srch.U.trimExtraSpaces(string);</p>
</div>
<p>This method is handy to trim spaces from a string.</p>
<h4>Localization</h4>
<p>Display templates have built-in support for providing localization.&#160; It uses a system of resource dictionary stored in JavaScript files located in culture specific folders.&#160; Each culture specific folder contains a file <strong>CustomStrings.js</strong>.&#160; You can use this file or include your own.&#160;&#160; </p>
<p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateLanguageFiles_4F2B9C6B.png"><img title="DisplayTemplateLanguageFiles" style="border-left-width:0px;border-right-width:0px;background-image:none;border-bottom-width:0px;padding-top:0px;padding-left:0px;display:inline;padding-right:0px;border-top-width:0px;" border="0" alt="DisplayTemplateLanguageFiles" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateLanguageFiles_thumb_119E3EA2.png" width="386" height="314" /></a>&#160;</p>
<p><strong>Registering a resource dictionary</strong></p>
<p>If you look inside <strong>CustomStrings.js</strong> you will see the syntax of adding resources using a simple array with <strong>$registerResourceDictionary</strong>.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">$registerResourceDictionary(<span style="color:#a31515;">&quot;en-us&quot;</span>, {</p>
<p style="margin:0px;">&#160;&#160;&#160; <span style="color:#a31515;">&quot;sampleCustomStringId&quot;</span>: <span style="color:#a31515;">&quot;Sample custom string&quot;</span>,</p>
<p style="margin:0px;">&#160;&#160;&#160; <span style="color:#a31515;">&quot;rf_RefinementTitle_ManagedPropertyName&quot;</span>: <span style="color:#a31515;">&quot;Sample Refinement Title for ManagedPropertyName&quot;</span></p>
<p style="margin:0px;">});</p>
</div>
<p><strong>Loading a resource file</strong></p>
<p>Many out-of-the-box templates load a resource file automatically using the statement below.&#160; If not, you can add it yourself or modify it if you are using a different resource dictionary.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">$includeLanguageScript(<span style="color:blue;">this</span>.url, <span style="color:#a31515;">&quot;~sitecollection/_catalogs/masterpage/Display Templates/Language Files/{Locale}/CustomStrings.js&quot;</span>);</p>
</div>
<p><strong>Using a resource</strong></p>
<p>Using a resource in your display template is quite easy using <strong>$resource</strong>.&#160; It&#39;s a good idea to make use of <strong>$htmlEncode</strong> to encode it before writing it.</p>
<div style="font-size:10pt;font-family:consolas;background:white;color:black;">
<p style="margin:0px;">_#= $htmlEncode($resource(<span style="color:#a31515;">&quot;sampleCustomStringId&quot;</span>)) =#_</p>
</div>
<p><strong></strong></p>
<h4>See more at #SPC14</h4>
<p>If you are interested in Display Templates, be sure and come see my <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/10/speaking-at-sharepoint-conference-2014-spc14.aspx">talk</a> (<a href="https://twitter.com/search?q=%23SPC3000">#SPC3000</a>) at SharePoint Conference 2014.&#160; We&#39;ll be using a lot of what you see in this post in the demos.</p>
<p>Follow me on twitter: <a href="https://twitter.com/coreyroth">@coreyroth</a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6678" width="1" height="1">SharePointEnterprise SearchPresentationsSharePoint OnlineOffice 365Office 365 GridSharePoint 2013SPC14Display Templates#SPC14 Post - Using Display Templates to format search results as a gridhttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/20/spc14-post-using-display-templates-to-format-search-results-as-a-grid.aspxThu, 20 Feb 2014 15:57:00 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6656CoreyRoth17http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6656http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/20/spc14-post-using-display-templates-to-format-search-results-as-a-grid.aspx#comments<p>Today at SharePoint Conference 2014 in session <a href="https://twitter.com/search?q=%23SPC3000">#SPC3000</a> on <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/10/speaking-at-sharepoint-conference-2014-spc14.aspx">Display Templates</a>, I showed how to format your search results as a grid when using the Content Search web part.&nbsp; As promised, this blog post has gone live that walks you through the exact same steps we performed in the demo.&nbsp; I&#39;ve also attached the display templates in this post so that you can get started immediately.</p> <p>To create a grid with display templates, we need to create a new Control display template and a new Item display template.&nbsp; The control wraps the items so this is where the start of our table will begin.&nbsp; You can build your display templates with design manager, the master page gallery, or with SharePoint Designer.</p> <p><b>Building the Control Display Template</b></p> <p>I don&#39;t like to build display templates from scratch, so we&#39;ll start by taking a copy of <b>Control_List.html</b> and call it <b>Control_Grid.html</b>.&nbsp; Edit the file and start by changing the title tag.&nbsp; This is what is shown in the Content Search web part.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span style="color:blue;">&lt;</span><span style="color:maroon;">title</span><span style="color:blue;">&gt;</span>Grid<span style="color:blue;">&lt;/</span><span style="color:maroon;">title</span><span style="color:blue;">&gt;</span></p> </div> <p>You can optionally change the description if you would like.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span>&lt;mso:MasterPageDescription msdt:dt=&quot;string&quot;&gt;This is a grid.&lt;/mso:MasterPageDescription&gt;</span></p> </div> <p>Next give the root div a new id.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span style="color:blue;">&lt;</span><span style="color:maroon;">div</span> <span style="color:red;">id</span><span style="color:blue;">=&quot;Control_Grid&quot;&gt;</span></p> </div> <p>Ultimately, we are going to use the jQuery DataTables library to make our tables look pretty.&nbsp; We&#39;ll go ahead and include all of the necessary scripts now.&nbsp; I am pulling them in via CDN.&nbsp; You can tweak the version numbers as desired.&nbsp; Add these into the <b>script</b> element.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;">$includeScript(<span style="color:blue;">this</span>.url, <span>&quot;https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.0.min.js&quot;</span>);</p> <p style="margin:0px;">$includeScript(<span style="color:blue;">this</span>.url, <span>&quot;https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min.js&quot;</span>);</p> <p style="margin:0px;">$includeCSS(<span style="color:blue;">this</span>.url, <span>&quot;https://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/css/jquery.dataTables.css&quot;</span>);</p> </div> <p>The <b>ListRenderRenderWrapper </b>wraps each item template rendered with an <b>li</b> tag.&nbsp; We need these so remove the two push statements.</p> <p>To work with our table and table header, we need to generate some Ids.&nbsp; These Ids we&#39;ll use with jQuery code later to add elements.&nbsp; We do this in the same manner as you see in other display templates used in the search center.&nbsp; We use <b>ctx.ClientControl.get_nextUniqueid() </b>to generate a random identifier.&nbsp; We then append strings onto it for our own use.&nbsp; You can add the following statements anywhere in the first JavaScript block (just not inside the wrapper). </p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span>var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + &quot;_Table_&quot;);</span></p> <p style="margin:0px;"><span>var headerRowId = $htmlEncode(encodedId + &quot;_HeaderRow_&quot;);</span></p> </div> <p>We now need to remove our <b>ul </b>elements and replace them with a table.&nbsp; We&#39;re going to use the <i>encodedId</i> from above as our id.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span style="color:blue;">&lt;</span><span style="color:maroon;">table</span>&nbsp; <span style="color:red;">id</span><span style="color:blue;">=&quot;_#= encodedId =#_&quot;</span> <span style="color:red;">class</span><span style="color:blue;">=&quot;resultsTable&quot;&gt;</span></p> </div> <p>We will also want to close the table tag after <b>ctx.RenderGroups</b>.<b>&nbsp; </b>Here&#39;s what the section looks like.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span>var noResultsClassName = &quot;ms-srch-result-noResults&quot;;</span></p> <p style="margin:0px;">&nbsp;</p> <p style="margin:0px;"><span>var encodedId = $htmlEncode(ctx.ClientControl.get_nextUniqueId() + &quot;_Table_&quot;);</span></p> <p style="margin:0px;"><span>var headerRowId = $htmlEncode(encodedId + &quot;_HeaderRow_&quot;);</span></p> <p style="margin:0px;">&nbsp;</p> <p style="margin:0px;"><span>var ListRenderRenderWrapper = function(itemRenderResult, inCtx, tpl)</span></p> <p style="margin:0px;"><span>{</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; var iStr = [];</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; iStr.push(itemRenderResult);</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; return iStr.join(&#39;&#39;);</span></p> <p style="margin:0px;"><span>}</span></p> <p style="margin:0px;"><span>ctx[&#39;ItemRenderWrapper&#39;] = ListRenderRenderWrapper;</span></p> <p style="margin:0px;"><span>_#--&gt;</span></p> <p style="margin:0px;">&nbsp;&nbsp;&nbsp; <span style="color:blue;">&lt;</span><span style="color:maroon;">table</span>&nbsp; <span style="color:red;">id</span><span style="color:blue;">=&quot;_#= encodedId =#_&quot;</span> <span style="color:red;">class</span><span style="color:blue;">=&quot;resultsTable&quot;&gt;</span></p> <p style="margin:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _#= ctx.RenderGroups(ctx) =#_</p> <p style="margin:0px;">&nbsp;&nbsp;&nbsp; <span style="color:blue;">&lt;/</span><span style="color:maroon;">table</span><span style="color:blue;">&gt;</span></p> </div> <p><b>Building the Item Display Template</b></p> <p>The Item Display Template gets called once for every search result.&nbsp; We need to create a display template that renders a table row as opposed to a list item.&nbsp; To do this, we&#39;re going to copy <b>Item_Diagnostic.html</b>.&nbsp; We&#39;ll call this new copy, <b>Item_GridRow.html</b>.&nbsp; Start by changing the title tag of this file too.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span style="color:blue;">&lt;</span><span style="color:maroon;">title</span><span style="color:blue;">&gt;</span>Grid Row<span style="color:blue;">&lt;/</span><span style="color:maroon;">title</span><span style="color:blue;">&gt;</span></p> </div> <p>You can optionally change the description if you would like.&nbsp; Next, give the root div a new name.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span style="color:blue;">&lt;</span><span style="color:maroon;">div</span> <span style="color:red;">id</span><span style="color:blue;">=&quot;Item_GridRow&quot;&gt;</span></p> </div> <p>Now, we want to remove the existing HTML markup as we don&#39;t need it.&nbsp; Remove everything between the <b>ul</b> tags.&nbsp; Then we are going to replace it with our logic to display the table row.&nbsp; If you remember, the diagnostic control, it has ten managed properties that you can map, <i>Line 1</i> through <i>Line 10</i>.&nbsp; This code simply writes out a new table row and then iterates through those lines 1 through 10.&nbsp; The managed property and it&#39;s value are assigned to the <i>lineValueInfo</i> object.&nbsp; If a managed property is mapped, it will write out the value.&nbsp; If, it&#39;s mapped but there is no value, it will write out an empty table cell.&nbsp; If a managed property hasn&#39;t been mapped, then it will not do anything.&nbsp; This allows for the grid to feature the exact number of mapped columns and not have any empty cells.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span style="color:blue;">&lt;</span><span style="color:maroon;">tr</span> <span style="color:red;">class</span><span style="color:blue;">=&quot;gridRow&quot;&gt;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p> <p style="margin:0px;"><span>&lt;!--#_</span></p> <p style="margin:0px;"><span>for(var lineNum = 1; lineNum &lt;= 10; lineNum++)</span></p> <p style="margin:0px;"><span>{</span></p> <p style="margin:0px;">&nbsp;</p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; var lineValueInfo = $getItemValue(ctx, String.format(&quot;Line {0}&quot;, lineNum));</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; if(!$isNull(lineValueInfo) &amp;&amp; !$isEmptyString(cbsDiagnostic_RenderPropertyMappings(lineValueInfo)))</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; {</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var lineId = String.format(&quot;{0}line{1}&quot;, encodedId, lineNum);</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; var slotName = String.format($resource(&quot;item_Diagnostic_SlotNameFormat&quot;), lineNum);</span></p> <p style="margin:0px;"><span>_#--&gt;</span></p> <p style="margin:0px;"><span>&lt;!--#_</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if(!lineValueInfo.isEmpty)</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; if (ctx.CurrentItemIdx == 0)</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; ctx.ManagedPropertyNames.push(lineValueInfo.managedPropertyName);</span></p> <p style="margin:0px;"><span>_#--&gt;</span></p> <p style="margin:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:blue;">&lt;</span><span style="color:maroon;">td</span><span style="color:blue;">&gt;</span>_#= lineValueInfo =#_<span style="color:blue;">&lt;/</span><span style="color:maroon;">td</span><span style="color:blue;">&gt;</span></p> <p style="margin:0px;"><span>&lt;!--#_</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; else</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; _#--&gt;</span></p> <p style="margin:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span style="color:blue;">&lt;</span><span style="color:maroon;">td</span><span style="color:blue;">&gt;&lt;/</span><span style="color:maroon;">td</span><span style="color:blue;">&gt;</span></p> <p style="margin:0px;">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; <span>&lt;!--#_</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; }</span></p> <p style="margin:0px;"><span>}</span></p> <p style="margin:0px;"><span>_#--&gt;</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </p> <p style="margin:0px;"><span style="color:blue;">&lt;/</span><span style="color:maroon;">tr</span><span style="color:blue;">&gt;</span></p> </div> <p>If you are getting confused with the cutting and pasting.&nbsp; Don&#39;t worry because I&#39;ve attached the display templates to this post.</p> <p><b>Trying out the display templates</b></p> <p>Add a content search web part to a page and then set the <b>Control </b>template to <b>Grid</b> and the <b>Item</b> template to <b>Grid Row</b>.</p> <p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/ContentSearchPropertiesGridSelected_6038BB69.png"><img width="210" height="259" title="ContentSearchPropertiesGridSelected" style="border:0px currentColor;border-image:none;padding-top:0px;padding-right:0px;padding-left:0px;display:inline;background-image:none;" alt="ContentSearchPropertiesGridSelected" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/ContentSearchPropertiesGridSelected_thumb_295E6723.png" border="0" /></a></p> <p>Your results should change to look like a grid now.&nbsp; It&#39;s not very pretty yet, but it&#39;s a start.</p> <p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateGridNoHeader_5DFEC35E.png"><img width="519" height="161" title="DisplayTemplateGridNoHeader" style="border:0px currentColor;border-image:none;padding-top:0px;padding-right:0px;padding-left:0px;display:inline;background-image:none;" alt="DisplayTemplateGridNoHeader" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateGridNoHeader_thumb_7DAD9D26.png" border="0" /></a></p> <p>We can add a few fields to it using the property mapping.&nbsp; Start by checking the <i>Change the mapping...</i> checkbox.&nbsp; In my example, I am going to add Author, Write, and Path.</p> <p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/ContentSearchPropertiesMapping_1232ECA5.png"><img width="192" height="261" title="ContentSearchPropertiesMapping" style="border:0px currentColor;border-image:none;padding-top:0px;padding-right:0px;padding-left:0px;display:inline;background-image:none;" alt="ContentSearchPropertiesMapping" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/ContentSearchPropertiesMapping_thumb_46D348E0.png" border="0" /></a></p> <p>Here is what our grid looks like now.</p> <p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateGridNoHeaderMoreColumns_668222A8.png"><img width="528" height="244" title="DisplayTemplateGridNoHeaderMoreColumns" style="border:0px currentColor;border-image:none;padding-top:0px;padding-right:0px;padding-left:0px;display:inline;background-image:none;" alt="DisplayTemplateGridNoHeaderMoreColumns" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateGridNoHeaderMoreColumns_thumb_620BA1E1.png" border="0" /></a></p> <p><b>Adding a header row</b></p> <p>Unfortunately, something that seems as simple as adding a header row is quite complicated.&nbsp; The header row belongs in the control template.&nbsp; However, we don&#39;t know what the managed properties are inside of this template.&nbsp; We only have access to them from the item template.&nbsp; Our technique to work around this is to collect the information in an array when the item template is executed.&nbsp; Then we&#39;ll use an <b>OnPostRender</b> event to look at that array and build the header row.&nbsp; Think of OnPostRender as your equivalent to $(Document).Ready() in jQuery.&nbsp; We&#39;ll simply add this array to the <b>ctx</b> object.</p> <p>Go back to <b>Control_Grid.html</b> and add the following line after the headerRowId line.&nbsp; This initializes our array.&nbsp; Now we just need to add some values to it.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span>ctx.ManagedPropertyNames = [];</span></p> </div> <p>Now, we need to add a table header inside the table element we originally created.&nbsp; Notice the use of <b>headerRowId</b> that we defined before.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span style="color:blue;">&lt;</span><span style="color:maroon;">thead</span><span style="color:blue;">&gt;</span></p> <p style="margin:0px;">&nbsp;&nbsp;&nbsp; <span style="color:blue;">&lt;</span><span style="color:maroon;">tr</span> <span style="color:red;">id</span><span style="color:blue;">=&quot;_#= headerRowId =#_&quot;</span> <span style="color:red;">class</span><span style="color:blue;">=&quot;resultsTableHeader&quot;&gt;</span></p> <p style="margin:0px;">&nbsp;&nbsp;&nbsp; <span style="color:blue;">&lt;/</span><span style="color:maroon;">tr</span><span style="color:blue;">&gt;</span></p> <p style="margin:0px;"><span style="color:blue;">&lt;/</span><span style="color:maroon;">thead</span><span style="color:blue;">&gt;</span></p> </div> <p>Now switch to <b>Item_GridRow.html</b>.&nbsp; Here we are going to add some inside the loop.&nbsp; The <b>lineValueInfo</b> object has the name of the managed property.&nbsp; Add this snippet into the if statement checking if lineValueInfo is empty or not.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span>if (ctx.CurrentItemIdx == 0)</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; ctx.ManagedPropertyNames.push(lineValueInfo.managedPropertyName);</span></p> </div> <p>Since the item template gets executed multiple times, we only want to add this information once.&nbsp; Using <b>ctx.CurrentItemIdx</b>, we can check to see if this is the first iteration of this display template.</p> <p>Now we need to go back to <b>Control_Grid.html</b> and create the <b>OnPostRender</b> event.&nbsp; You can add this code after the line you just added.</p> <div style="background:white;color:black;font-family:consolas;font-size:10pt;"> <p style="margin:0px;"><span>ctx.OnPostRender = [];</span></p> <p style="margin:0px;"><span>ctx.OnPostRender.push(function () {</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; for(var i = 0; i &lt; ctx.ManagedPropertyNames.length; i++)</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; {</span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&quot;.resultsTableHeader&quot;).append(&quot;&lt;th&gt;&quot; + ctx.ManagedPropertyNames[i] + &quot;&lt;/th&gt;&quot;);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></p> <p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; }</span></p> <p style="margin:0px;"><span>});</span></p> </div> <p>This code iterates through the managed properties stored in the <b>ctx.ManagedPropertyNames</b> array.&nbsp; It then just appends a <b>th </b>element for each property name.</p> <p>Save your display templates and then refresh your page in the browser and now we should have the names of the managed properties above each column.</p> <p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateGridHeader_7690F15F.png"><img width="611" height="300" title="DisplayTemplateGridHeader" style="border:0px currentColor;border-image:none;padding-top:0px;padding-right:0px;padding-left:0px;display:inline;background-image:none;" alt="DisplayTemplateGridHeader" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateGridHeader_thumb_48376BB2.png" border="0" /></a></p> <p><b>Using DataTables</b></p> <p>At this point, we have the makings of a good grid, but it&#39;s still quite easy.&nbsp; Now is a good time to enlist the help of the jQuery <a href="https://datatables.net/">DataTables plug-in</a>.&nbsp; The key to using this plug-in is having a well formatted table.&nbsp; That means no missing cells or anything like that.&nbsp; Luckily, I took all of the hard work out of that and our code accommodates for that.&nbsp; Since we have already registered the script, it only takes one line of code to take advantage of it.&nbsp; Just add this to the end of the <b>OnPostRender</b> function.&nbsp; We just need to use the <b>encodedId</b> to get a reference to our table and then apply the <b>dataTable()</b> method to it.&nbsp; I passed a few parameters to it as well such as disabling paging and sorting.&nbsp; You can look up additional parameters on the plug-in&#39;s website.&nbsp; </p> <pre style="background:white;color:black;font-family:consolas;font-size:13px;"><span style="color:darkgreen;">$(&quot;#&quot; + encodedId).dataTable({ &quot;bPaginate&quot;: false, &quot;bAutoWidth&quot;: true, &quot;bSort&quot;: false });</span></pre>
<p>The entire <b>OnPostRender </b>method now looks like this.</p>
<div style="background:white;color:black;font-family:consolas;font-size:10pt;">
<p style="margin:0px;"><span>ctx.OnPostRender = [];</span></p>
<p style="margin:0px;"><span>ctx.OnPostRender.push(function () {</span></p>
<p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; for(var i = 0; i &lt; ctx.ManagedPropertyNames.length; i++)</span></p>
<p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; {</span></p>
<p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; $(&quot;.resultsTableHeader&quot;).append(&quot;&lt;th&gt;&quot; + ctx.ManagedPropertyNames[i] + &quot;&lt;/th&gt;&quot;);&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; </span></p>
<p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; }</span></p>
<p style="margin:0px;">&nbsp;</p>
<p style="margin:0px;"><span>&nbsp;&nbsp;&nbsp; $(&quot;#&quot; + encodedId).dataTable({ &quot;bPaginate&quot;: false, &quot;bAutoWidth&quot;: true, &quot;bSort&quot;: false });</span></p>
<p style="margin:0px;"><span>});</span></p>
</div>
<p>Now refresh your page, and you should have a nice grid that looks like this.</p>
<p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateGridWithDataTables_71AE3DA3.png"><img width="666" height="269" title="DisplayTemplateGridWithDataTables" style="border:0px currentColor;border-image:none;padding-top:0px;padding-right:0px;padding-left:0px;display:inline;background-image:none;" alt="DisplayTemplateGridWithDataTables" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/DisplayTemplateGridWithDataTables_thumb_5EF943EC.png" border="0" /></a></p>
<p>Now that looks a lot better.&nbsp; You can use your own CSS to apply your own colors of course.&nbsp; </p>
<p>As promised, I have attached the display templates to this post.&nbsp; Feel free to try them out, use them for yourself, and improve them.&nbsp; If you find them useful, feel free to leave a comment.</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6656" width="1" height="1">SharePointEnterprise SearchPresentationsSharePoint DesignerSharePoint OnlineOffice 365Office 365 GridSharePoint 2013SPC14Speaking at SharePoint Conference 2014 (#SPC14)http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/10/speaking-at-sharepoint-conference-2014-spc14.aspxMon, 10 Feb 2014 16:15:00 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6643CoreyRoth2http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6643http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/10/speaking-at-sharepoint-conference-2014-spc14.aspx#comments<p>I’m excited to be returning to SharePoint Conference this year to deliver another exciting session.&#160; I’m getting back to my roots this year and I’ll be delivering a session on Search.&#160; If you have survived until Thursday be sure and check out my session below:</p> <ul> <li><a href="https://twitter.com/search?q=%23SPC3000">#SPC3000</a> – <a href="http://www.sharepointconference.com/content/sessions/SPC3000">Changing the look of Search using Display Templates</a> (<a href="https://www.yammer.com/sharepointconference/uploaded_files/16538637">Yammer</a>) (<a href="http://myspc.sharepointconference.com/Sessions/Details/15244">Schedule Builder</a>) (Thursday, March 6th, 10:30a) – In this session, we’re going to go into the anatomy of a display template.&#160; We won’t spend time making complex visualizations, that you’ll never use.&#160; Instead, we’ll go into the basics of changing every aspect of a display template and how they are all connected together.&#160; You’ll leave with code samples and supporting blog posts to walk you through every step of the journey of transforming search. </li> </ul> <p>The <a href="http://www.youtube.com/watch?v=JaVoTTgPd-o" target="_new">teaser video</a> is now live.&#160; Watch to learn more about the session.</p>
<p>Of course, I have to plug my wife’s (<a href="https://twitter.com/jennifermason">@JenniferMason</a>) sessions as well.</p> <ul> <li><a href="https://twitter.com/search?q=SPC215&amp;src=typd">#SPC215</a> - <a href="http://www.sharepointconference.com/content/sessions/SPC215">Tips &amp; Tricks to make the most out of your SharePoint site and maximize adoption</a> (Wednesday, March 5th, 3:15p) </li> <li><a href="https://twitter.com/search?q=SPC114&amp;src=typd">#SPC114</a> – <a href="http://www.sharepointconference.com/content/sessions/SPC114">Women in Technology Lunch</a> (Wednesday, March 5th, 12:00p) </li> <li><a href="http://www.sharepointconference.com/content/pre-post-days?DeviceChannel=Author">SharePoint Power User Training</a> (Thursday Post-Conference, 1:00p) </li> </ul> <p>Be on the lookout for my SPC14 readiness post coming in the next few weeks.&#160; </p> <p>We’ll be returning to <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2014/02/10/announcing-sharehofbrau-returning-to-hofbrauhaus-las-vegas-after-spc14.aspx">Hofbrauhaus Las Vegas</a> for <a href="https://twitter.com/search?q=%23ShareHofbrau">#ShareHofbrau</a>.&#160; Be sure and check out the details.</p> <p><a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/SPC14_EmailSignature_ImSpeakingAt---image_08C1273D.jpg"><img title="SPC14_EmailSignature_Exhibitor" style="border-left-width:0px;border-right-width:0px;background-image:none;border-bottom-width:0px;padding-top:0px;padding-left:0px;display:inline;padding-right:0px;border-top-width:0px;" border="0" alt="SPC14_EmailSignature_Exhibitor" src="http://www.dotnetmafia.com/blogs/dotnettipoftheday/SPC14_EmailSignature_ImSpeakingAt---image_thumb_4268E289.jpg" width="244" height="113" /></a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6643" width="1" height="1">SharePointEnterprise SearchPresentationsSharePoint OnlineOffice 365Office 365 GridSharePoint 2013SPC14Display TemplatesSlides from Dev Connections 2013http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/10/13/slides-from-dev-connections-2013.aspxMon, 14 Oct 2013 04:37:14 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6530CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6530http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/10/13/slides-from-dev-connections-2013.aspx#comments<p>Last week, I had the opportunity to speak at <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/09/03/speaking-at-sharepoint-connections.aspx">Dev Connections 2013</a> in Las Vegas.&#160; Unfortunately, not all of my sessions went according to plan when I found out earlier that week that my co-presenter, Fabian Williams (<a href="https://twitter.com/fabianwilliams">@fabianwilliams</a>) came down with a case of the adult chicken pox (what are the odds?) :)&#160; The show went on and I spoke to attendees about how to leverage BCS and Search together.&#160; As promised here are links to the slides from my talks from the conference.&#160; Please, let me know if you have any questions.</p> <ul> <li><a href="http://www.slideshare.net/CoreyRoth/surfacing-your-external-data-using-bcs-in-sharepoint-2013-dev-connections-2013">Surfacing your External Data using BCS in SharePoint 2013</a></li> <li><a href="http://www.slideshare.net/CoreyRoth/office-365-introduction-to-share-point-online-development-sharepoint-connections-2013">Office 365: Introduction to SharePoint Online Development</a></li> </ul> <p>Follow me on twitter: <a href="https://twitter.com/coreyroth">@coreyroth</a>.</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6530" width="1" height="1">SharePointPresentationsOffice 365SharePoint 2013Speaking at SharePoint Connectionshttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/09/03/speaking-at-sharepoint-connections.aspxTue, 03 Sep 2013 16:04:24 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6476CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6476http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/09/03/speaking-at-sharepoint-connections.aspx#comments<p>I’m excited to be giving two sessions at <a href="http://www.devconnections.com/dev13/public/mainhall.aspx">Dev Connections</a> in Las Vegas next month.&#160; I haven’t been to this conference since 2004 I believe so I am excited to be returning as a speaker.&#160; I’ve got two session on Thursday (10/3).&#160; My first session is with the one and only Fabian Williams (<a href="https://twitter.com/fabianwilliams">@fabianwilliams</a>) where we’ll be talking about exposing data from Azure in SharePoint and searching on it.&#160; Then I’ll have an into talk about getting started with SharePoint Online development.&#160; If you are going to be in town for the conference, I’d love to see you there!</p> <p>Here is my session information:</p> <ul> <li><a href="http://www.devconnections.com/dev13/public/SessionDetails.aspx?FromPage=Calendar.aspx&amp;SessionID=1008634">Surfacing your Azure External Data using BCS in SharePoint 2013 with Alerts</a> (Thursday 10/3 9:00a)</li> <li><a href="http://www.devconnections.com/dev13/public/Calendar.aspx?ID=1050241&amp;SuperTrackId=&amp;TrackId=1000314,1000306&amp;AssociationId=&amp;DateId=1000564,1000565,1000566&amp;FormatId=&amp;DurationId=&amp;SpeakerId=&amp;AbilityLevelId=&amp;SessionTypeId=&amp;SubExpoId=&amp;Keyword=&amp;&amp;SearchEvent=&amp;View=Calendar&amp;sortMenu=102002#">Office 365: Introduction to SharePoint Online Development</a> (Thursday 10/3 1:30p)</li> </ul> <p>If you are thinking about going, you can register <a href="https://www.regonline.com/?eventID=1219870&amp;rTypeID=300531">here</a>.</p> <p>Follow me on twitter: <a href="https://twitter.com/coreyroth">@coreyroth</a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6476" width="1" height="1">SharePointPresentationsSharePoint 2013Presenting at SPTechCon Boston next week!http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/08/05/presenting-at-sptechcon-boston-next-week.aspxMon, 05 Aug 2013 15:16:09 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6434CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6434http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/08/05/presenting-at-sptechcon-boston-next-week.aspx#comments<p>I’m excited to be back in Boston next week for SPTechCon Boston 2013.&#160; It’s been more than two years since I have presented at an SPTechCon and I am really looking forward to this year more than ever!&#160; This year I am speaking on two search related topics.&#160; Both are bright in early in the morning so if you make it out of bed by then be sure and stop by.</p> <p><strong>Making the most of SharePoint Search</strong> (Monday 8/12 8:30 am) – In this session, you will learn reasons why search doesn’t work well and what you can do to fix it.&#160; You’ll get valuable advice that you can use across versions of SharePoint to make your experience better.</p> <p><strong>Delivering eDiscovery Solutions with SharePoint 2013 </strong>(Tuesday 8/13 8:30 am) – In this session, you’ll learn about the basics of eDiscovery and how SharePoint has implemented them. </p> <p>I’m beyond excited about next week so I hope to see lots of you all there!</p> <p>Follow me on twitter: <a href="https://twitter.com/coreyroth">@coreyroth</a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6434" width="1" height="1">SharePointEnterprise SearchPresentationsSharePoint 2013Slides from my SharePoint search talk at SQL Saturday #234 Baton Rougehttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/08/04/slides-from-my-sharepoint-search-talk-at-sql-saturday-234-baton-rouge.aspxMon, 05 Aug 2013 02:20:26 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6433CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6433http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/08/04/slides-from-my-sharepoint-search-talk-at-sql-saturday-234-baton-rouge.aspx#comments<p>I had the pleasure of presenting a new search talk at SQL Saturday Baton Rouge.&#160; For a SQL event, this one always brings a fair number of SharePoint users.&#160; Attendees got to hear about how to improve their search experience thought implementation of metadata and search configuration.&#160; As promised, I have uploaded my slides from the talk to Slideshare.&#160; If you have any questions, feel free to reach out to me on twitter.</p> <p><a href="http://www.slideshare.net/CoreyRoth/configuring-sharepoint-search-for-an-optimal-document-management-experience">Making the most of SharePoint search</a></p> <p>Follow me on twitter: <a href="https://twitter.com/coreyroth">@coreyroth</a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6433" width="1" height="1">SharePointPresentationsECMOffice 365SharePoint 2013Slides and code samples from my Search talk at SharePoint Summit Torontohttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/05/16/slides-and-code-samples-from-my-search-talk-at-sharepoint-summit-toronto.aspxThu, 16 May 2013 14:42:53 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6331CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6331http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/05/16/slides-and-code-samples-from-my-search-talk-at-sharepoint-summit-toronto.aspx#comments<p>I’ve had yet another fun week up here in Canada.&#160; I gave a brand new talk about the new ways to query search in SharePoint 2013.&#160; I had a room full of developers that asked a lot of great questions.&#160; As promised, my slide deck is below at SlideShare.</p> <p><a href="http://www.slideshare.net/CoreyRoth/fives-ways-to-query-share-point-2013-search-sharepoint-summit-toronto-2013">Five ways to query SharePoint 2013 Search</a></p> <p>In the session, I mentioned that I had code samples on MSDN Code, so I am providing the link below.&#160; Try them out and download them and rate them if you find them useful.</p> <p><a href="http://code.msdn.microsoft.com/site/search?f%5B0%5D.Type=User&amp;f%5B0%5D.Value=CoreyRoth%20%5BMVP%5D">SharePoint 2013 Search Samples</a></p> <p>Follow me on twitter: <a href="https://twitter.com/coreyroth">@coreyroth</a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6331" width="1" height="1">SharePointEnterprise SearchPresentationsOffice 365SharePoint 2013Speaking at SharePoint Saturday Houston, San Antonio SharePoint Users Group, and SharePoint Summit Torontohttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/04/10/speaking-at-sharepoint-saturday-houston-san-antonio-sharepoint-users-group-and-sharepoint-summit-toronto.aspxWed, 10 Apr 2013 18:54:51 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6267CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6267http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/04/10/speaking-at-sharepoint-saturday-houston-san-antonio-sharepoint-users-group-and-sharepoint-summit-toronto.aspx#comments<p>I’ve got a number of talks coming up that I am excited about.&#160; It turns out that talking about my experiences publishing SharePoint 2013 apps to the Office Store is hot!&#160; I’ve already spoken about it in Austin and now I’ll be speaking about it at the following events:</p> <ul> <li><a href="http://www.sharepointsaturday.org/houston/default.aspx">SharePoint Saturday Houston</a> (4/13)</li> <li><a href="http://sasug.net/SitePages/Home.aspx">San Antonio SharePoint Users Group</a> (4/26)</li> <li><a href="http://www.dfwsharepoint.com/">Dallas Fort Worth Users Group</a> (6/18)</li> </ul> <p>If you’re in a major city in Texas and want to hear about apps, I’ve got you covered!&#160; This talk covers my personal experiences building a business around selling apps in the Office Store.&#160; The talk is mostly non-technical and covers more of the details around what you need to submit and publish an app.&#160; If you’re going to be at any of the events be sure and check it out.</p> <p>I’m also giving a talk about the various aspects of the Search API in SharePoint 2013 at <a href="http://www.sharepointsummit.org/toronto/Pages/default.aspx">SharePoint Summit Toronto</a> (5/13 – 5/15).&#160; If you’re going to be in the area, be sure and check it out!</p> <p>Follow me on twitter: <a href="https://twitter.com/coreyroth">@coreyroth</a>.</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6267" width="1" height="1">SharePointPresentationsOffice 365SharePoint 2013AppsSlides from my Publishing SharePoint Apps talk from Austin SharePoint Users Grouphttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/02/14/slides-from-my-publishing-sharepoint-apps-talk-from-austin-sharepoint-users-group.aspxThu, 14 Feb 2013 19:32:39 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6175CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6175http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/02/14/slides-from-my-publishing-sharepoint-apps-talk-from-austin-sharepoint-users-group.aspx#comments<p>I had a great time last night at the Austin SharePoint Users Group (<a href="http://twitter.com/AustinSPUG">@AustinSPUG</a>).&#160; We had a great turnout and we had a good discussion of what the publication process looks like with SharePoint 2013 Apps in the Office Store.&#160; Austin has a very friendly group of people.&#160; Never had I had so many people come up and thank me afterwards for speaking.&#160; Now, it makes me look forward to speaking at <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/02/12/speaking-in-austin.aspx">SharePoint Saturday Austin</a> on 3/2.&#160; As promised, my slides are attached and are available on SlideShare.</p> <p><a href="http://www.slideshare.net/CoreyRoth/publishing-share-point-2013-apps-to-the-office-store-austin-sharepoint-users-group-2013">Publishing SharePoint 2013 Apps to the Office Store</a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6175" width="1" height="1">SharePointPresentationsSharePoint 2013AppsSpeaking in Austinhttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/02/12/speaking-in-austin.aspxTue, 12 Feb 2013 17:35:07 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:6172CoreyRoth2http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=6172http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2013/02/12/speaking-in-austin.aspx#comments<p>The great thing about living in Texas is that there is three SharePoint users groups less than three hours away from me.&#160; I’m excited to have the opportunity to be speaking in Austin twice in the next couple weeks.&#160; The first talk is tomorrow night (2/13 at 6:00 pm) at the <a href="http://t.co/R9cmhSMv">Austin SharePoint Users Group</a> (<a href="http://twitter.com/AustinSPUG">@AustinSPUG</a>) where I’ll be speaking about my experience publishing SharePoint 2013 Apps to the Office Store.&#160; It’s at the <a href="http://www.bing.com/maps/Default.aspx?encType=1&amp;v=2&amp;ss=ypid.YN860x401213082&amp;style=r&amp;mkt=en-us&amp;FORM=LLDP">Microsoft office</a> in Austin.&#160; </p> <p>Then, I’ll be making a return trip on 3/2 for <a href="http://www.sharepointsaturday.org/austin/default.aspx">SharePoint Saturday Austin</a> (<a href="http://twitter.com/spsatx">@SPSATX</a>) at the Etter-Harbin Alumni Center (<a href="http://binged.it/11hjpwY">Map</a>).&#160; There, I’ll be talking about new development features in Visual Studio 2012.&#160; This talk will cover features that developers can take advantage of for both SharePoint 2010 and SharePoint 2013.&#160; I’m looking forward to seeing everyone.&#160; See you there!</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=6172" width="1" height="1">PresentationsSharePoint 2010SharePoint SaturdayVisual Studio 11SharePoint 2013AppsTechEd Readiness Checklisthttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/06/07/teched-readiness-checklist.aspxThu, 07 Jun 2012 17:28:33 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:5734CoreyRoth1http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=5734http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/06/07/teched-readiness-checklist.aspx#comments<p>TechEd North America (<a href="https://twitter.com/#!/search/msteched">#msteched</a>) is just next week in Orlando, FL.&#160; This is my first TechEd and I’m excited to see what’s in store.&#160; With any conference, it’s always best to be prepared.&#160; You want to make sure you bring the right things and get everything done before you step foot on a plane.</p> <p>Here are some of the things I’ll be packing that might also be useful for you as well:</p> <ul> <li><strong>Laptop – </strong>As a presenter this one is obvious.&#160; However as an attendee, you might not want to lug one around.&#160; It can be worth it though.&#160; You will find that you want some type of computing device so that you can keep up on twitter, follow the latest gossip, and find out about any impromptu <a href="https://twitter.com/#!/search/%23SharePint">#SharePint</a> events that might occur.&#160; Maybe even read a few E-mails.&#160; As a presenter, I get the distinct pleasure of carrying a second laptop as well with my demos loaded on it in the event of an emergency / disaster.&#160; Disasters will happen.&#160; At SPC11, my virtual machine pretty much died on my primary laptop and I had to resort to the backup just twenty minutes before my session.&#160; I was sweating to say the least. </li> <li><strong>Netbook / Slate / Tablet – </strong>In lieu of carrying around your heavy laptop, I find carrying my netbook at conferences to be quite handy.&#160; I can keep up on twitter, the battery will last me all day.&#160; Bring whatever device or combination thereof you prefer, but keeping up on what’s going on at the conference using one of these small devices is much easier than trying to look things up on your phone.&#160; This year, I am foregoing this because of the second laptop and my bag will be heavy enough.&#160; I have access to an Apple device but I am thinking I will probably leave it behind because I don’t want the extra weight and I’m embarrassed to pull it out at a Microsoft conference. :)&#160; You also can use these to fill out session evaluations.&#160; There are usually incentives for filling out evaluations so I try to complete each evaluation right before the end of the session so I don’t forget. </li> <li><strong>AirCard – </strong>The wireless networks at conferences are rarely good.&#160; They are jammed with geeks trying to post updates on Twitter and check out what’s happening on Facebook.&#160; If you have access to a wireless AirCard, bring one.&#160; See if your company has any that you can check out temporarily.&#160; I still have my “temporary” AirCard I got for SPC11. :) </li> <li><strong>Cash – </strong>Just a little (more if you drink a lot :) ).&#160; There are a lot of free events but you might go to something before or after the conference and I am not a fan of running tabs at busy restaurants and bars. </li> <li><strong>Chargers / Power Supplies</strong> – I remember when I went to PDC05, I forgot my laptop charger.&#160; I was quite bummed.&#160; Don’t forget the chargers to your laptop, netbook, iPad, phones, etc. I have gotten a few of these new emergency phone chargers at conferences lately and they are very handy here.&#160; Especially when you have a Nokia Lumia 900 and the battery life is terrible.&#160; Keep in mind your average day can be 16 – 18 hours plus and you don’t want to be left in the dark because your phone died. </li> <li><strong>Snacks</strong> – I got this idea from <a href="http://twitter.com/tiffanywi">@TiffanyWI</a> because she posted a picture of a mound of snacks.&#160; It’s not a bad idea to have some snacks in the room after a late night.&#160; A bag of M&amp;Ms might look better for breakfast instead of one of those danishes no one ever eats. </li> <li><strong>Bail Money – </strong>The <a href="http://h-spug.org/SitePages/Home.aspx">Houston SharePoint Users Group</a> has a running joke about always keeping a stash of bail money around when attending a <a href="https://twitter.com/#!/search/%23SharePint">#SharePint</a>.&#160; I’ve never been to TechEd before, but I have heard some stories so it’s probably not a bad idea. </li> </ul> <p>Some other things you should remember to do before going and while at the conference:</p> <ul> <li><strong>Learn how to spell TechEd</strong> – This one has taken me months but I think I finally got it.&#160; It’s TechEd with no spaces. :) </li> <li><strong>Set your schedule on myTechEd</strong>&#160; - This will make your SPC organizers happy when it comes to capacity planning.&#160; You aren’t required to go to that session you schedule, but it will help you pick from the 10+ sessions going on at any given time slot.&#160; Go to <a href="http://northamerica.msteched.com/mycontent">myTechEd</a> and set your schedule now! </li> <li><strong>Create your Bio on myTechEd – </strong>myTechEd is a great way to plan your conference experience.&#160; Take a few minutes to write about a little bit about yourself.&#160; Include where you work if you want along with what you want to get out of the conference.&#160; Upload a picture of yourself to make things more personal.&#160; Set your <a href="http://northamerica.msteched.com/meetingpoint/profile">myTechEd</a> profile now. </li> <li><strong>Arrange for Ground Transportation</strong>&#160; - Don’t forget to arrange for ground transportation.&#160; You really don’t need a car once you get to Orlando, but you do need a way to get there.&#160; I haven’t checked into shuttle service yet, so I’ll probably just go with a Taxi. </li> <li><strong>Create a <a href="https://twitter.com/#!/search/msteched">#msteched</a> Search in Twitter – </strong>There is no question you want to keep an eye on the activity of the <a href="https://twitter.com/#!/search/msteched">#msteched</a> hash tag.&#160; You will find out about sessions, events, and it will generally give you an idea of what is happening at the conference. </li> <li><strong>Follow <a href="https://twitter.com/#!/teched_na">@TechEd_NA</a> / <a href="https://twitter.com/#!/teched_europe">@TechEd_Europe</a> on Twitter – </strong>These are the official twitter account for TechEd.&#160; This account often posts useful stuff about the conference.&#160; I’ve also used it to ask questions or provide general feedback and I’ve had good luck getting a response. </li> <li><strong>Learn hash tags for the sessions you are attending</strong> – So I am not sure if TechEd is planning on using hashtags like SPC did, but they do have session codes that look similar so I could see them being used.&#160; If so, learn the session codes that you are in and use them to talk about the session you are in on twitter.&#160; Session code <a href="http://northamerica.msteched.com/topic/details/2012/OSP338">OPS338</a> looks like a great one. :) </li> <li><strong>Find out who is going from your area</strong> – it’s always great to have a friend to hang out with at the conference.&#160; If no one you know is going, maybe you can make a new friend. </li> <li><strong>RSVP for Parties – </strong>There are a lot of them this year.&#160; Many of them require that you RSVP or stop by a booth so be sure and find out before hand.&#160; Pay attention to @TheKrewe and their <a href="http://t.co/DILAsBeX">web site</a>. </li> <li><strong>Leave space in your bag</strong> – Between the conference materials and the vendors you are going to end up with a heap of product information, trinkets, and T-shirts.&#160; Make sure you have room in your bag to bring them home.&#160; Otherwise you’ll be hand carrying them on the plane or leaving things behind.&#160; I screw this up every time and even when I think have enough space it’s never enough.&#160; This trip will be especially difficult for me since I am traveling for another four days after the conference. </li> <li><strong>Don’t be afraid to leave for lunch</strong> – I’m not a huge fan of conference food and it rarely gets along with my diet.&#160; Usually by the second or third day I am grabbing anyone I can find and going off-site. </li> </ul> <p>That’s my list.&#160; I’m sure there are other things to remember.&#160; Do you have anything else to add?&#160; Leave a comment.&#160; This probably goes without saying, but if you are not on twitter, now is the time to join.&#160; It’s the best way to keep up with what’s happening at the conference. </p> <p>I’m also giving a session at this year’s conference and I would love for you to see it.</p> <ul> <li><a href="https://twitter.com/#!/search/realtime/%23ops338">#OPS338</a> – <a href="http://northamerica.msteched.com/topic/details/2012/OSP338">Making the most of Search in SharePoint Online</a> - I am beyond excited about this talk because I get to talk about Search and SharePoint Online in the same talk.&#160; You might just be amazed at what you can do with Search in the cloud.&#160; I’ve got some great demos built using Silverlight and the Search API that you will want to see whether you want to extend search off-premises or on-premises.&#160; What’s even better is I am using Visual Studio 2012 RC to demonstrate <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/01/10/how-to-use-visual-studio-11-to-publish-solutions-to-sharepoint-online.aspx">publishing</a> <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/01/25/how-to-use-the-silverlight-web-part-with-visual-studio-11.aspx">Silverlight</a> applications to SharePoint Online.</li> </ul> <p>Enough with the shameless plug. :)&#160; Get ready and I’ll see you at the conference.&#160; If you’re into SharePoint, be sure and check out my <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/06/05/a-teched-guide-for-sharepoint-people.aspx">TechEd Guide for SharePoint People</a>.</p> <p>You can follow me on twitter <a href="http://twitter.com/coreyroth">@coreyroth</a>.</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=5734" width="1" height="1">SharePointPresentationsSharePoint 2010Office 365Office 365 GridTechEdA TechEd Guide for SharePoint Peoplehttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/06/05/a-teched-guide-for-sharepoint-people.aspxTue, 05 Jun 2012 16:30:38 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:5726CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=5726http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/06/05/a-teched-guide-for-sharepoint-people.aspx#comments<p>It’s true.&#160; I admit it.&#160; I have a sickness.&#160; I am a SharePoint person and proud of it.&#160; I’m attending Microsoft <a href="http://northamerica.msteched.com">TechEd</a> in Orlando next week (and in Amsterdam at the end of the month) for the first time.&#160; Although I am a noob to this conference, I thought I would share my thoughts on what you can do to maximize your SharePoint experience.&#160; TechEd covers all sorts of Microsoft technologies but there are plenty of SharePoint things to do.</p> <p>Be sure and check out my <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/06/07/teched-readiness-checklist.aspx">TechEd Readiness Checklist</a> as well.</p> <p>There are over <a href="http://northamerica.msteched.com/contentcatalog?Keyword=SharePoint&amp;Categories=&amp;Timeslot=&amp;Speaker=&amp;Day=&amp;Start=&amp;Finish=&amp;oc=&amp;take=20&amp;skip=-20&amp;sort=start#fbid=IrGPvqM77Bl">fifty sessions</a> and hands-on-labs about SharePoint being offered.&#160; Take a look at some of these sessions:</p> <ul> <li><a href="http://northamerica.msteched.com/topic/details/2012/PRC01#fbid=l5ntPeHBK5f">Building Federated External Access for Microsoft SharePoint 2010</a> (Pre-conference Sunday 6/10 10:00a – S210A) – If you happen to be around for the pre-conference this session looks really exciting.&#160; Unfortunately, I won’t be arriving in time to see this session. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/BOF01-ITP#fbid=IrGPvqM77Bl">Advanced Architectures for Microsoft SharePoint 2010</a> (Monday 6/11 1:15p – S329) – This is a Bird of a Feather (BoF) session that goes deep talking about service applications, cross-farm services and search. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP232#fbid=IrGPvqM77Bl">36 Terabytes: How Microsoft IT Manages SharePoint in the Enterprise</a> (Monday 6/11 4:45p – S330A) – I always find it interesting to see how Microsoft is managing SharePoint internally. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP335#fbid=IrGPvqM77Bl">Exploring the Power of Page Layouts in SharePoint 2010 WCM Sites</a> (Tuesday 6/12 10:15a - S210E) – MVPs John Ross and Randy Drisgill will teach how to do great things with page layouts. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP339#fbid=IrGPvqM77Bl">Advanced Microsoft SharePoint 2010 Upgrade Troubleshooting</a> (Tuesday 3:15p – S210A) – MVPs Shane Young and Todd Klindt explain how to get past common upgrade issues.&#160; That and the fact that Todd gave me crap on twitter. :) </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP334#fbid=IrGPvqM77Bl">Why Microsoft SharePoint and Windows Azure are Just Plain Better Together</a> (Wednesday 6/13 8:30a – S230A) – I’ve seen Steve Fox speak a number of times and it always entertaining. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/BOF09-DEV#fbid=IrGPvqM77Bl">Code vs. &quot;No-Code&quot;: Exactly Who Gets to Call Themselves a SharePoint Developer?</a> (Wednesday 6/13 10:15a – S319) – This is always an interest debate and this BoF is sure to provide a great discussion. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP337#fbid=IrGPvqM77Bl">Building and Customizing My Sites with Microsoft SharePoint 2010</a> (Wednesday 6/13 1:30p – S220G) – Another session with Ross and Drisgill showing you how to make your My Sites look better. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP338#fbid=IrGPvqM77Bl">Making the Most of Search in SharePoint Online</a> (Wednesday 6/13 3:15p – S210E) – The guy that is giving this session is awesome.&#160; I of course have to plug my own personal session. :)&#160; Come see how you can make search in SharePoint Online rock. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/DBI304#fbid=IrGPvqM77Bl">Configuring Kerberos for Microsoft SharePoint 2010 BI in 7 Steps (SQL Server 2012)</a> (Wednesday 6/13 5:00p – S331A) – Configuring Kerberos can always be a challenge.&#160;&#160; This session can help. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/BOF13-DEV#fbid=IrGPvqM77Bl">I’m a SharePoint Developer in an Enterprise World!</a> (Thursday 6/14 8:30a – S319) – I’m a fan of all of the Birds of a Feather sessions. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP336">Step-by-Step: Building Search Driven Applications That Matter</a> (Thursday 6/14 2:45p – N220A) – Great session on how to build SharePoint applications built around Search. </li> </ul> <p>If I didn’t list your session, no offense.&#160; I can’t cover them all.&#160; That and I wanted to actually get this post out before the end of the conference.&#160; :)</p> <p>TechEd has some great opportunities for certification.&#160; If you are looking to get certified, be sure to check out the following session.</p> <ul> <li><a href="http://northamerica.msteched.com/topic/details/2012/ECR06#fbid=IrGPvqM77Bl">Exam Cram Session on Exams 667 and 668: Microsoft SharePoint Server 2010</a> (Tuesday 6/12 1:30p) – MCM Shannon Bray will be there to help you study for the exams. </li> </ul> <p>There’s a whole heap of <a href="http://northamerica.msteched.com/contentcatalog?Keyword=SharePoint&amp;Categories=&amp;Timeslot=&amp;Speaker=&amp;Day=&amp;Start=&amp;Finish=&amp;oc=874108fd-2bdd-df11-82f7-001ec953730b&amp;take=20&amp;skip=-20&amp;sort=start#fbid=IrGPvqM77Bl">Hands-on-Labs</a> (HoL) for SharePoint.&#160; This is a great way to work through a scenario in SharePoint while being able to raise your hand for help.&#160; Here are a few examples (see the link above for the complete list):</p> <ul> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP51-HOL">Installing and Configuring Microsoft SharePoint Server 2010</a> </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP62-HOL">Developing for Microsoft SharePoint 2010 with the Client OM and REST in Microsoft Visual Studio 2010</a> </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/OSP33-HOL">Deploying a SharePoint Online Sandbox Solution in Microsoft Office 365</a> </li> </ul> <p>Of course there are a lot of other non-SharePoint things you should consider attending as well:</p> <ul> <li><a href="http://northamerica.msteched.com/topic/details/2012/KEY01">Opening Keynote</a> (Monday 6/11 9:00a – N. Hall A1) – Of course you don’t want to miss the keynote </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/FDN05">Windows Azure Today and Tomorrow</a> (Monday 6/11 11:00a – N310) – When Scott Guthrie talks, you listen. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/DEV213">What’s New in Visual Studio 2012</a> (Monday 6/11 1:15p – N210) – If you are a developer, you need to know what’s coming in Visual Studio 2012.&#160; Be sure and check out my <a href="http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/05/30/everything-you-need-to-know-about-sharepoint-development-in-visual-studio-11.aspx">Visual Studio 2012 series for SharePoint</a> as well. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/WCL403">PowerShell Remoting in Depth</a> (Monday 6/11 3:00p – S320E) – We use a lot of PowerShell in SharePoint. </li> <li><a href="http://northamerica.msteched.com/topic/details/2012/KEY02">Tuesday Keynote</a> (Tuesday 6/12 – 8:30a – N. Hal A1) </li> </ul> <p>Hopefully this is a good list to get you started.&#160; Is there anything that I missed that should be on here?&#160; Leave a comment and I’ll get it added.&#160; Also keep an eye our for my TechEd Readiness Checklist post as well as a similar post for TechEd Europe.&#160; I look forward to seeing everyone there next week!&#160; Have a good TechEd!</p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=5726" width="1" height="1">SharePointPresentationsSharePoint 2010SharePoint OnlineOffice 365Office 365 GridTechEdSlides from my Visual Studio 11 talk at SharePoint Saturday Houstonhttp://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/04/29/slides-from-my-visual-studio-11-talk-at-sharepoint-saturday-houston.aspxMon, 30 Apr 2012 03:47:10 GMTceb7fe2a-c56b-4d85-99e6-8dd548580538:5679CoreyRoth0http://www.dotnetmafia.com/blogs/dotnettipoftheday/rsscomments.aspx?PostID=5679http://www.dotnetmafia.com/blogs/dotnettipoftheday/archive/2012/04/29/slides-from-my-visual-studio-11-talk-at-sharepoint-saturday-houston.aspx#comments<p>I survived another SharePoint Saturday in Houston this weekend and had a great time.&#160; It was fun seeing old friends and making some new ones as well.&#160; As promised, here is a link to my slide deck posted on SlideShare.&#160; Thanks again to <a href="http://twitter.com/victor_chat">Victor</a> and all of the volunteers and sponsors who made it possible.</p> <p><a href="http://www.slideshare.net/CoreyRoth/new-sharepoint-development-features-using-visual-studio-11-san-antonio-sharepoint-users-group-2012">New SharePoint Development features with Visual Studio 11</a></p><img src="http://www.dotnetmafia.com/aggbug.aspx?PostID=5679" width="1" height="1">SharePointPresentationsSharePoint 2010SharePoint SaturdayVisual Studio 11