AEM Content Authoring Tutorial

Content Fragments are created under /content/dam. These are just used to create articles, news, faqs  ., etc which seems to be like content.  These are re-usable content same as experience Fragment. Components cannot be added under the content Fragments. Procedure to create CF : 1.Navigate to /content/dam 2.Click on Create , select content Fragment and select content Fragment model. 3.Enter the CF title 4.Add the content which is required on the cf model. Adding CF on the page: 1. Edit the page and add Content Fragment component. 2. Select the cf model in the component. 3. Select the single item or multiple items. If multiple items are selected then parsys will be added on the page. Content Fragment Models can be created under  Tools --> Assest --> Content Fragment Models. CF Model contains below Data types. All these can be added with Mandatory Fields and based on the requirement of creating a CF Model For more information on above, go through the below syllabus. AEM Author Conc

 Multi Site Manager (MSM) allows aem developers to create copy of existing site and automatically update the copy when changes are done to the source site. Advantages of using MSM: Easily manage multiple websites that share common content. MSM allows aem developers to define relations between the sites so that content changes in one site are automatically replicated in all other sites. Reduces the time to manage your websites and increases the re-use of common content. Maintain common look and feel across all websites. When we should use MSM Sites are in multiple countries. Sites are in multiple languages. Need to reuse/replicate same content in multiple websites. Maintain consistent branding and content across websites. Creation of MSM from scratch (follow below) Create Language Masters Here we will create a sample English site, which will be used in the later point of creating multiple language copies. Create language-masters with any template. Create a sample site with Eng

Workflows are a step by step procedure in order to complete a Particular Task.  AEM Workflows allows you to automate a series of steps that are performed on (one or more) pages and/or assets. For example, when publishing, an editor has to review the content - before a site administrator activates the page. How to Navigate to workflows: Tools --> Workflows --> Models (Here you get all the Workflow Models) How to run a workflow: We can run workflow in 2 ways.   Edit the Page -- > start workflow (On Left Corner of the Page) -->  select the Workflow. Navigate to Workflows -->  Select workflow -->   Start workflow -->  Provide payload(Path on which you want run workflow). OOTB Important Workflows DAM Assest Update Workflow Request for Deletion Request for Activation   For more information on AEM , go through the below syllabus. AEM Author Concepts

 Personalisation is mainly used for displaying the content based on the user clicks/actions. Examples:  Any ecomerce website shows the personalised content based on recent search of the Products. Whatever the product you search in google , the same product will be displayed in FB. The above are just examples where this personalisation will come into picture. In AEM Personalisation is achieved in 2 Ways. AEM Context Hub Adobe Target Here we will discuss only AEM ContextHub.  Below is the minimum required procedure we should know as author to personalize the content. Segment: Segment are nothing but the different conditions are embedded within the segment.   With in this segment we need to add the conditions when this segment have to be shown to the user.  Procedure to Personalize the Page Create a Segment  Personalisation Tab --> Audience --> Create Context Hub Segment --> Add Segment Title --> Create. Edit the Segment Created (Add the Comparator Properties Like Proper

 A sitemap is a blueprint of your website that help search engines find, crawl and index all of your website’s content. Sitemaps also tell search engines which pages on your site are most important. This is totally related to SEO.  In most of the websites, this sitemap is used and it contains the important pages along with the structure , how the hierarchy of website content/structure is developed. There will be a sitemap.xml which will be used by Search to crawl over the website. For more information on AEM , go through the below syllabus. AEM Author Concepts

 A Tag is a piece of metadata assigned to content. Tags can be applied to both pages and assets. You can think of tags as keywords or labels that an author attaches to some content in order to make it easier to find, use or understand. Tagging allows authors to attach keywords to content. Within AEM, tags can be classified into a number of categories called “namespaces”. These namespaces typically means these are segregated  based on categories like Furniture,Electronics etc., Each new site have its own namespace; an website name namespace is also used for tagging global assets — e.g., commonly-used photos and icons. Creation of Tags:                 Tools --> General --> Tagging --> Create Tag --> Add Title -->Save. These tags are used to Tag Page/Asset by going to Page Properties/Asset Properties. Tags are used to generate Dynamic Content in Searching the content functionalities.  Whenever i search any result with specific Tags will be displayed. For more i

 In AEM RichText is a very important component.  This component can be used seperately or this can be be embedded in other components. This can also be called as WYSIWYG (What you see is what you get).  In Rich text we can perform below activities. Adding hyperlinks. Adding Bold,Italic,underlined Adding bullets/numbers. Adding Headings. Adding specific colors to text. Adding special characters. Adding superscript/subscript. Table can be added. Adding custom Html/css with in the edit source icon. Having good knowledge on HTML/CSS will help in customising the Rich Text. For more information on AEM , go through the below syllabus. AEM Author Concepts

Any Website can be viewed in Desktop,Mobile,Tablet through a Browser. In Desktop website can be viewed in only one view. In Mobile and Tablet website can be viewed in 2 modes 1) Potrait (Vertical). 2) Landscape (Horizontal). So the view in Desktop, Mobile and Tablet can be changed by  using the emulator according to the Design.  Emulator can also be called breakpoints/Layout mode. This  is mainly used to author for multiple view ports as per the Design for all views as below. Mobile (Landscape/Portrait) Tablet (Landscape/Portrait) Desktop This can be done by using the "Emulator" icon which is on the right corner.  Select specific Device which needs to change the layout and author the content by using layout option which is there for each component or Layout option in the right corner with the Edit option dropdown. Note:  These options of Mobile/Tablet will come only if developer adds the breakpoints at the Template level. For more information on AEM , go through the below

