Ad Code

Wednesday, February 13, 2019

Usage and best practices of Page Properties Dialog Fields in AEM

Hello Everyone,

May be when you read the topic "page properties dialog", you might think that this is simple one and i know every field but its not so true. There are many fields in page properties dialog also that has a deep meaning in itself.So Today in this blog I am going to discuss OOTB  Fields available in page Properties of dialog,their use cases and best practices.

Title Fields in Page Properties Dialog
Let’s start with so many title related fields(title,page Title,Navigation Title) available in
Page Properties.Every field has its own meaning and best practice to use.

Title:The title of the page is shown in various locations. For example, the Websites tab list and the Sites card/list views in AEM Console.To show title in websites tab, you need to put it in <title> tag in html of the page.This is a mandatory field. title can be accessed in HTL directly using : ${currentPage.title}

Page Title: A title to be used on the page.Typically used by title components. If empty the Title will be used.Page Title can be access it in HTL directly using : ${currentPage.pageTitle}

Navigation Title:If you want to specify a different title to show in Navigation so use it if this is empty then Title can be used.You can access it in HTL directly using : ${currentPage.navigationTitle}
Add caption

Hide in Navigation: Indicates whether the page is shown or hidden in the
page navigation of the resulting site.You can use this value in your logic to show/hide the
particular page in Navigation Component.

On Time: The date and time at which the published page will be activated. When published
this page will be kept dormant until the specified time.
Leave these fields empty for pages you want to publish immediately (the normal scenario).

Off Time: The time at which the published page will be deactivated.Again leave these
fields empty for immediate action.

Redirect: We already talk about redirect in one of my blog in very detail. Please follow the link to see how redirect works.

Alias
If you go through the dictionary meaning of alias it means “used to indicate that a named person is also known or more familiar under another specified name”.So this meaning best suited to this widget because here you can use a different "page name" using this property.

The property may be set on any resource to indicate an alias name for the resource.
So may be your page is like "/content/we-retail/en/men.html" (here men is the page name)
right now and you put alias for the page “men” as “sports-men”, so you can access
the same page with this URL also /content/we-retail/en/sports-men.html.


Note: alias won’t work in publish instance until you provide jcr:read permission for “/”
for anonymous user. You just need to select root but you can deselect permission inside
(like apps,etc etc ) root, because when you use sling:alias this particular logic (shown in the
image below ) internally runs and if anonymous user don't have read access of “/”
then it won’t work in publish.
Add caption
This is how alias works.

Vanity URL
A vanity URL is an unique web address that is branded for marketing purposes.Vanity URLs are a type of custom URL that exists to help users remember and find a specific page of your website. Therefore your vanity URLs should be easy to remember, use, and share.
So you can add n number of vanity URLs for a particular page.So usually vanity URLs are used to share a page link on Social Networks like Facebook,LinkedIn and Pin Interest.
Using this field if you click on Vanity URL the URL will remain same but the content will be displayed of that page for which you created vanity URL.
Caution: Vanity URLs:
  • Do not support regex patterns.
  • Must be unique so you should take care that the value is not already used by another page.
Redirect Vanity URL
The idea of vanity URLs is to show shortened URLs on marketing places but when user click on link it should be redirected to the actual website.So it means 301 Redirect.So when you want 301 redirect of vanity URL to actual page you can check this configuration.As per the best SEO practice, vanity URLs should have 301 redirect.
For Example: if in linkedin, you put a youtube url, it automatically converts into some vanity url( unique  linkedin url) and when you click it redirects you to actual link.

Design
In AEM, there are few things which used to store in design path like all the values of design dialog components.The allowedComponents for a particular parsys etc.If you don't provide a design path it will get saved under default path.
/etc/designs/default/jcr:content/page-component-name
But as per the best practice always specify design path for every website  at the root level and rest of the pages will follow root design path.
How to create a Design Path
  • To create a design Path,Go to miscadmin.
  • Go to Tools->Designs.
  • Create Page using Design Page Template.
  • Click On Create.
