Custom Multifield and Image in single dialog

[NitroHazeDev]

Hello,

Is it possible to have multiple image with drop targets in multifield in a single dialog? Has anyone implemented this? It seems to be possible to have textfield/textarea in the custom multifield js that i have currently implemented, but i am not able to load an image.

Regards,

NZ

[smacdonald2008]

I will put that as a priority. I have noticed that there are other questions around this workflow as well.

[smacdonald2008]

I would think there is no reason why this would not work if the logic was implemented properly. We will log this request and get a step by step article created that will show how this can be done. In the mean time -- read this topic of the AEM docs:

http://dev.day.com/docs/en/cq/current/developing/widgets.html

[smacdonald2008]

Here is some input from one of the CQ developers:
 

I am quite sure that the smartimage widget is not compatible with the multifield, since it stores multiple properties and also possible a child node ("file" if you upload an image), whereas the multifield is strictly an array (multi-value property) only.

[smacdonald2008 · Accepted solution]

See the article - it covered this use case: 

http://helpx.adobe.com/experience-manager/using/creating-aem-multifield-components.html

[smacdonald2008]

By the way -- in the AEM docs -- it recommends that you install a package -see below.

Have you installed this package and looked at all the existing samples to see how they work and how you can extend them? 

GETTING STARTED WITH THE SAMPLES

To follow the tutorials on this page, install the package called Using ExtJS Widgets in a local AEM instance and create a sample page in which the components will be included. To do so:

1. In your AEM instance download the package called Using ExtJS Widgets (v01) from Package Share and install the package. It creates the project extjstraining below /apps in the repository.
2. Include the client library containing the scripts (js)  and the stylesheet (css) in the head tag of the geometrixx page jsp, as you will include the sample components in a new page of the Geometrixx branch:
   in CRXDE Lite open the file /apps/geometrixx/components/page/headlibs.jsp and add thecq.extjstraining category to the existing <cq:includeClientLib> tag as follows:
   %><cq:includeClientLib categories="apps.geometrixx-main, cq.extjstraining"/><%
3. Create a new page in the Geometrixx branch below /content/geometrixx/en/products and call it Using ExtJS Widgets.
4. Go in design mode and add all the components of the group called Using ExtJS Widgets to the design of Geometrixx
5. Go back in edit mode: the components of the group Using ExtJS Widgets are available in the Sidekick.
   
    

[NitroHazeDev]

Thanks for help. Well i did go through the training stuff but don't seem to find an example that talks of having image as part of multifield in a single dialog. Please correct  me if i have missed something.

Regards,

[NitroHazeDev]

I see http://dev.day.com/docs/en/cq/5-4/widgets-api/index.html?class=CQ.form.SmartImage, where it has been mentioned that "the component is mainly designed for use on a separate dialog tab". Wonder if it is ever possible to have it in a single tab image multifield widget 

[NitroHazeDev]

Will be looking forward to reading it. Thanks a lot.

[NitroHazeDev]

Hello,

Was wondering if any updates to the same topic? Was looking for some help.

Thanks in advance,

NZ

[smacdonald2008]

I will ensure that the product team responds to this thread today. 

[smacdonald2008]

Yeah  -- i have installed this package and I am digging through this too. I see what you mean here:

[img]Multifield.png[/img]

It looks like for you use case -- we will have to modify the multifield to include image functionality. I am seeing if someone within Adobe has an example of this or has done this as its not part of the documented examples.

Here is a Stackoverflow thread that may help here too:

http://stackoverflow.com/questions/16060295/adobe-cq-5-5-dialog-box-with-drag-drop-images-functional...

[NitroHazeDev]

Yeah, was looking for an ability to have a title and a drop target area for dragging an image on click of "+" for a multifield. I tried adding an image node but in vain. I could do it for other xtypes but not smartimage.

[smacdonald2008]

I am going to put together a community article that talks about how to develop a CQ Component that can be dropped into a paragraph system and displays an image, rich text, and the path of a page in the system. The image must be editable by a content author and can be dragged-and-dropped from the Content Finder. The rich text must be editable by a content author, must allow for tables to be created and must have a default text that can be changed. It will use a Dialog Widget, (xtype of smartimage). Must be configured in the component's cq:editConfig to allow for dragging and-dropping of images from the Content Finder.

[NitroHazeDev]

