{"id":7570,"date":"2014-09-25T05:55:10","date_gmt":"2014-09-25T12:55:10","guid":{"rendered":"http:\/\/localhost\/exoblog\/?p=7570"},"modified":"2014-09-25T05:55:10","modified_gmt":"2014-09-25T12:55:10","slug":"injecting-portlets-define-containers-create-new-places-add","status":"publish","type":"post","link":"https:\/\/www.exoplatform.com\/blog\/injecting-portlets-define-containers-create-new-places-add\/","title":{"rendered":"Injecting your portlets: define containers to create new places to add them"},"content":{"rendered":"<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets.jpg\" alt=\"0-Portlets\" width=\"650\" height=\"220\" class=\"aligncenter size-full wp-image-7579\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets.jpg 650w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets-300x102.jpg 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets-500x169.jpg 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets-360x122.jpg 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets-200x68.jpg 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets-100x34.jpg 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/0-Portlets-70x24.jpg 70w\" sizes=\"(max-width: 650px) 100vw, 650px\" \/><\/a><\/p>\n<p>We have seen in the <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/09\/18\/super-easy-guide-inject-portlets-wherever-want\/\">previous<\/a> post that we can easily inject your portlet into predefined places, and we are now going to explain how we can easily add and create new places.<br \/>\n<!--more--><br \/>\nWe have placed several ready-to-use containers in the platform, but you can easily add more!<\/p>\n<p>You will find the new Dynamic Container in your Edit Layout Menu. These containers are included in Dynamic Row and Dynamic Column.<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout.jpg\"><img decoding=\"async\" style=\"float: left;\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout.jpg\" alt=\"1-row-layout\" width=\"200\" class=\"alignleft size-full wp-image-7571\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout.jpg 287w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout-212x300.jpg 212w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout-231x328.jpg 231w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout-166x236.jpg 166w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout-92x131.jpg 92w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout-63x90.jpg 63w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/1-row-layout-21x30.jpg 21w\" sizes=\"(max-width: 287px) 100vw, 287px\" \/><\/a><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout.png\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout.png\" alt=\"2-row-layout\" width=\"198\" height=\"300\" class=\"alignright size-medium wp-image-7572\" style=\"float: left; margin-left:10px;\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout.png 283w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout-198x300.png 198w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout-217x328.png 217w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout-156x236.png 156w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout-87x131.png 87w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout-60x90.png 60w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/2-row-layout-20x30.png 20w\" sizes=\"(max-width: 198px) 100vw, 198px\" \/><\/a><\/p>\n<div style=\"clear: both;\"><\/div>\n<p>When the container is added to your layout, you can configure it by clicking on the edit icon <a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/3-edit.jpg\"><img decoding=\"async\" style=\"border: 0 none; border-radius: 0; box-shadow: none;\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/3-edit.jpg\" alt=\"3-edit\" height=\"16\"\/><\/a> and entering the name you want.<\/p>\n<p><a href=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting.jpg\"><img decoding=\"async\" loading=\"lazy\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting.jpg\" alt=\"4-container-setting\" width=\"516\" height=\"267\" class=\"aligncenter size-medium wp-image-7574\" srcset=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting.jpg 516w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting-300x155.jpg 300w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting-500x259.jpg 500w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting-360x186.jpg 360w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting-200x103.jpg 200w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting-100x52.jpg 100w, https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/09\/4-container-setting-58x30.jpg 58w\" sizes=\"(max-width: 516px) 100vw, 516px\" \/><\/a><\/p>\n<p>The name then is used in your configuration file, as we have seen in the <a href=\"https:\/\/www.exoplatform.com\/blog\/2014\/09\/18\/super-easy-guide-inject-portlets-wherever-want\/\">previous<\/a> post.<\/p>\n<p>You can easily reuse the configuration example we have packaged in our <a href=\"https:\/\/github.com\/exo-samples\/sample-dynamic-container\" target=\"_blank\" rel=\"noopener\">eXo Samples Repository<\/a> and update the target name in the file <a href=\"https:\/\/github.com\/exo-samples\/sample-dynamic-container\/blob\/master\/sample-dynamic-container-webapp\/src\/main\/webapp\/WEB-INF\/conf\/portlet\/dynamic-container-configuration.xml#L41\" target=\"_blank\" rel=\"noopener\">dynamic-container-configuration.xml<\/a>.<\/p>\n<p>Any questions or feedback? eXo Tribe is waiting for you on the <a href=\"https:\/\/community.exoplatform.com\/\" target=\"_blank\" rel=\"noopener\">eXo community website<\/a>!<\/p>\n<p><b><a href=\"https:\/\/community.exoplatform.com\/portal\/dw\/\" target=\"_blank\" rel=\"noopener\">Join the eXo tribe<\/a> by registering for the community and get updates, tutorials, support, and access to the Platform and add-on downloads!<\/b><\/p>\n<p><!--begin adv-events--><\/p>\n<div class=\"adv-events\" style=\"background: #476fad; padding: 30px 20px; color: white; border-radius: 3px;\">\n<div class=\"media\">\n<div class=\"pull-right\"><a href=\"#\"><br \/>\n<img decoding=\"async\" loading=\"lazy\" class=\"size-full wp-image-6587 alignright\" alt=\"make-the-most-out-of-eXo-platform4\" src=\"https:\/\/www.exoplatform.com\/blog\/wp-content\/uploads\/2014\/02\/how-to-make-the-most-of-eXo-platform41.png\" width=\"161\" height=\"85\" \/><br \/>\n<\/a><\/div>\n<div class=\"media-body\">\n<h4 class=\"media-heading\">Make the most out of eXo Platform 4<\/h4>\n<p>Register to the next webinar and get a complete overview of what you can do with eXo Platform 4. <strong><a href=\"https:\/\/www.exoplatform.com\/contact-us\/\">Reserve your seat now!<\/a><\/strong><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p><!--end adv-events--><\/p>\n","protected":false},"excerpt":{"rendered":"We have seen in the previous post that we can easily inject your portlet into predefined places, and we are now going to explain how we can easily add and create new places.","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[699],"tags":[],"lang":"en","translations":{"en":7570},"pll_sync_post":[],"_links":{"self":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/7570"}],"collection":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/comments?post=7570"}],"version-history":[{"count":0,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/posts\/7570\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/media?parent=7570"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/categories?post=7570"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.exoplatform.com\/blog\/wp-json\/wp\/v2\/tags?post=7570"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}