Add caption
This is how your design path will get created and you can choose it from page properties.
Allowed Templates
Author can also configure which templates should be visible under which pages.You can configure template paths here.Regex will also work here.
Click 'Add Field' to add a template or a list of templates to be allowed as child pages. Each value in the list must be an absolute path to a template or use '/.*' to allow all templates below this path.

Please go through the demo videos for clear understanding of the use cases of Widgets available
in 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.

Thursday, February 7, 2019

cq:inplaceEditing in cq:editConfig Node in AEM


Hello Everyone,

In my previous blog, you have already gone through about cq:dropTargets and
now in this blog we will talk about how to use cq:inplaceEditing in components.

Inplace editing is also a good feature to add in your component and is usually
used for rich Text and image widgets.

Let’s talk about how to use this feature and all the possible scenarios where this
feature can be used.
Inline Editing in Text (RichText) Component:
In the richText widget, you can change the content using inline editing without opening the dialog.
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and add the following properties in the same node.
editorType
string
text
active
boolean
true

Step2: Make a node “config” as a child node of cq:inplaceEditing and add a property “textPropertyName” and the value must be the name property of the field (richText field) for which you are doing inplace editing.
textPropertyName
text
Through these steps you can only see default plugins of rich Text editor.

Demonstration Video on cq:editConfig in Text (RichText) Component in AEM

Inline Editing for any TextField Widget in a Component
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and add the following properties in the same node.
editorType
string
plaintext
active
boolean
true

Step2: Make a node “config” as a child node of cq:inplaceEditing and add a
property “textPropertyName” and the value must be the name property of the
text field for which you are doing inplace editing.
textPropertyName
text

Demonstration Video on cq:editConfig for any TextField Widget in AEM

Inline Editing in Title Component
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and
add the following properties in the same node.
editorType
string
title
active
boolean
true
Step2: Make a node “config” as a child node of cq:inplaceEditing and
add a property “titleTag” as shown below.
titleTag
String[]
h1,h2,h3,h4
Note: The inline editing for title component will only work for the name property ”jcr:title”.
Note: “titleTag” is important so that you can do inline editing in title sitting under a heading Tag.
Demonstration Video on cq:editConfig in Title Component in AEM

Inline Editing in Image Component
In the Image Component, using inline editing, the author can crop,flip,zoom and rotate the images.
Step1: Create a cq:inplaceEditing node (of type cq:inplaceEditingConfig) as the child node of cq:EditConfig node (of type cq:editConfig) and
add the following properties in the same node.
editorType
string
image
active
boolean
true

Step2: In the html file of the component, use the class “cq-dd-image” to render the inplace editing plugins.For example:

<div class="cq-dd-image ">
               <img src="${image}" alt="${properties.imageAltText}"  />
</div>

In short, the html should have this (cq-dd-image) class to render the image with inline editing plugins.

The js file /libs/cq/gui/components/authoring/editors/clientlibs/core/inlineediting
/js/ImageEditor.js gets loaded while opening the dialog,find for the class and render the image for inline editing.

Through these steps, you can only show default inplace editing plugins in the Image Component.
Here no need to add “config” node for “propertyName”, which image will be inside the class
,that image will start showing plugins.

You can add custom plugins for inplace editing using the particular xml here.

Demonstration Video on cq:editConfig in Image Component in AEM


Please go through the demo video for clear understanding of inplaceEditing in
all the possible components.

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.

Friday, February 1, 2019

How to make a Page Component and Template in AEM

Hello Everyone,

As AEM is growing really well, A lot of people are learning AEM. So to help beginners,
I am here with this blog about creating page Component and template in AEM.

In AEM component development, Page Component is the very first step to do.
How to make a Page Component in AEM 6.4
  • Usually an AEM Project maintains a hierarchy to create page component.