That's great but wondering if we are on the same page and if it had the ability to drag drop multiple images and associate text for each image. Now this is for the custom carousel component that i was working on. I initially used the multifield xtype, customized, wherein, i have a path field with magnifier icon to select the image from the dam, a text xtype for the image title, and a textarea xtype for image description, on click of "+" icon i have another pathfield for Carousel image2, text xtype for image2 title and textarea xtype for image2 description, all appearing in a single tab in a dialog,. Now my concern was to replace the pathfield(magnifier icon) with a drop target smartimage xtype, and thus bon click of "+" we have a combination of smartimage xtype, text xtype and textarea xtype. The reason this is required is cause, one would like to have a droptarget area, to drag drop images from dam rather a pathfield, wherein the user would have to know the name of the image pre-hand without the ability to view it .

I tried implementing this in another way, i.e, a custom image component with multiple image tabs but for that the concerns were

1. knowledge of extjs, to add a tab dynamically , say on click of "+", (+ being displayed to the right of image1, image2 tab). I couldn't handle the dynamic tab creation

i managed to add two image tabs though and could render successfully , but the image tabs would have to be fixed unless i add functionality to create tabs on the fly

2. Have title and text along with the image droptarget area on a single tab dialog , so that user drags drops the image, enters title text all in one tab for image1 of the carousel.

Please let me know if we are on the same page.

[smacdonald2008]

It sounds like the KB will address some of your requirements -- however - i passed this onto the AEM Product team. I am hoping to hear what they have to say.

[Former Community Member]

smacdonald2008

 Hi smacdonald,

I initially used the multifield xtype, customized, wherein, i have a path field with magnifier icon to select the image from the dam.

As per requirement, my concern was  to replace the pathfield(magnifier icon) with a drop target smartimage xtype.

could give me solution how to acheive this?

            this.file = new CQ.html5.form.SmartFile({
                cls: "HCW-QuickFact-6",                
                fieldLabel : "Picture Link: ",
                            editable:false,
                            allowBlank : false,
                            anchor: '75%',
                            maxLength : 100,
                            cropParameter :"./image/imageCrop",
                            ddGroups : "media",
                            fileNameParameter : "./image/fileName",
                            fileReferenceParameter : "./image/fileReference",
                            mapParameter :"./image/imageMap",
                            rotateParameter : "./image/imageRotate",
                            name : "./image/file",
                            requestSuffix : "/image.img.png",
                            sizeLimit : "100",
                            autoUploadDelay : "1",
                            xtype: "html5smartimage",
                            listeners : {
                                change : {
                                    scope : this,
                                    fn : this.updateHidden
                                },

                                dialogclose : {
                                    scope : this,
                                    fn : this.updateHidden
                                }

                            }

                        });
            this.add(this.file);

I am unable to drag and drop image from content finder.

[NitroHazeDev]

Thank you, appreciate your kind help.

[smacdonald2008]

For this use case -- there are many nodes and properties that you have to set. Especially to hook into the Content Finder and support image drag and drop. I have created a KB article that walks you through how to create a CQ widget that uses a Dialog with tabs, hooks into the Content Finder, supports drag and drop of images as shown here:

[img]Content.png[/img] 

Follow this walk through and understand all the pieces the comes with CQ. Then you can extend it to use a carousel.

See: http://scottsdigitalcommunity.blogspot.ca/2013/08/creating-cq-widget-that-supports-image.html.

[NitroHazeDev]

This article is helpful Scott thanks a ton.

So in my list of concerns with image tab approach that we are discussing, where we could have text and image, [1] adding tabs dynamically on the fly to create an image tab is something that will be a hurdle, cause the approach you've mentioned would be for fixed image tabs, right? Do we have any sample widget with us for dynamically creating image tabs on click of say "+" icon beside the image tab?

And question on the article is, Is there a way to avoid the text tab and have two text xtype in the tab with the droptarget area, now the reason being doing this would provide the user with a single tab for image title and description for the image, rather than the user switching between tabs for text and image?.

The requirement as proposed would be to have single tab with drop target and 2 xtype widgets, text and text area, in a single dialog, and these tabs generated on probably click of an icon.

I decided to try on the multifield approach looking at the complexity of the above approach, where i managed to create 2 fixed image tabs but couldn't manage to generate them on the fly and have a text and textarea widget in same tab. Seems like multifield helps alleviate the text and text area widgets and all the image paths and texts appear in a single dialog and single tab, but issue is placement of the droptarget for the image.

"I tried implementing this in another way, i.e, a custom image component with multiple image tabs but for that the concerns were

1. knowledge of extjs, to add a tab dynamically , say on click of "+", (+ being displayed to the right of image1, image2 tab). I couldn't handle the dynamic tab creation

i managed to add two image tabs though and could render successfully , but the image tabs would have to be fixed unless i add functionality to create tabs on the fly

2. Have title and text along with the image droptarget area on a single tab dialog , so that user drags drops the image, enters title text all in one tab for image1 of the carousel."