Posts Tagged “Dialog”

It is relatively painful to deal with tabs, accordion, or carousel component. Especially when we want to enhance content author experience. Here’s a use case to illustrate to you what I meant: We need to build a tabs component. We want author to manage tabs’ content on the page (not via child page or a separate page). We want author to drag and drop any component into any tab’s content they wish. Bug The screenshots...

This article will shows you how to: one write ExtJS plugin and calls it in CQ dialog and two generating rootPath with ExtJS plugin. We know that with xtype pathfield, we can set rootPath value to any location we want. The drawback is that it is static. If we set rootPath to /content, we fall into providing “no so good author experience” as content author needs to click through pages list to get to the...

I'm working on a front-end project with some relatively complex UI requirements for author dialog. The author UI requires field dependency. A set of fields is shown or hidden based on a certain selection author makes. After getting a working codes finalized, I thought that it is worth sharing with the community. Sample use case for field dependency: As a content author, I would like to be able to build a grid of maximum 12...

One of the most under-appreciated features of AEM components, in my opinion, is the cq:EditConfig. This node allows developers to configure how a component is edited, add or remove functionality from the editor and generally tailor the authoring experience for component. The cq:EditConfig is simply a node with the primary type `cq:EditConfig` and the name cq:editConfig under the component root. The cq:EditConfig allows for configuring many important features of the component's editing experience including: *...

Figuring out what is the current authoring mode in components in Adobe CQ can sometimes be a tricky prospect.  Determining the current authoring mode is important for component development when you may want to display different HTML or controls to authors than will be displayed to the end users.  As a best practice, the same interface should display in Author and Design mode, as hiding or showing components may affect design.The most obvious solution is...

How can you improve on the humble TextImage component; the basis for most Adobe CQ5 website implementations?  This component (as one would imagine from the name) allows authors to put both text and an image on the page.  There are both Text and Image components which are suited for each separate task, however it has always seemed silly to me to have two components when one can do both jobs.Well, one of the first tasks...

Creating widgets with Public Events and other widget JavaScript functionality allows for the creation of extremely powerful and user friendly dialogs.  Unfortunately, it can be difficult and frustrating to figure out what is the cause when the functions fail to work.Often, Public Events won't fire and there will be no indication in the console or errors as to why.  Here are some tips which may make it easier to figure out why your Public Event...

So I needed to create a selection list of all the US states, as a dialog control and also as a selection list in my components JSP.So rather than hard code values in my dialog or as html <option> values, I thought it would be cleaner to use a JSON array of US state objects.I found a JSON list of US states on the web, and I modifed it to have the following structure[   {text:"Alabama",...

Most of time when I build a component I only require a single image so the dialog I build will look something like this<jcr:root xmlns:cq="http://www.day.com/jcr/cq/1.0" xmlns:jcr="http://www.jcp.org/jcr/1.0" xmlns:nt="http://www.jcp.org/jcr/nt/1.0"    jcr:primaryType="cq:TabPanel"    activeTab="{Long}0"    helpPath="en/cq/current/wcm/default_components.html#Text Image"    xtype="tabpanel">    <items jcr:primaryType="cq:WidgetCollection">        <tab1            jcr:primaryType="cq:Widget"            ddGroups="[media]"            fileNameParameter="/fileName"            fileReferenceParameter="/fileReference"            name="/file"            requestSuffix=".img.png"            sizeLimit="100"            title="Image"            xtype="html5smartimage">        </tab1>        <tab2            jcr:primaryType="cq:Widget"            title="Advanced Image Properties"   ...

When constructing a dialog, you may want to present users with a list of pages to select from.  Browse and path fields work well for selecting from a tree, but often you may need to show just the pages from a single folder or from some discrete list.Using the optionsProviderOne way to do this is to create a selection field and populate the value through a JavaScript function in the optionsProvider field.  This field is...