4

I wish to use cq:inplaceEditing to modify a property on my JCR whenever it is used by the AEM authors. Unfortunately, I do not know how to modify the name of the property that it actually modifies in the JCR. It appears that it only modifies the value of the property "text" by default.

For my purposes, I want to use its rich-text-editing for properties that have names I define, not just the default name "text."

The image at this link shows the tree which contains the cq:inplaceEditing (courtesy of CRXDE):

enter image description here

These are the attributes of cq:editConfig:

enter image description here

These are the attributes of cq:inplaceEditing:

enter image description here

...and this is what a content node of my JCR looks like when I use the inplaceEditor. I've blotted out the names of some properties for potential security reasons. Note that the "text" property below was changed when I used the inplaceEditor. Also note that I want to be able to define the property name that the inplaceEditor changes, rather than just the "text" property:

enter image description here

Is there a way to use a different property name instead of "text"?

-----------EDIT----------

After changing the property "textPropertyName" to the property that I am searching for, it still doesn't appear to actually modify the behavior of the inplaceEditor. It still only modifies the "text" property of my JCR nodes instead of the one that I put in the "textPropertyName" attribute.

This picture contains the attributes of my cq:InplaceEditingConfig:

enter image description here

The picture below contains the attributes of the JCR node at the path specified in the "configPath" variable in the picture above. Note that I set the textPropertyName attribute in this node and the text component still modifies the default attribute "text" instead of the one specified:

enter image description here

Finally, the picture below shows the contents of my JCR tree inside of the text component.

enter image description here

-----------ANOTHER EDIT----------

I discovered that the inline text editor was persisting the correct property after I had switched to the classic UI. For some reason, it doesn't work correctly with the touch UI.

Manisha Bano
  • 1,853
  • 2
  • 22
  • 34
idungotnosn
  • 2,001
  • 4
  • 29
  • 36

2 Answers2

14

How to find it

The inplace editing capability is defined by subclasses of CQ.ipe.InplaceEditing function. You can find it easily by just searching for editorType through the CRXDE tool.

Searching for the CQ.ipe.InplaceEditing returns multiple results such as CQ.ipe.TextEditor that at the very end of the script registers desired editorType i.e.: CQ.ipe.InplaceEditing.register("text", CQ.ipe.TextEditor);

The answer

Reading through the editor code you can find the first configurable property called textPropertyName which according to it's documentation is just what you are looking for. Combining it with the inplace configuration node (see Adobe's documentation) it is the solution for your case.

An example

You can try it by yourself on an instance of Geometrixx component.

  1. First go to CRXDE and find Geometrixx Text component: /apps/geometrixx-gov/components/text.
  2. Notice /apps/geometrixx-gov/components/text/cq:editConfig/cq:inplaceEditing@configPath property value.
  3. Find /apps/geometrixx-gov/components/text/dialog/items/tab1/items/text resource and add new property: textPropertyName=myPropertyName.
  4. Then just open the Geometrixx Gov page add Geometrixx Text component, edit it inplace and look into the Network console. You'll notice POST request with the altered parameter name

edit after TouchUI clarification

TouchUI case

If you want to achieve the same for TouchUI interface it doesn't go so easy, unfortunately. The text inplace editor for TouchUI is defined by /libs/cq/gui/components/authoring/clientlibs/editor/js/editors/InlineTextEditor.js.

Searching for "text" gives you an overview how hardcoded is this property. For AEM 6.1 (on which I'm testing it) you can find it's occurence in the ns.persistence.readParagraphContent function where the initialContent is extracted from the resource JSON map. Another occurence can be found in finishInlineEdit and addHistoryStep methods. Changing all three occurences of "text" to your value brings expected outcome.

This is obviously non-acceptable - it's a platform-wide change and will affect other (incl. ootb) components where it might no be expected. The simplest would be to just copy-paste whole editor into your clientlib and register the editor into a new name - see last couple of lines: ns.editor.register. If you feel comfortable in JS, it might be worth to extend this editor and alter just three methods that are affected.

Community
  • 1
  • 1
Mateusz Chromiński
  • 2,742
  • 4
  • 28
  • 45
  • This looks great. I don't go into work till Monday, but when I do, I will verify to see if this answer solves my issue. – idungotnosn Jul 17 '15 at 15:53
  • I'll accept this as the answer, since it seems to make sense. Something else appears to be wrong though. I put the property textPropertyName in the path as mentioned in step 3, but the website still uses the ./text property instead of the property with the name that I mentioned. Do I need to recompile anything? What is wrong with it? Another question: The TextEditor.js script doesn't appear to load in my browser when I navigate to a page with a text component. Does it ever show up in the client? Or is it all done completely server-side? – idungotnosn Jul 20 '15 at 16:29
  • Have you pointed the `configPath` property to the node where `textPropertyName` is defined? Please post the repository state of your component similar to the screenshots from the question. The JS for inplace editing is definitely used client-side so should be loaded to your browser. I'm not 100% sure if `TextEditor.js` is the proper handler for it though, this was just a first item from search. – Mateusz Chromiński Jul 20 '15 at 17:44
  • See my edit above, and thank you for your help thus far. – idungotnosn Jul 20 '15 at 18:19
  • try to remove the `./` prefix which is specific and typical for Sling but not for JS frameworks so the `textPropertyName` prop should have the value of `courseTitle` – Mateusz Chromiński Jul 20 '15 at 20:10
  • Tried that. Still not modifying it. Perhaps I'm just not modifying it correctly? I click and drag the text component onto the page, click on it, write some text inside of the component, and click "X." I then looked at the JCR in CRX/DE and found that the property that I specified with textPropertyName was still not there, but the "text" property was edited instead. – idungotnosn Jul 20 '15 at 20:22
  • So, I discovered that your solution works perfectly for classic UI. I hadn't tested that until now. I do need it to work for touch UI, though. – idungotnosn Jul 21 '15 at 16:25
  • 3
    I'm thrilled that you have extended your answer for the TOUCH UI. As I trying to create a component that's inplace editor accesses the same property node on both Classic and Touch, and I have changed the default name to not be TEXT. Which means if I want I have to leave it to the default of TEXT. I agree. Unacceptable. – TyMayn Jul 29 '15 at 23:03
  • Thank you, Mateusz Chromiński, for that edit. It explains a lot. – idungotnosn Jul 30 '15 at 14:35
2

As of AEM 6.3, the textPropertyName works correctly with the out-of-the-box PlainTextEditor.js

The property needs to be set on a config node under the cq:InplaceEditingConfig

Location of the config node under cq:InplaceEditingConfig

textPropertyName property and value

Note – the source of the editor can now be found at: /libs/cq/gui/components/authoring/editors/clientlibs/core/inlineediting/js/PlainTextEditor.js

Maxim Y
  • 41
  • 4
  • The property is ignored when you set the property configPath on the node above (cq:inplaceEditing). If you use it with inline configuration it works. The alternative is to place this property on the resource where your configPath points to. – d33t Jul 26 '19 at 19:05