Activate edit mode in component after save.

[TrifaCh]

Hi everyone,

I am writing to asking whether is it possible to check and enable edit more after clicking "save" in component editing.

Background:

I have asked a question about editing is disable after save the component modification. However, I find that the page may switch to the preview mode after save the component editing. The condition can be fixed after I change to Preview mode then switching back to Edit mode.

Problem:

1. Is it possible to check the current mode and switch to edit mode after clicking the save in component modification ? 
2. Where can I catch ( or find ) the code or event about click save in component editing window ?

Thank you for helping.

[A_H_M_Imrul]

Hello @TrifaCh,

Though I am not sure about the business that you want to achieve, but its seems you want to maintain consistency of the configurable properties within the component dialog. If that is the case, I think you can achieve it with design dialog

For your reference: 

https://experienceleague.adobe.com/docs/experience-manager-65/developing/components/developing-compo...

http://www.aemcq5tutorials.com/tutorials/create-design-dialog-in-aem/

If you can share some more detail on the business ask, probably will be able to help more..

Thanks

[TrifaCh]

Thank you for answer. I think my problem should go deeper to the self-defined AEM component. Should define some event handling in component save, delete, edit and so on.

[arunpatidar]

Hi @TrifaCh 
Can you check if you are using any cq:listerner EditConfig in your component. By default the mode does not changed

You can look for cookie to find out the correct mode

[TrifaCh]

Thank you for answer. The Value of cq-editor, cq-authoring and wcmmode is not change. However, it likes enter the Perview mode.

[aanchal-sikka · Accepted solution]

Hello @TrifaCh 

Ideally, there should be no impact on the Edit mode of component. When we save a component, the page is still in Edit mode and thus the components.

• Can you please check, if you have any cq:listeners configured which might be impacting?
• If no, can you please configure a cq:listener and if it helps? They come with various triggers and intended beahviours, like:
  • REFRESH_SELF
  • REFRESH_PARENT
  • REFRESH_PAGE
  • REFRESH_INSERTED

http://www.sgaemsolutions.com/2019/01/ootbcustom-cqlisteners-in-cqeditconfig.html

[TrifaCh]

Thank you very much. I will try to use your method to solve the problem first.

[kautuk_sahni]

@TrifaCh Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community.

[TrifaCh]

Some suggestion is helpful. But I still find the solution of my problem. I will share it after finding it. Thanks.

[TrifaCh]

Figure 1. The Elements in edit mode.

Figure 2. The Elements after clicking save and page refresh (Should be save as Preview mode)

  

Hi everyone, I just found something about the problem. As showing in Figure 1, there should be a Editable div tag in the Edit mode. However, the Element turn to Figure 2 after page fresh.(The clicking in save button in component window trigger the event) The Editable div tag is missed.

That is reason why the system back to normal after switching to Preview and back to Edit mode.

[aanchal-sikka]

@TrifaCh 

Can you please check if you are using the placeholder div properly? Also, assure isEmpty is properly resolved

Example in text component, observe the placeholder <sly>

<div data-sly-use.textModel="com.adobe.cq.wcm.core.components.models.Text"
     data-sly-use.component="com.adobe.cq.wcm.core.components.models.Component"
     data-sly-use.templates="core/wcm/components/commons/v1/templates.html"
     data-sly-test.text="${textModel.text}"
     data-cmp-data-layer="${textModel.data.json}"
     id="${component.id}"
     class="cmp-text">
    <p class="cmp-text__paragraph"
       data-sly-unwrap="${textModel.isRichText}">${text @ context = textModel.isRichText ? 'html' : 'text'}</p>
</div>
<sly data-sly-call="${templates.placeholder @ isEmpty = !text, classAppend='cmp-text'}"></sly>

which in turn uses /libs/core/wcm/components/commons/v1/templates.html

<sly data-sly-template.placeholder="${@ isEmpty, classAppend, emptyTextAppend}">
    <div data-sly-test="${(wcmmode.edit || wcmmode.preview) && isEmpty}"
         class="cq-placeholder ${classAppend}"
         data-emptytext="${component.properties.jcr:title}${emptyTextAppend && ' - '}${emptyTextAppend}"></div>
</sly>

[TrifaCh]

No, there is no any sly tag in my Element tab. Thank you for answer.

[TrifaCh]

After making comparison, I think I may need a method to force reload the edit mode in code. All configurations are in Edit mode, but the Element is in Preview mode.