Expand my Community achievements bar.

Multiple In-Place Image Editors with Hybrid Editors

Avatar

Level 1

Hi, 

I need to implement a 3 images component using the new Touch-Optimized UI. So, following the sample code showed here: https://docs.adobe.com/docs/en/aem/6-1/develop/components/multiple-inplace-editors.html#Code Samples I managed to create the component correctly and I solved all the issues into the "Configure" section with the FeaturePack cq-6.1.0-featurepack-6563-1.0.0 released on August 22nd 2015.

Now I have the problem using the in-place editors, when I click on an element in my dropdown menu I always end up with the in-place editor for the first image only. I have no options to open it for the second or the third images.

I also downloaded and installed the sample code provided by Adobe Marketing Cloud using hybrid editors from GitHub https://github.com/Adobe-Marketing-Cloud/aem-authoring-hybrideditors

Apparently this code should implement an "imageimage" component (just 2 instead of three which is my objective), but it doesn't work either. My configuration is as follow:

<cq:inplaceEditing jcr:primaryType="cq:InplaceEditingConfig" active="{Boolean}true" editorType="hybrid"> <cq:childEditors jcr:primaryType="nt:unstructured"> <image1 jcr:primaryType="cq:ChildEditorConfig" title="Image1" type="image"/> <image2 jcr:primaryType="cq:ChildEditorConfig" title="Image2" type="image"/> <image3 jcr:primaryType="cq:ChildEditorConfig" title="Image3" type="image"/> </cq:childEditors> </cq:inplaceEditing>

I think nothing is wrong in my code. I suppose there is still a bug to fix in the new Hybrid Editing system.

UPDATE: I actually noticed in the text&text sample component inside cq:inplaceEditing there is a "config" node reporting a configuration node for each child editor. I can't find any documentation related to this "config" node and trying to figure it out using this single example didn't work.

I also noticed that the text&text component is writing the textual contents directly as component properties. I instead created 3 different objects where each of them contains their own properties that I have to change, in the real world with complex data we need to do that. For example in another test component I'm developing I have 2 titles and a text objects. When I click to the second title (used as subtitle) the in-place editor goes to the first title instead and if I change the value it will be stored in a property directly into the main component despite I configured ./title/jcr:title. Same behaviour for the text element. In this case I'm able to load the in-place editor for the text element correctly (I suppose because it's a different type) but when I change the value it goes, exactly like the title, to a property of the main component despite, as before, I specified ./text/text but basically it is stored into ./text. 

In the config node I don't understand how to configure "name" and "propertyName" properties. I tried different combinations using the correct property path like ./subtitle/jcr:title rather than the object names title/subtitle/text...

The "Configuration" section works perfectly instead, using the same configuration like for the 3 images component.

Please help me to understand it better because if I can't solve this issue, or if this is a real bug the Touch-UI won't be ready to use for a production project because we need to use custom components and so hybrids editors.

Thanks,

Danilo

0 Replies