{"id":30,"date":"2014-11-13T05:58:00","date_gmt":"2014-11-13T05:58:00","guid":{"rendered":"https:\/\/scgindia.in\/lhotsetechnologies\/dev\/2014\/11\/13\/configuration-bar-in-aem\/"},"modified":"2019-09-19T13:11:59","modified_gmt":"2019-09-19T13:11:59","slug":"configuration-bar-in-aem","status":"publish","type":"post","link":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/","title":{"rendered":"Configuration Bar in AEM"},"content":{"rendered":"<div dir=\"ltr\" style=\"text-align: left;\">\n<div style=\"text-align: justify;\"><span style=\"color: #274e13;\">During my project, I got a task in which I have to create a Configuration Edit bar in publish mode for setting some of the particular publish instance level properties. In this post I will explain the approach I used to complete this task.<\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><b><span style=\"color: #660000;\">Agenda\u00a0<\/span><\/b><br \/>\n<span style=\"color: #274e13;\"><i><b>1). How to create Configuration Edit bar using cq:EditConfig node?<\/b><\/i><\/span><br \/>\n<b><i style=\"color: #274e13;\">2).\u00a0<\/i><span style=\"color: #274e13;\"><i>How to create Configuration Edit bar using Ext-JS node?<\/i><\/span><\/b><br \/>\n<b><i style=\"color: #274e13;\">3).\u00a0<\/i><span style=\"color: #274e13;\"><i>Difference between cq:EditConfig vs Ext-JS configuration Edit bar?<\/i><\/span><\/b><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><a style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\" href=\"https:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png\"><span style=\"color: #274e13;\"><img decoding=\"async\" src=\"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png\" border=\"0\" \/><\/span><\/a><b><i><span style=\"color: #660000;\">Approach &#8211; I : <\/span><\/i><\/b><span style=\"color: #274e13;\">\u00a0<\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\">I will show you how to create configuration tab using cq:EditConfig node.\u00a0<\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\">For doing first I create a project structure as shown in fig. &#8211;<\/span><span style=\"color: #274e13;\">\u00a0<\/span><br \/>\n<span style=\"color: #274e13;\">Then, I have created a component named as &#8211;<\/span><br \/>\n<span style=\"color: #274e13;\"><b><i>componentWithEditBar<\/i><\/b>.<\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"text-align: left;\"><span style=\"color: #274e13;\">Then I create a node of <b><i>primaryType cq:EditConfig<\/i><\/b> with a name<b><i> cq:editConfig<\/i><\/b> under <b><i>componentWithEditBar<\/i><\/b> node as displayed in image.<\/span><\/span><\/div>\n<div>\n<div><span style=\"color: #274e13;\"><br \/>\n<\/span><b><i><span style=\"color: #660000;\">Note : <\/span><span style=\"color: #274e13;\">Name of this node must be cq:editConfig<\/span><\/i><\/b><\/p>\n<p><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\">Also <b>add \u00a0properties on cq:editConfig node <\/b>as shown in figure &#8211;\u00a0<\/span><\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-xlqwXEH0c3o\/VGQ7TkNYSEI\/AAAAAAAAA4U\/Hnlq4aimm6A\/s1600\/image2.2.png\"><span style=\"color: #274e13;\"><img decoding=\"async\" src=\"http:\/\/2.bp.blogspot.com\/-xlqwXEH0c3o\/VGQ7TkNYSEI\/AAAAAAAAA4U\/Hnlq4aimm6A\/s1600\/image2.2.png\" border=\"0\" \/><\/span><\/a><\/div>\n<p><span style=\"color: #274e13;\">\u00a0<\/span><\/p>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<div style=\"clear: both; text-align: center;\"><\/div>\n<p><span style=\"color: #274e13;\">Now when you drop this component on your web page you will see a configuration bar for this component in author mode. your screen will be look like this &#8211;\u00a0<\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><\/p>\n<\/div>\n<div>\n<div style=\"clear: both; text-align: center;\"><a style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\" href=\"https:\/\/2.bp.blogspot.com\/-1PAm88DVJDY\/VGQ7y9TF82I\/AAAAAAAAA4c\/8c6NPFYY3Uk\/s1600\/image3.3.png\"><span style=\"color: #274e13;\"><img fetchpriority=\"high\" decoding=\"async\" src=\"http:\/\/2.bp.blogspot.com\/-1PAm88DVJDY\/VGQ7y9TF82I\/AAAAAAAAA4c\/8c6NPFYY3Uk\/s640\/image3.3.png\" width=\"640\" height=\"262\" border=\"0\" \/><\/span><\/a><\/div>\n<p><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><b><i><span style=\"color: #660000;\">Approach &#8211; II :<\/span><\/i><\/b><br \/>\n<span style=\"color: #274e13;\"><b><i>How to create this configuration bar using Ext-Js code?<\/i><\/b><\/span><br \/>\n<span style=\"color: #274e13;\">For doing this I have created a new component named as <b>componentWithEditBarUsingExtJs<\/b>.<\/span><br \/>\n<span style=\"color: #274e13;\">in it&#8217;s jsp file I add the given JS code &#8211;\u00a0<\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #660000; font-size: 14px;\"><i>&lt;%@include file=&#8221;\/libs\/foundation\/global.jsp&#8221;%&gt;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>&lt;%@page session=&#8221;false&#8221; %&gt;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>&lt;%<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 String path= resource.getPath();<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 String resourceType= resource.getResourceType();<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 String dialogPath = resource.getResourceResolver().getResource(resourceType).getPath() + &#8220;\/dialog&#8221;;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>%&gt;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>&lt;script type=&#8221;text\/javascript&#8221;&gt;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 CQ.WCM.edit({<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;path&#8221;:&#8221;&lt;%= path %&gt;&#8221;,<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;dialog&#8221;:&#8221;&lt;%= dialogPath %&gt;&#8221;,<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;type&#8221;:&#8221;&lt;%= resourceType %&gt;&#8221;,<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;editConfig&#8221;:{<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;xtype&#8221;:&#8221;editbar&#8221;,<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;listeners&#8221;:{<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;afteredit&#8221;:&#8221;REFRESH_PAGE&#8221;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;inlineEditing&#8221;:CQ.wcm.EditBase.INLINE_MODE_NEVER,<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;disableTargeting&#8221;: true,<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;actions&#8221;:[<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 CQ.I18n.getMessage(&#8220;Configuration Tab Using Ext-JS&#8221;),<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;xtype&#8221;: &#8220;tbseparator&#8221;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 CQ.wcm.EditBase.EDIT,<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 {<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 &#8220;xtype&#8221;: &#8220;tbseparator&#8221;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 },<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 CQ.wcm.EditBase.DELETE<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i><br \/>\n]<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 \u00a0 \u00a0 }<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 });<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>\u00a0 \u00a0 \u00a0 \u00a0 &lt;\/script&gt;\u00a0<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>&lt;br\/&gt;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>&lt;h3&gt;Example for showing component with a configuration edit bar using Ext Js.&lt;\/h3&gt;<\/i><\/span><br \/>\n<span style=\"color: #660000; font-size: 14px;\"><i>&lt;br\/&gt;&lt;br\/&gt;<\/i><\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\">Now when you drop this component you will see a screen like this &#8211;\u00a0<\/span><\/p>\n<div style=\"clear: both; text-align: center;\"><a style=\"clear: left; float: left; margin-bottom: 1em; margin-right: 1em;\" href=\"https:\/\/3.bp.blogspot.com\/-cGF0vO_Uc_c\/VGRA6EC3A9I\/AAAAAAAAA4s\/CJJluB5Ej1I\/s1600\/image4.4.png\"><span style=\"color: #274e13;\"><img decoding=\"async\" src=\"http:\/\/3.bp.blogspot.com\/-cGF0vO_Uc_c\/VGRA6EC3A9I\/AAAAAAAAA4s\/CJJluB5Ej1I\/s640\/image4.4.png\" width=\"640\" height=\"236\" border=\"0\" \/><\/span><\/a><\/div>\n<p><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><br \/>\n<\/span><b><span style=\"color: #660000;\"><i>Difference between these two approaches :\u00a0<\/i><\/span><\/b><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><b><i>When you want that your configuration bar is visible only in Author mode, use first approach.<\/i><\/b><\/span><br \/>\n<span style=\"color: #274e13;\">Using first approach this configuration bar is visible in Author mode only and when you publish your code then it will be disappeared. Maximum time we have this type of requirement so generally we go with first approach.<\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\">But I got a task in which I am integrating AEM with Salesforce &amp; we have to set some setting which are dependent on each publisher. This is a very specific requirement for achieving this when I go with approach one then my configuration bar has been disappeared then I start my R &amp; D for achieving this goal &amp; then I found this second approach using this approach I got the same functionality as I achieve using first approach.<\/span><br \/>\n<span style=\"color: #274e13;\"><br \/>\n<\/span><span style=\"color: #274e13;\"><b><i>The only difference is when I follow second approach my configuration bar is visible in author as well as in publish mode &amp; works for me.<\/i><\/b><\/span><br \/>\n<span style=\"color: #274e13;\"><b><i><br \/>\n<\/i><\/b><\/span><b style=\"background-color: #eefff0; font-family: 'Times New Roman', Times, FreeSerif, serif; font-size: 15px; line-height: 21.559999465942383px; text-align: justify;\"><span style=\"color: #660000;\">github repository link<\/span><\/b><br \/>\n<span style=\"color: #274e13;\"><b><i><a href=\"https:\/\/github.com\/vietankur009\/workflow.git\">https:\/\/github.com\/vietankur009\/blog.git<\/a><\/i><\/b><\/span><br \/>\n<\/b><\/p>\n<\/div>\n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<p><strong>Happy Coding<\/strong><br \/>\n<strong>Namah Shivay<\/strong><\/p>\n","protected":false},"excerpt":{"rendered":"<p>During my project, I got a task in which I have to create a Configuration Edit bar in publish mode [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[2,107,106,108,33,82],"tags":[],"class_list":["post-30","post","type-post","status-publish","format-standard","hentry","category-aem","category-configuraiton-bar-in-publish-cq5","category-configuration-bar-in-aem","category-configuration-bar-using-ext-js-in-aem","category-cq","category-cq5"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Configuration Bar in AEM - AEM Blog | Lhotse Technologies<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Configuration Bar in AEM - AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"og:description\" content=\"During my project, I got a task in which I have to create a Configuration Edit bar in publish mode [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/\" \/>\n<meta property=\"og:site_name\" content=\"AEM Blog | Lhotse Technologies\" \/>\n<meta property=\"article:published_time\" content=\"2014-11-13T05:58:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2019-09-19T13:11:59+00:00\" \/>\n<meta property=\"og:image\" content=\"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png\" \/>\n<meta name=\"author\" content=\"Team Lhotse\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Team Lhotse\" \/>\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\":\"Article\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/\"},\"author\":{\"name\":\"Team Lhotse\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d\"},\"headline\":\"Configuration Bar in AEM\",\"datePublished\":\"2014-11-13T05:58:00+00:00\",\"dateModified\":\"2019-09-19T13:11:59+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/\"},\"wordCount\":536,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png\",\"articleSection\":[\"AEM\",\"Configuraiton bar in publish cq5\",\"Configuration Bar in AEM\",\"configuration bar using Ext -js in aem\",\"CQ\",\"CQ5\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/\",\"name\":\"Configuration Bar in AEM - AEM Blog | Lhotse Technologies\",\"isPartOf\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png\",\"datePublished\":\"2014-11-13T05:58:00+00:00\",\"dateModified\":\"2019-09-19T13:11:59+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#primaryimage\",\"url\":\"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png\",\"contentUrl\":\"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/lhotsetechnologies.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Configuration Bar in AEM\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#website\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"name\":\"AEM Blog | Lhotse Technologies\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#organization\",\"name\":\"AEM Blog | Lhotse Technologies\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"contentUrl\":\"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png\",\"width\":539,\"height\":172,\"caption\":\"AEM Blog | Lhotse Technologies\"},\"image\":{\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d\",\"name\":\"Team Lhotse\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g\",\"caption\":\"Team Lhotse\"},\"url\":\"https:\/\/lhotsetechnologies.com\/blog\/author\/team-lhotse\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Configuration Bar in AEM - AEM Blog | Lhotse Technologies","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":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/","og_locale":"en_US","og_type":"article","og_title":"Configuration Bar in AEM - AEM Blog | Lhotse Technologies","og_description":"During my project, I got a task in which I have to create a Configuration Edit bar in publish mode [&hellip;]","og_url":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/","og_site_name":"AEM Blog | Lhotse Technologies","article_published_time":"2014-11-13T05:58:00+00:00","article_modified_time":"2019-09-19T13:11:59+00:00","og_image":[{"url":"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png","type":"","width":"","height":""}],"author":"Team Lhotse","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Team Lhotse","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#article","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/"},"author":{"name":"Team Lhotse","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d"},"headline":"Configuration Bar in AEM","datePublished":"2014-11-13T05:58:00+00:00","dateModified":"2019-09-19T13:11:59+00:00","mainEntityOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/"},"wordCount":536,"commentCount":0,"publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#primaryimage"},"thumbnailUrl":"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png","articleSection":["AEM","Configuraiton bar in publish cq5","Configuration Bar in AEM","configuration bar using Ext -js in aem","CQ","CQ5"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/","url":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/","name":"Configuration Bar in AEM - AEM Blog | Lhotse Technologies","isPartOf":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#primaryimage"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#primaryimage"},"thumbnailUrl":"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png","datePublished":"2014-11-13T05:58:00+00:00","dateModified":"2019-09-19T13:11:59+00:00","breadcrumb":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#primaryimage","url":"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png","contentUrl":"http:\/\/1.bp.blogspot.com\/-QZSBA-mOrp0\/VGQ6lYys6CI\/AAAAAAAAA4M\/jiFoKidVI1Y\/s1600\/image1.1.png"},{"@type":"BreadcrumbList","@id":"https:\/\/lhotsetechnologies.com\/blog\/configuration-bar-in-aem\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/lhotsetechnologies.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Configuration Bar in AEM"}]},{"@type":"WebSite","@id":"https:\/\/lhotsetechnologies.com\/blog\/#website","url":"https:\/\/lhotsetechnologies.com\/blog\/","name":"AEM Blog | Lhotse Technologies","description":"","publisher":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/lhotsetechnologies.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/lhotsetechnologies.com\/blog\/#organization","name":"AEM Blog | Lhotse Technologies","url":"https:\/\/lhotsetechnologies.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","contentUrl":"https:\/\/lhotsetechnologies.com\/blog\/wp-content\/uploads\/2019\/07\/lhotse-logo.png","width":539,"height":172,"caption":"AEM Blog | Lhotse Technologies"},"image":{"@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/fd7bee89b050d7c7195fc75b681b053d","name":"Team Lhotse","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/lhotsetechnologies.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/?s=96&d=mm&r=g","caption":"Team Lhotse"},"url":"https:\/\/lhotsetechnologies.com\/blog\/author\/team-lhotse\/"}]}},"_links":{"self":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/30","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/comments?post=30"}],"version-history":[{"count":2,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions"}],"predecessor-version":[{"id":569,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/posts\/30\/revisions\/569"}],"wp:attachment":[{"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/media?parent=30"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/categories?post=30"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/lhotsetechnologies.com\/blog\/wp-json\/wp\/v2\/tags?post=30"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}