Experience fragments are mainly used for re-usability purpose. If I want to add a component with same content in multiple places then by using experience fragments we can achieve it. In Short: Author once and use in multiple places in Pages. The experience Fragments are created under content/experience-fragments. Creating an Experience Fragment(XF)  XF can be created in 2 ways. 1 st Way: Navigate to Experience fragments --> Click on Create --> Create Experience Fragment --> Select Experience Fragment template --> Enter Title --> Click on Create Button. Add the required components on to the created XF. Navigate to the Page, where you need to author the content on specific Page. Add experience-fragment component and give the Path of xf. 2 nd Way: Assume that a component have been already added on the Page.  Now you can convert that component to XF by clicking on convert to experience Button as shown in below image. After clicking on that Button Below screen will b

Templates define the structure of the Page; without template we cannot create any Page.  Template defines the Where the Iparsys and Parsys have to be added and what components should be displayed on the layout container. Prior AEM 6.2, there were only static templates, from aem 6.3 Adobe introduced Editable Templates/Dynamic Templates. 1 )   Static Templates Static Templates are created by the Developer, where content author just uses the templates and creates the Pages.  If you want to enable any components to be shown on the page then on the page needs to go to design mode and add the specific components. In static templates by default  some component needs to shown on the Page then developer needs to add the component on the template through code. Editable Templates From 6.3, Adobe introduced new feature of Editable templates.   The content author can create templates and can add structure, initial content, Policies.   Editable Template contains mainly 3 features 1)

In order to create a website, Pages are needed.  Page can be created by selecting a Template.  With out template we cannot create a page. What ever the pages created that will be stored under /content Process to create Page Naviagate to Sites -->Naviagate to Specific Path -->Create Page --> Select Template --> Enter Page Title and Name (optional) --> Create page. With this page can be created, use edit option to edit the page and add components on to the Page. Page Properties Properties contains few t abs are Basic, Advanced, Error Pages, Thumb Nail, Cloud Services, Personalisation and few custom Tabs. These Page properties are used in SEO like Description,Title(Meta tags),Social Sharing(OG URL). Modes of Viewing a Page Pages can be viewed in 3 modes. Edit Mode (wcmmode=edit) Preview Mode  (wcmmode=preview) View as published mode  (wcmmode=disabled) Edit Mode      In order to add any component on the page, the page should be in Edit mode.  This Edit mode option is

Components are basic building blocks of a websites, everything in AEM is a component. Let’s assume to show any new content then we need to add a component on to the Page and edit the component by clicking on Wrench icon.   Without components, we cannot create the content. Components contain the dialog and that can contain any of the below fields.   Path Browser (To Select Internal Pages,Images,etc.,) Select DropDown (Used for Selecting the Values) TextArea TextField Numberfield RichText Image Checkboxes Radio buttons Image/Fileupload Date Picker TagPicker MultiField Below are the default components available in OOTB(out of the Box). Styles: Styles are used for Dynamically changing the single component to multiple variations like align Text to left,Right,Center.  For each component styles will be available with painter icon just beside the wrench icon.  Below is the example of styles. For more information on AEM , go through the below syllabus. AEM Author Concepts

Replication is nothing but publishing the pages from author, so that the content will be published to publishers.   As the dispatcher is connected to Publisher, latest content will be shown in Live. Ways of doing Replication: Quick Publish: Select multiple pages in the admin and use Quick Publish, only selected pages will be published. Manage Publication: With Manage Publication, you can un-publish/publish the selected pages. Also you will find an option of adding multiple pages for publishing and unpublishing.    There is one more option, where we can schedule the publish/unpublish of pages at a certain point of time by selecting the date and time.   Publish/Unpublish Page: This is present on Page information, these will be used to publish/unpublish an opened page. Activate Tree: If we want to publish the pages/images in bulk then we go for activate tree. Below url is used for the same and provide the path, so that everything under the path gets published based on the selection of