Add caption
  • Now to create a Page Component, Right click on the structure folder and click on Create Component.
Add caption
  • Now give proper name and Title(human readable title) and inherit the page component “/apps/core/wcm/components/page/v2/page” to get all the basic things from parent page component.Click on Next and Finish.
The value of Super Type used to change as per the AEM Version.
In AEM 6.3, we use “/apps/core/wcm/components/page/v1/page” for Super Type.
In AEM 6.2, we use “/libs/wcm/foundation/components/page” for Super Type.

Note: Use relative Paths, avoid using absolute one as per the best practice in AEM.So don’t  use absolute path.
Add caption

Group
: The component Group for the Page Components are always “hidden” as
we don’t need to drag and drop this component anywhere.So use “.hidden” for the Group.
  • Now add parsys in a basePage.html.
<sly data-sly-include="/libs/wcm/core/components/init/init.jsp"/>
<div data-sly-resource="${'parsys' @resourceType = 'wcm/foundation/components/parsys'}"></div>
Now it’s time to create a template for the page component.


How to make a template from the Page Component
  • Go to the templates folder ,Right click and choose Create Template.
Add caption
  • Fill the label, Title,description and “resourceType which points to page component” we previously created.
Add caption
Ranking:This property is used to show the templates in the ascending order while creating pages. Which template is having the highest ranking which will be shown above. “1” is the highest ranking for a template.
  • Now click on next. Now there is an option for allowedPaths.This property is important as this template would be visible only when there is any allowedPaths for template.
Add caption
The value /content(/.*)?  means that we can access this template from anywhere under the “/content” folder.

  • Click on Next.There are options for allowed Children and allowedParents.Don’t fill these values for now.We will cover these properties in a while.Directly go for finish and Save.
Now it’s time to create pages from the templates.

How to make a Page from the Template
  • Go to http://localhost:4502/sites.html/content and click on Create.Choose the base Page Template.
  • Fill the name and Title for the page and click on open.
  • You can see the page having a parsys defined in basePage Component. Now you can drag and drop any component in the page.
Add caption
Now Let’s discuss more about some of the properties of a template like allowedTemplates, allowedPaths, allowedParents, allowedChildren.
  • allowedPaths:
    • This is a template level property so must be defined in the template level.
    • It's value will be the path under which this template will be visible for page creation in siteadmin.
Note :- This property is required only for the top level page creation. If you don't provide this property then this template will not be visible in siteadmin. This property is also required if you don't add cq:allowedTemplates property at top level page jcr:content node.
  • cq:allowedTemplates:
    • This property is a page level property, so must be defined on the jcr:content node of the template.
    • It's value will be the path of templates those will be visible for page creation under current page in siteadmin.
    • This property is having the highest priority.
Note: First AEM check cq:allowedTemplates property that can be displayed under the page created using this template.
Then AEM check for allowedPaths property of these selected template group and check that path present in this property matches with the path of page, yes or not, if yes then this template will be displayed else not.
  • allowedParents:
    • This property is a template level property so must be defined at template node.
    • It's value will be the path of templates those can behave as the parent of this template at the time of page creation in siteadmin.
Note:This property is used to add another level of restriction i.e. if your templates satisfies both of above defined criteria or they are not present or defined empty then this property will be checked.

If this property exists then AEM will check the value of this property. This property can have the path of the templates that can behave as parent of this template.

cq:allowedTemplates (Parent Page) + allowedPaths (Parent  Template) + allowedParents (Child Template) = template to be displayed.
  • allowedChildren:
    • This property is a template level property so must be defined at template node.
    • It's value will be the path of the templates those are allowed or visible for page creation under this template in siteadmin.
Note: If above defined properties and this property are not empty then a new level of restrictions will be added for showing templates in siteadmin.

cq:allowedTemplates (Parent Page) + allowedPaths (Parent  Template) + allowedParents (Child Template) + allowedChildren (Parent Template) = template to be displayed.

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.