{"id":829,"date":"2014-07-18T17:23:52","date_gmt":"2014-07-18T17:23:52","guid":{"rendered":"http:\/\/www.myfatblog.co.uk\/?p=829"},"modified":"2014-08-10T07:54:50","modified_gmt":"2014-08-10T07:54:50","slug":"jslink-display-templates-external-data","status":"publish","type":"post","link":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/","title":{"rendered":"JSLink Display Templates and External Data"},"content":{"rendered":"

One of the questions raised during my recent session at SUGUK Cambridge, was whether or not JSLink could be used to style External List Data. I certainly couldn\u2019t see a reason why not as the External Data Column allows you to surface data within a standard SharePoint list, but I couldn\u2019t be sure without testing.<\/p>\n

For this scenario, I\u2019ve created a very simple database in the SQL instance connected to my Demo rig. This database contains a table named Factory Sensors, with the following columns:-<\/p>\n

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

This is meant to simulate the type of real-time information you might see in an industrial application, in this case the shelling and roasting of coffee beans on an assembly line. I\u2019ve created two rows in this database to represent the two assembly lines in our factory.<\/p>\n

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

I\u2019ve created a windows login that has read only rights to the database and created an entry in the Secure Store to allow me to connect using a Group ID.<\/p>\n

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

I\u2019ve then used the Secure Store entry to create an external content type that accesses the SQL database to retrieve the data.<\/p>\n

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

[important]I\u2019m not going to go through the steps here to create an external content type in SharePoint Designer as there are lots of blog posts out there that go into some depth about it. Suffice to say, it should only take you about 5 minutes![\/important]<\/p>\n

Once the External Content type is created, we can go and start building out a list to use it. We\u2019ll create a custom list named Coffee Sensors, with just a title field, and a single column based on the External Data<\/em><\/strong> field type.<\/p>\n

Use the External Content type picker to choose your external content type, then choose the Field to be displayed. I\u2019ve chosen the SensorArrayName field from the database and I\u2019ve also selected the other fields to be displayed alongside. This ensures that we can see the actual values from our sensors.<\/p>\n

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

Once you click ok and return to the list, we can create two list items to represent the assembly lines from our scenario. using the BDC Picker to choose the correct database item.<\/p>\n

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

With our two items created, you can now see the additional data pulled through from the database. You\u2019ll also notice that the display names are a concatenation of the first field from the database, and then the secondary field name. This is quite important as you\u2019ll see when we get into the display template itself.<\/p>\n

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

Creating the Display Template<\/h2>\n

The actual display template for this is no different than any of the display templates that you\u2019ve seen me create and demonstrate many times if you\u2019ve been following my blog for sometime (The templates for which are available here\u00a0in SPCSR<\/a>..). The key difference is how SharePoint encodes the column names for those additional fields.<\/p>\n

If we take a look at the context object for one of the items, you can see that the internal field names have been created as encoded versions of their display name.<\/p>\n

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

The name comes from the encoding applied to \u201cSensorArray: RoastingOutput\u201d which thanks to the way that SharePoint encodes internal names means we only have a small portion of the actual identifier to play with. Luckily in this instance that\u2019s enough to not create internal name pain!<\/p>\n

You\u2019ll also notice that there are two of them, with the first one showing a string representation of the display value, and the second displaying an actual value that can be parsed in JavaScript. these can then be used in a simple custom item rendering template to display an entry for each one.<\/p>\n

\n
\r\npfh.CustomItem = function (ctx) {\r\n \u00a0\u00a0\u00a0 var outputString = "<div class='factoryArrayWrapper'><div class='factoryArrayName'>" + ctx.CurrentItem.Title + "<\/div>";\r\n\u00a0\u00a0\u00a0 outputString += "<div class='factorySensor'><span class='factorySensorHeader'>Roasting Output: <\/span><span>"\r\n\u00a0\u00a0\u00a0 outputString += ctx.CurrentItem.SensorArray_x003a__x0020_Roastin +"<\/span><\/div><div id='HCContainerA" + ctx.CurrentItemIdx + "' ><\/div>";\r\n\u00a0\u00a0\u00a0 outputString += "<div class='factorySensor'><span class='factorySensorHeader'>Shelling Output: <\/span><span>"\r\n\u00a0\u00a0\u00a0 outputString += ctx.CurrentItem.SensorArray_x003a__x0020_Shellin +"<\/span><\/div><div id='HCContainerB" + ctx.CurrentItemIdx + "' ><\/div>";\r\n\u00a0\u00a0\u00a0 outputString += "<\/div>";\r\n\u00a0\u00a0\u00a0 return outputString;\r\n}\r\n<\/pre>\n<\/div>\n
Which results in the output shown here with some very basic CSS to style it:-<\/p>\n
\"image\"<\/a><\/p>\n
<\/h2>\n
Next Steps<\/h2>\n
That\u2019s a fairly simple example of using JSLink to style data being brought into SharePoint from an external LOB system. What I\u2019m planning to do in a future post is to use High Charts to then surface this data in the form of a gauge. The idea is to present this data in a much more visually appealing form that can immediately tell a story about the state of the assembly line to someone looking quickly at the screen.<\/p>\n
Paul.<\/p>\n","protected":false},"excerpt":{"rendered":"
One of the questions raised during my recent session at SUGUK Cambridge, was whether or not JSLink could be used to style External List Data. I certainly couldn\u2019t see a reason why not as the External Data Column allows you to surface data within a standard SharePoint list, but I couldn\u2019t be sure without testing. … <\/p>\n
Continue reading<\/a><\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_exactmetrics_skip_tracking":false,"footnotes":""},"categories":[138,89,132,96,104,87,70,103,60,8],"tags":[],"yoast_head":"\nUsing JSLink Display Templates and External Data Columns<\/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\/07\/jslink-display-templates-external-data\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Using JSLink Display Templates and External Data Columns\" \/>\n<meta property=\"og:description\" content=\"One of the questions raised during my recent session at SUGUK Cambridge, was whether or not JSLink could be used to style External List Data. I certainly couldn\u2019t see a reason why not as the External Data Column allows you to surface data within a standard SharePoint list, but I couldn\u2019t be sure without testing. … Continue reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog of an overweight SharePoint addict\" \/>\n<meta property=\"article:published_time\" content=\"2014-07-18T17:23:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2014-08-10T07:54:50+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/JSLink-Display-Templates-and-External-Da_F812\/SNAGHTML1e2ddab_thumb.png\" \/>\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=\"4 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\/07\/jslink-display-templates-external-data\/\",\"url\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/\",\"name\":\"Using JSLink Display Templates and External Data Columns\",\"isPartOf\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/#website\"},\"primaryImageOfPage\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/#primaryimage\"},\"image\":{\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/JSLink-Display-Templates-and-External-Da_F812\/SNAGHTML1e2ddab_thumb.png\",\"datePublished\":\"2014-07-18T17:23:52+00:00\",\"dateModified\":\"2014-08-10T07:54:50+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\/07\/jslink-display-templates-external-data\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/#primaryimage\",\"url\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/JSLink-Display-Templates-and-External-Da_F812\/SNAGHTML1e2ddab_thumb.png\",\"contentUrl\":\"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/JSLink-Display-Templates-and-External-Da_F812\/SNAGHTML1e2ddab_thumb.png\"},{\"@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 JSLink Display Templates and External Data Columns","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\/07\/jslink-display-templates-external-data\/","og_locale":"en_US","og_type":"article","og_title":"Using JSLink Display Templates and External Data Columns","og_description":"One of the questions raised during my recent session at SUGUK Cambridge, was whether or not JSLink could be used to style External List Data. I certainly couldn\u2019t see a reason why not as the External Data Column allows you to surface data within a standard SharePoint list, but I couldn\u2019t be sure without testing. … Continue reading","og_url":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/","og_site_name":"Blog of an overweight SharePoint addict","article_published_time":"2014-07-18T17:23:52+00:00","article_modified_time":"2014-08-10T07:54:50+00:00","og_image":[{"url":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/JSLink-Display-Templates-and-External-Da_F812\/SNAGHTML1e2ddab_thumb.png"}],"author":"Cimares","twitter_card":"summary_large_image","twitter_creator":"@cimares","twitter_site":"@cimares","twitter_misc":{"Written by":"Cimares","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/","url":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/","name":"Using JSLink Display Templates and External Data Columns","isPartOf":{"@id":"http:\/\/www.myfatblog.co.uk\/#website"},"primaryImageOfPage":{"@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/#primaryimage"},"image":{"@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/#primaryimage"},"thumbnailUrl":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/JSLink-Display-Templates-and-External-Da_F812\/SNAGHTML1e2ddab_thumb.png","datePublished":"2014-07-18T17:23:52+00:00","dateModified":"2014-08-10T07:54:50+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\/07\/jslink-display-templates-external-data\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/www.myfatblog.co.uk\/index.php\/2014\/07\/jslink-display-templates-external-data\/#primaryimage","url":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/JSLink-Display-Templates-and-External-Da_F812\/SNAGHTML1e2ddab_thumb.png","contentUrl":"http:\/\/www.myfatblog.co.uk\/images\/BlogImages\/JSLink-Display-Templates-and-External-Da_F812\/SNAGHTML1e2ddab_thumb.png"},{"@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\/829"}],"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=829"}],"version-history":[{"count":5,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/829\/revisions"}],"predecessor-version":[{"id":840,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/posts\/829\/revisions\/840"}],"wp:attachment":[{"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/media?parent=829"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/categories?post=829"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.myfatblog.co.uk\/index.php\/wp-json\/wp\/v2\/tags?post=829"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}