{"id":503,"date":"2018-04-22T12:10:45","date_gmt":"2018-04-22T16:10:45","guid":{"rendered":"http:\/\/salzlechner.com\/dev\/?p=503"},"modified":"2018-04-22T12:10:45","modified_gmt":"2018-04-22T16:10:45","slug":"webapp-custom-controls-web-template-view","status":"publish","type":"post","link":"http:\/\/salzlechner.com\/dev\/2018\/04\/22\/webapp-custom-controls-web-template-view\/","title":{"rendered":"WebApp Custom controls &#8211; Web Template View"},"content":{"rendered":"<p>The template view is another control we used to have in desktop applications. What it allows us to do is to create different visual designs for the same display and change the visual display of the data without having to change or recompile the application<\/p>\n<p>Also the data can be dynamically changed as well of course<\/p>\n<p>As an example we created a simple view that has data for business cards and shows the data in 3 different templates<\/p>\n<p>the code for the template object is very simple as follows<\/p>\n<pre class=\"lang:default decode:true \">\/\/\r\n\r\nObject oTemplate1 is a cszWebTemplateTest\r\n    \/\/ set default template\r\n    Set psTemplateFilePath to \"template1.html\"\r\n           \r\nEnd_Object<\/pre>\n<p>as you can see there is not much to it. The template object is declared and we assign a default template. The template can be\u00a0created either from a file available on the web server or we can also assign the template via code from a string. The template is a simple HTML template<\/p>\n<p>We also need to supply data to the control. Data is supplied via json objects as follows<\/p>\n<pre class=\"lang:default decode:true \">\/\/\r\n\r\nSend SendData '{ \"lastname\": \"Salzlechner\", \"firstname\": \"Michael\", \"title\": \"CEO\", \"company\": \"StarZen Technologies\", \"address\": \"3340 SE Federal Hwy\", \"City\": \"Stuart\", \"avatar\": \"img_avatar_m.png\"}'<\/pre>\n<p>this sends a simple json object to the client. The data field names can be whatever the developer would like to use. The template then refers to the field names.<\/p>\n<p>running our sample application we get the following display<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-504\" src=\"http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/template1.png\" alt=\"template1\" width=\"695\" height=\"331\" srcset=\"http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/template1.png 695w, http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/template1-300x143.png 300w\" sizes=\"(max-width: 695px) 100vw, 695px\" \/><\/p>\n<p>the first template simply shows the data in rows with labels<\/p>\n<p>The following animation shows how to switch between different templates as well as load different data into the control<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-505\" src=\"http:\/\/salzlechner.com\/dev\/wp-content\/uploads\/sites\/2\/2018\/04\/template.gif\" alt=\"template\" width=\"694\" height=\"748\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The template view is another control we used to have in desktop applications. What it allows us to do is to create different visual designs for the same display and change the visual display of the data without having to change or recompile the application Also the data can be dynamically changed as well of [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","ngg_post_thumbnail":0,"footnotes":""},"categories":[6,27],"tags":[],"class_list":["post-503","post","type-post","status-publish","format-standard","hentry","category-dataflex","category-dataflex-webapp"],"_links":{"self":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/503","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/comments?post=503"}],"version-history":[{"count":1,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/503\/revisions"}],"predecessor-version":[{"id":506,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/posts\/503\/revisions\/506"}],"wp:attachment":[{"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/media?parent=503"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/categories?post=503"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/salzlechner.com\/dev\/wp-json\/wp\/v2\/tags?post=503"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}