{"id":616,"date":"2017-09-27T19:51:47","date_gmt":"2017-09-27T17:51:47","guid":{"rendered":"http:\/\/h2916922.stratoserver.net:8084\/?p=616"},"modified":"2017-11-01T11:25:59","modified_gmt":"2017-11-01T10:25:59","slug":"wiring-tab-layout-events-freeform-design-icm-5-3","status":"publish","type":"post","link":"https:\/\/www.ivojonker.nl\/?p=616","title":{"rendered":"Wiring tab-layout open\/close\/.. events (freeform design ICM 5.3)"},"content":{"rendered":"<p>Case Manager 5.3. introduced the free-form page-layout, a feature two of my clients have been longing to for a long time. In fact, one of my clients had their own tab-container implementation written almost two years ago.<\/p>\n<p>Anyway, while the free-form page-layout and newly introduced tab-container are one of the most cheered-at new features, it turned out both clients had a set of custom widgets that needed manual refreshing, preferably when the corresponding tab was clicked (the tab was re-opened if you will).<\/p>\n<p>In order to achieve this, i created a &#8216;adapter widget&#8217; that can be placed within a tab to detect the following events:<\/p>\n<ul>\n<li>The tab was opened,<\/li>\n<li>The tab was closed,<\/li>\n<li>The tab same tab was opened again (refreshed)<\/li>\n<li>The tab was created.<\/li>\n<\/ul>\n<p><a href=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapter.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-618\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapter.png\" alt=\"\" width=\"725\" height=\"188\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapter.png 725w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapter-300x78.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapter-400x104.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapter-430x112.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapter-150x39.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapter-100x26.png 100w\" sizes=\"auto, (max-width: 725px) 100vw, 725px\" \/><\/a><\/p>\n<p>The events then can be wired to other widgets \/ script adapters.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-large wp-image-619\" src=\"http:\/\/h2916922.stratoserver.net:8084\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires.png\" alt=\"\" width=\"937\" height=\"252\" srcset=\"https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires.png 937w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires-300x81.png 300w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires-768x207.png 768w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires-750x202.png 750w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires-400x108.png 400w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires-430x116.png 430w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires-150x40.png 150w, https:\/\/www.ivojonker.nl\/wp-content\/uploads\/2017\/10\/FreeFormTabContainerEventAdapterWires-100x27.png 100w\" sizes=\"auto, (max-width: 937px) 100vw, 937px\" \/><\/p>\n<p>This adapter both works for the new freeform layout tab&#8217;s, as well as the page-tabs.<\/p>\n<p>&nbsp;<\/p>\n<p>You can download the pre-compiled widget-package <a href=\"http:\/\/h2916922.stratoserver.net:8084\/ivo\/wp-attachments\/FreeFormTabContainerEventAdapter-widgetpackage.zip\">here<\/a>. The source can be downloaded <a href=\"http:\/\/h2916922.stratoserver.net:8084\/ivo\/wp-attachments\/Free Form Tab Container Event Adapter-source.zip\">here<\/a>. All under MIT license.<\/p>\n<p>Widget package tested under 5.2 (for use in page-tabs), 5.3 and 5.3.1.<\/p>\n<p>&nbsp;<\/p>\n<p>Related post:\u00a0<a href=\"http:\/\/h2916922.stratoserver.net:8084\/?p=528\">Adding new functionality to the CaseBuilder<\/a> <a href=\"http:\/\/h2916922.stratoserver.net:8084\/?p=525\">Advanced lay-outing with the page designer<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Case Manager 5.3. introduced the free-form page-layout, a feature two of my clients have been longing to for a long time. In fact, one of my clients had their own [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-616","post","type-post","status-publish","format-standard","hentry","category-geen-categorie"],"_links":{"self":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/616","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=616"}],"version-history":[{"count":7,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/616\/revisions"}],"predecessor-version":[{"id":632,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=\/wp\/v2\/posts\/616\/revisions\/632"}],"wp:attachment":[{"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=616"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=616"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.ivojonker.nl\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=616"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}