{"id":715,"date":"2014-01-16T17:36:40","date_gmt":"2014-01-16T17:36:40","guid":{"rendered":"http:\/\/www.myfatblog.co.uk\/?p=715"},"modified":"2014-01-16T17:41:45","modified_gmt":"2014-01-16T17:41:45","slug":"using-fiddler-develop-sharepoint-2013-display-templates-locally","status":"publish","type":"post","link":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/","title":{"rendered":"Using Fiddler to develop SharePoint 2013 Display Templates locally"},"content":{"rendered":"

One of the more powerful features of Fiddler is the ability to intercept a call to the server and replace the response with a response of its own. This becomes a very powerful tool especially when you have existing display templates that you wish to edit, without affecting the live service. This becomes especially handy when working with office 365 and you don\u2019t have a development tenancy.<\/p>\n

To do this, you first need a local copy of the display template that you wish to edit. Either download a copy from the server or copy it from SharePoint Designer and save it locally on your PC that will be running Fiddler.<\/p>\n

Now run a fiddler trace of the page that we want to play around with and look for the entry that corresponds to your Display Template.<\/p>\n

\"SNAGHTML1fe0fa3\"<\/a><\/p>\n

With that session selected, click on the AutoResponder heading in the right hand pane and select Add Rule. This will add an EXACT match rule which we need to edit.<\/p>\n

\"SNAGHTML1fdc3e4\"<\/a><\/p>\n

Select the rule and look at the Rule Editor at the bottom of the pane. Remove the EXACT: from the start and everything after the ? at the end.. (including the question mark)<\/p>\n

In the \u201cLocal file to return or Action to execute\u201d box, select the drop down and choose \u201cFind a file\u201d. Browse to where you saved the local file and choose Open.<\/p>\n

Finally, at the top of the pane, select \u201cEnable Automatic responses\u201d and ensure \u201cUnmatched responses passthrough\u201d is also ticked. The header should turn green for this tab.<\/p>\n

\"SNAGHTML1feba63\"<\/a><\/p>\n

The next time the page is loaded, Fiddler intercepts the request and responds locally, rather than sending the request to the server.<\/p>\n

We can now edit this Display Template on our local machine against the live data and live site with no risk to the existing template or users. (Note: That\u2019s assuming you\u2019re only using the display template for display.. if you\u2019re doing anything that causes write backs via REST or Ajax, then be careful!)<\/em><\/p>\n

The server display template in this example, just colours the temperatures red when they are negative.<\/p>\n

\"image\"<\/a><\/p>\n

If we now open our local copy of the display template in our favourite editor and change this to bright blue text to reflect how cold it is, save the file and then refresh the page.<\/p>\n

\"image\"<\/a><\/p>\n

Existing users will continue to receive the original red text until you decide that you\u2019re happy with the new template and upload it into SharePoint to publish it.<\/p>\n

Note: The same technique can also be used to push the client response towards un-minified versions of the SharePoint javascript libraries. I used this technique heavily while trying to get to the bottom of how Microsoft had created the rendering template system.<\/b><\/p>\n

In the example a<\/b>bove you\u2019ll notice some greyed out options, in these, I was telling fiddler to replace calls to some of the default client rendering JavaScript files to a local copy of the debug versions of the same that I had copied from the server.<\/b><\/p>\n","protected":false},"excerpt":{"rendered":"

One of the more powerful features of Fiddler is the ability to intercept a call to the server and replace the response with a response of its own. This becomes a very powerful tool especially when you have existing display templates that you wish to edit, without affecting the live service. This becomes especially handy … <\/p>\n

Continue reading<\/a><\/p>\n","protected":false},"author":2,"featured_media":719,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"_exactmetrics_sitenote_active":false,"_exactmetrics_sitenote_note":"","_exactmetrics_sitenote_category":0,"footnotes":""},"categories":[96,29,26,104,51,70,103],"tags":[186,100,168],"yoast_head":"\nUsing Fiddler to develop SharePoint 2013 Display Templates locally - Blog of an overweight SharePoint addict<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using Fiddler to develop SharePoint 2013 Display Templates locally - Blog of an overweight SharePoint addict\" \/>\n<meta property=\"og:description\" content=\"One of the more powerful features of Fiddler is the ability to intercept a call to the server and replace the response with a response of its own. This becomes a very powerful tool especially when you have existing display templates that you wish to edit, without affecting the live service. This becomes especially handy … Continue reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog of an overweight SharePoint addict\" \/>\n<meta property=\"article:published_time\" content=\"2014-01-16T17:36:40+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-01-16T17:41:45+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.myfatblog.co.uk\/wp-content\/uploads\/2014\/01\/fiddlercrop.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"248\" \/>\n\t<meta property=\"og:image:height\" content=\"187\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Cimares\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@cimares\" \/>\n<meta name=\"twitter:site\" content=\"@cimares\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Cimares\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/\",\"url\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/\",\"name\":\"Using Fiddler to develop SharePoint 2013 Display Templates locally - Blog of an overweight SharePoint addict\",\"isPartOf\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.myfatblog.co.uk\/wp-content\/uploads\/2014\/01\/fiddlercrop.jpg\",\"datePublished\":\"2014-01-16T17:36:40+00:00\",\"dateModified\":\"2014-01-16T17:41:45+00:00\",\"author\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/55ae8f6885bb5b8390dad001f3da83c6\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/#primaryimage\",\"url\":\"http:\/\/www.myfatblog.co.uk\/wp-content\/uploads\/2014\/01\/fiddlercrop.jpg\",\"contentUrl\":\"http:\/\/www.myfatblog.co.uk\/wp-content\/uploads\/2014\/01\/fiddlercrop.jpg\",\"width\":248,\"height\":187,\"caption\":\"Fiddler autoresponse rules\"},{\"@type\":\"WebSite\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/#website\",\"url\":\"http:\/\/www.myfatblog.co.uk\/\",\"name\":\"Blog of an overweight SharePoint addict\",\"description\":\"The rantings of a (not so) food obsessed IT consultant!\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"http:\/\/www.myfatblog.co.uk\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/55ae8f6885bb5b8390dad001f3da83c6\",\"name\":\"Cimares\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/image\/\",\"url\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/About_D057\/TopOfTheWorld.jpg\",\"contentUrl\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/About_D057\/TopOfTheWorld.jpg\",\"caption\":\"Cimares\"},\"sameAs\":[\"http:\/\/www.myfatblog.co.uk\"],\"url\":\"http:\/\/www.myfatblog.co.uk\/index.php\/author\/reginald\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Using Fiddler to develop SharePoint 2013 Display Templates locally - Blog of an overweight SharePoint addict","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/","og_locale":"en_US","og_type":"article","og_title":"Using Fiddler to develop SharePoint 2013 Display Templates locally - Blog of an overweight SharePoint addict","og_description":"One of the more powerful features of Fiddler is the ability to intercept a call to the server and replace the response with a response of its own. This becomes a very powerful tool especially when you have existing display templates that you wish to edit, without affecting the live service. This becomes especially handy … Continue reading","og_url":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/","og_site_name":"Blog of an overweight SharePoint addict","article_published_time":"2014-01-16T17:36:40+00:00","article_modified_time":"2014-01-16T17:41:45+00:00","og_image":[{"width":248,"height":187,"url":"http:\/\/www.myfatblog.co.uk\/wp-content\/uploads\/2014\/01\/fiddlercrop.jpg","type":"image\/jpeg"}],"author":"Cimares","twitter_card":"summary_large_image","twitter_creator":"@cimares","twitter_site":"@cimares","twitter_misc":{"Written by":"Cimares","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/","url":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/","name":"Using Fiddler to develop SharePoint 2013 Display Templates locally - Blog of an overweight SharePoint addict","isPartOf":{"@id":"http:\/\/www.myfatblog.co.uk\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/#primaryimage"},"image":{"@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/#primaryimage"},"thumbnailUrl":"http:\/\/www.myfatblog.co.uk\/wp-content\/uploads\/2014\/01\/fiddlercrop.jpg","datePublished":"2014-01-16T17:36:40+00:00","dateModified":"2014-01-16T17:41:45+00:00","author":{"@id":"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/55ae8f6885bb5b8390dad001f3da83c6"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/01\/using-fiddler-develop-sharepoint-2013-display-templates-locally\/#primaryimage","url":"http:\/\/www.myfatblog.co.uk\/wp-content\/uploads\/2014\/01\/fiddlercrop.jpg","contentUrl":"http:\/\/www.myfatblog.co.uk\/wp-content\/uploads\/2014\/01\/fiddlercrop.jpg","width":248,"height":187,"caption":"Fiddler autoresponse rules"},{"@type":"WebSite","@id":"http:\/\/www.myfatblog.co.uk\/#website","url":"http:\/\/www.myfatblog.co.uk\/","name":"Blog of an overweight SharePoint addict","description":"The rantings of a (not so) food obsessed IT consultant!","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/www.myfatblog.co.uk\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/55ae8f6885bb5b8390dad001f3da83c6","name":"Cimares","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.myfatblog.co.uk\/#\/schema\/person\/image\/","url":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/About_D057\/TopOfTheWorld.jpg","contentUrl":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/About_D057\/TopOfTheWorld.jpg","caption":"Cimares"},"sameAs":["http:\/\/www.myfatblog.co.uk"],"url":"http:\/\/www.myfatblog.co.uk\/index.php\/author\/reginald\/"}]}},"_links":{"self":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/715"}],"collection":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/comments?post=715"}],"version-history":[{"count":2,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/715\/revisions"}],"predecessor-version":[{"id":717,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/715\/revisions\/717"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/media\/719"}],"wp:attachment":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=715"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/categories?post=715"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/tags?post=715"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}