Wednesday, October 25, 2017

Useful Properties of Page Properties Dialog in AEM 6.3


Hello Everyone,

Generally we used to copy and paste the dialog and doesn’t understand the meaning of these attributes.
Here I am going to explain some of the page properties of dialog which are very useful.
So I am going to walk you through with each and every property in a detailed manner.
1.cq:showOnCreate :
  • As classic UI is soon going to be deprecated from AEM, and we have started using touch UI for page Creation.
  • When author create a page from sites, this needs to be notice that only two tabs are visible in the page properties dialog here.
tabs.PNG
Fig - Page Properties Dialog at the time page creation
Now the question comes that why only two tabs visible here while in the page properties dialog there are many tabs.The tabs/widgets are not visible in the dialog right now ,because if you see in the page properties dialog these tabs are having the property cq:showOnCreate as false.

So this property cq:showOnCreate plays a very important roles to show tabs or widgets at the time of page creation. That’s why if you want to author some fields at the time of page creation only, Just add this property with the value true in the tab /widget node.The default value of cq:showOnCreate is true.
advances.PNG
Fig - showOnCreate property added in tab node of the dialog
2.cq:hideOnEdit: While editing the page, if you want to hide any property from the page properties dialog ,set this value of cq:hideOnEdit as true.
The default value of cq:hideOnEdit is false.
hide.PNG
Fig - hideOnEdit property added in widget node of the dialog
Note: If you want to show any widget/tab at the time of page creation and at the time of edit you want to hide it, you can use a combination of cq:showOnCreate(as true) and cq:hideOnEdit(true).
3.allowBulkEdit : Sometimes many pages want to share same value of a widget(field).So there is no need to go to each and every page individually and change the property. Let suppose author want some tags to be shared across multiple pages. You can select more than one pages from the sites console and edit the property at all pages. This property enables the fields for bulk editing.

You can only bulk edit the pages:
  • Share the same resourceType
  • Are on part of live copy
bulk.PNG
Fig - allowBulkEdit property added in widget node of the dialog
4.cq-msm-lockable: One of the features built into AEM MSM is the ability to determine which properties of a page are inherited (“rolled out” in AEM terms) from the master site to its child sites (live copies).


msm locable.PNG
Fig - cq-msm-lockable property added in widget node of the dialog
msm.PNG
Fig - cq:LiveConfig node added under the live copy

How this property works:
1. This property will create the chain link in the dialog which indicates that these values will be fetched from the master copy.
Note: If the value is not present in the master copy, it will pick its own value.
2. This can be edited if inheritance from the master copy has been cancelled.

When cq-msm-lockable has been defined, breaking/closing the chain will interact with MSM in the following way:
The value of cq-msm-lockable can be relative and absolute.
a)Relative (e.g. myProperty or ./myProperty)
  • It will add and remove the property from cq:propertyInheritanceCancelled.
  • MSM does not operate with deep properties (e.g. ./image/fileReference), even though the dialog’s logic does. If the chain is opened a rollout of the page will overwrite ./image/fileReference, as the rollout of the image node will not "walk" up to the parent node to check cq:propertyInheritanceCancelled.

relative.jpg
Fig - Properties in case of relative path when inheritance cancelled

Note: H2Solutions provide a Hotfix for AEM MSM Inheritance breaking with deep     properties problem in the GitHub Repository

b)Absolute (e.g. /myProperty)
  • Breaking the chain will cancel inheritance by adding the cq:LiveSyncCancelled mixin to ./myProperty and setting cq:isCancelledForChildren to true.
  • Closing the chain will revert inheritance.
absolute.jpg
Fig - Properties in case of absolute path when inheritance cancelled

NOTE : When you re-enable inheritance, the live copy page property is not automatically synchronized with the source property. You can manually request a synchronization (rollout configuration) if this is required.
Demonstration Video On Properties of Page Properties Dialog:


If you have any query or suggestion then kindly comment or mail us at sgaem.blog02@gmail.com

Hope it will help you guys !!
Thanks and Happy Learning.

10 comments:

  1. Thanks a lot for detail explanation.

    I have a question on property.
    What's the use of Hide In Navigation Property?

    ReplyDelete
    Replies
    1. When this property is checked, this page will not be visible when all children of its parent page are listed.

      Delete
  2. Thanks and keep up the great blog posts.

    ReplyDelete
  3. Thanks a lot for such a wonderful Explanation. It was easy to understand as you explained with the help of pictures.
    component design services

    ReplyDelete
  4. Nice article weighing the pros and cons of either method. How Much is My House Worth?

    ReplyDelete
  5. Hi,
    I am using cq-msm-lockable on a rte and I tried using it in granite:data nod as well.
    The bug is that it shows and works like inheritance cancellation and revert both but while inheritance is locked it allows to author value.
    This issue is only with rte.
    Do you have any fix\suggestion for this?

    ReplyDelete
  6. in Page Properties dialog, i have richtext field and it has rte plugins added.
    now when i create a page rte plugins are not showing for the field.

    can some one have solution for it ?

    ReplyDelete
    Replies
    1. RTE capabilities are supported only in AEM component dialogs. RTE is not supported on wizards or Foundation-forms like Page Properties and Scaffolding on Touch-enabled UI.
      (https://helpx.adobe.com/uk/experience-manager/6-3/sites/administering/using/rich-text-editor.html)

      + OR you can overlay createpagewizard, put `cq.authoring.dialog` and fix the console errors

      Delete
  7. These are really amazing and valuable websites you have shared with us. Thanks for the informative post.
    WordPress development company in Chennai

    ReplyDelete