A digital asset management (DAM) platform gives you organizing, storing, and retrieving rich media.   In DAM, we can upload the images (SVG, JPG, PNG, TIFF), Videos, PDFs, Docs, xls and we call all these as assets. All the assests uploaded here are used in the website (Components).   Once we upload the images, images should be published.   Once the images are published these will be shown in publisher/dispatcher. In Short: In order to display the images on the website, we need to add the images in DAM and author the same images in components. Path of DAM - /content/dam/ Uploading Assests Process Navigate to DAM folder -->  Select Create -->  Upload files --> change the file name if required(PSB: Industry standards). Best Practices Before/After uploading images: 1)       No Spaces in the image name. Wrong way: Image Name. Correct way: image-name 2)       No Special characters apart from hyphen ( - ) and Underscore ( _ ) after each word which acts as delimete

There are 2 modes of authoring in AEM Touch UI Classic UI Touch UI Screen: Adobe introduced touch ui in AEM 5.6.   The main advantage of Touch UI is that the pages can be edited on all devices like Mobile,Tablet,Desktop.  This contains all the screens in classic ui but just Adobe segregated with new UI. If you want to edit any page in Touch UI, then in the url we need to add editor.html,also make sure that the components developed should support touch UI. ex: https://authorurl.com/ editor.html /content/my-project/en.html. The basic screen of touch ui looks as below.  Below are main screens in touch ui Start (/aem/start.html) Tools Sites Assets Personalisation Experience Fragments   crx/de crx/packmgr/index.jsp System/console Classic UI Screen: Classic UI was introduced in the initial stages of CQ5/AEM with out touch UI.  Still in AEM 6.5, Classic UI is supported but no enhancements are provided from Adobe (which means deprecated but supported). If you want to edit any page in C

D ispatcher is just a web server plugin - written by Adobe. An HTTP web server provides more robust features - primarily stores, processes and delivers web pages to clients. Mainly Dispatcher is used for Caching URL Re-writing Load Balancing Caching: The Dispatcher stores the cached files on the web server as if they were part of a static website. If a user requests a cacheable document the Dispatcher checks whether that document exists in the web server's file system .,    if it is not cached, then the Dispatcher requests the document from the AEM Publisher instance. URL Re-writing: URL Re-writing, it means that whatever the full url path we see in Author/publisher will be shortend and the rules will be written on the dispatcher. Ex: https://author.com/content/mywebsite/en/home.html , after re-writing the rule this can be converted to https://liveurl.com/home.html. Load Balancing: Whenever a url is accesed via the browser then the request first goes to dispatcher and from disp

The Publish instance is used to make the designed application available to the public. Whatever the content developed in Author, if the author publishes the content then the content will be available in publisher. Basically, If the content is presented in the publisher then the content will be shown in live else it will through 404 Page Not found error. For more information on AEM , go through the below syllabus. AEM Author Concepts

Author instance is mostly used by the content authors.   The Author instance is used to design, create and review the content and later will be published to the Live. In author instance, we can create pages, templates, experience fragments, content Fragments, upload images, documents and videos. Using the components developed by developer, Content author can create the websites.    In order to see/edit any page in author require the login credentials. Tasks that can be performed in Author: Create Editable Templates. Create Pages. Upload images to dam. Replication activities Create Experience Fragments Create Content Fragment Models Apart from above there are several activities that can be performed. For more information on AEM , go through the below syllabus. AEM Author Concepts

What is AEM? Author Publisher Dispatcher in AEM Touch UI vs C lass UI   DAM (Digital Asset Management) Replication/Publish in AEM Parsys/Responsivegrid/Iparsys Components Pages Templates Experience Fragments Content Fragments Emulator / Break Points RichText Tagging Sitemap Personalisation Workflows MSM(Multi Site Management) Users and Groups Environments in SDLC

  AEM is full form is Adobe Experience Manager and many people call it as adobe cq5,cq5.   AEM is a web Content Management System Tool (wcms/cms), which is a used for building websites, mobile apps and forms. AEM makes easy to manage your content and assets.  By using aem, we can dynamically change the content within fraction of seconds and same can be shown in live. Examples:  News Channel websites, in news channel websites the layout (look and feel) will be same only the content changes dynamically. Other CMS Tools: WordPress,Drupal,Sitecore. For more information on AEM , go through the below syllabus. AEM Author Concepts