Experience League | Image

Rethinking Content for Fluid Experiences

Table of Contents

Lab Overview

The lab overview should give the attendee a general idea of what this lab is focused on and how they might use the information within to gain additional value from their Adobe solutions. This section should include:

Key Takeaways

  • Identify use cases to choose between Experience Fragments & Content Fragments.
  • Determine site structure for content fragments & Experience Fragments.
  • Use AEM as Headless Content Management System.
  • Using Content Fragments and Experience Fragments with Multi-lingual sites.

Prerequisites

  • AEM 6.5

Lesson 1 Content Fragments

Objective

  1. Determine usage of content fragments.
  2. Create content fragment models.
  3. Create content fragments using content fragment model.
  4. Add variations in content fragments.

Lesson Context

In this lesson, we will learn usage and benefits of content fragments in AEM. We will create content fragment using content fragment models. We will also explore variation and few other features of content fragments.

Exercise 1.1 - Content Fragment Model

In this exercise, we will create initial Content Fragment Model.

  1. Go to AEM > Tools > Assets > Content Fragment Models.

    Figure 1: Content Fragment Models

  2. Double click to open We.Retail folder.

  3. Press Create button to create a model Figure 1: Content Fragment Models Create Button

  4. Provide model details:

    • Model Title : Article
    • Description : Content Fragment Model for Articles in We.Retail (optional)

  5. Press Create Button and you should get a success message. Figure 1: Content Fragment Models Create Button

  6. Press Open button in success message.

Exercise 1.2 - Editing Content Fragment Model

In this exercise, we will add fields to the Article Content Fragment Model.

  1. On your screen, you should see Content Fragment Model Editor . It is divided into two sections, left-one is canvas where will add fields and on the other side we have Data Type lists which show us list of all data types which can be added to content fragments.

Figure 1: Content Fragment Models Editor

  1. Click on Single line text data type and drag it on canvas to add it.
  2. Go to Properties tab and add following details:
    • Field Label: Article Title
    • Property Name: articleTitle (required field)
    • Placeholder: Enter Article Title
    • Required: Checked

Figure 1: Single Line Text

  1. Add another Single line text to the canvas with following properties:

    • Field Label: Article Author
    • Property Name: articleAuthor (required field)
    • Placeholder: Enter Article Author Name
    • Required: Unchecked

  2. Add Multi line text to the canvas with following properties:

    • Field Label: Article Body
    • Property Name: articleBody (required field)

Figure 1: Completed Content Fragment Model

  1. Click the Save button to complete the creation of the Article Content Fragment Model.

Exercise 1.3 - Create Content Fragment

Now we have content fragment model and we will use it to create content fragment.

  1. Go to AEM > Assets > Files > We.Retail > English.

  2. Create a folder by pressing Create button and provide title as CF.

  3. Open CF folder.

  4. Press Create Button > Content Fragment . You should see a list of available content fragments.

    Figure 1: Content Fragment Model List

  5. Click on Article template or content fragment model and Press Next button.

  6. Provide title for the content fragment as North Slope Adventures.

  7. Click the Create button and you should get Success Message. Click the Open button in the success message modal-window.

Now you should see a form with all data types we provided in article content fragment model. In this exercise, we will be adding content to the content fragment Model

  1. Add following content to this article:
    • Article Title: North Slope Adventure
    • Article Author: Your Name or Any name
    • Article Body: Text from file

Figure 1: Content Fragment

  1. Click the Save button to save this article.

Exercise 1.4 - Create content fragment variations

As a content owner, we also want to create content fragment variations for other channels and requirements.

  1. Select recently created content fragment.
  2. Select Edit or Press E on your keyboard to Edit Content Fragment.
  3. Press Create Variation to create new variation of the content fragment.
  4. Provide the Title as Summary and click Add.

Figure 1: Summary Variation

We will be using OOTB summarization feature for content fragments to summarize the article.

  1. Click in Article Body box and select maximize icon Figure 1: Maximize

  2. In maximize window, Press Summarize Text Button Figure 1: Maximize

  3. Provide Target words as 200.

  4. Review the summarized results and Press Summarize Button to confirm final Summarization.

  5. Select the text area and press the minimize icon.

  6. Click the Save button to save summary.

Lesson 2 Experience Fragments

Objective

  1. Determine usage of Experience Fragments.
  2. Differentiate between Experience Fragments & Content Fragments.

Lesson Context

Experience Fragments allows content authors to reuse content across channels including sites pages and 3rd party systems.

Exercise 2.1 - Create Experience Fragments

  1. Go to AEM Navigation > Experience Fragments.

  2. Create two folders for languages with following titles:

    • en
    • de

  3. Select the en folder and click Create > Experience Fragments. This will list OOTB templates for Experience Fragment Creation.

    Experience Fragment templates are like Page Templates.

  4. Select ** We.Retail Experience Fragment Web Variation** template.

  5. Click the Next button and provide Title of experience fragment as Adventure in North Slope.

  6. Click the Create button and Press Open in success message.

    You should see an Experience Fragment Page Editor, it is quite similar to AEM Page Editor.

  7. Add following components to the Layout Container :

    • Title Component
    • Image Component
    • Content Fragment Component

  8. Resize Image Component and Content fragment to get them in same row.

Figure 1: Content Fragment Models

  1. Now add an image to image component.

  2. In Asset browser, filter the list by Content Fragment.

    Figure 1: Content Fragment Models

  3. Now drag the content fragment on the content fragment component within the page.

  4. Double click to open dialog box of content fragment.

  5. Configure Content Fragment Dialog box:

    • Display Mode: Single Text Element
    • Element: Article Body

Figure 1: Content Fragment Models

  1. In the Paragraph Tab, Select Range Radio Button and provide input as 2-3. This determines to show only second to third paragraphs.

Figure 1: Content Fragment Models

  1. Press check or done button to save changes. Figure 1: Content Fragment Models

Exercise 2.2 - Add Experience Fragment to the Page.

  1. Go to AEM > Sites > We.Retail > Language Masters > English
  2. Press Create Button > Select Page
  3. Select Content Page Template
  4. Provide Title as Adventure
  5. Press Create > Open
  6. Add Experience Fragment Component on the page Figure 1: Experience Fragment Component
  7. Filter asset browser by Experience Fragments and drag and drop Adventures in North Slope experience fragment over Experience Fragment Component.
  8. You may add few more components on page like images to display products regarding adventure. Figure 1: Page with Experience Fragment .

Lesson 3 AEM as Headless CMS

Objective

  1. Leverage AEM As Headless CMS.
  2. Use Content Fragment to generate JSON respon.

Lesson Context

You may want to leverage content inside AEM in third-party applications as well. With content-fragments you don't need to duplicate the content.

Exercise 3.1 - Content Fragment as JSON

  1. Go to AEM > Assets > Files > We-Retail > En > CF.

  2. Select to edit the content fragment.

  3. Change the URL as following:

    http://host:port/api/assets/asset_project_folder/contentfragment_name.json

Or click http://localhost:4502/api/assets/we-retail/en/experiences/arctic-surfing-in-lofoten.json

You should get JSON response as following Figure 1: Model JSON

This json can be accessed by any third-party app for content rendering. Also when content author changes the content, Third-party apps will recieve the latest content.

Exercise 3.2 - Experience Fragment as JSON

You can export Experience Fragment to target as JSON. This will help in using Experience Fragment on SPA sites or other channels target by Adobe Target.

  1. Go to AEM > Experience Fragments > En.
  2. Select En folder and choose properties.
  3. Click on Cloud Services.
  4. In Cloud Service Configurations dropdown ,select Adobe Target configuration.
  5. Now you can to choose ** Adobe Target Export Format **:
    • HTML
    • JSON
    • HTML & JSON

Figure 1: Export Experience Fragment as JSON

  1. Save and Close.
  2. Select the Experience Fragment created in previous lesson.
  3. Click the Export to Target button in action.
  4. You should get Success Message.

Now this experience fragment will be available in Adobe Target for usage.

Lesson 4 AEM with Multi-Site Management

Objective

  1. Using Content Fragment For MSM.
  2. Using Experience Fragment For MSM.

Lesson Context

You may leverage experience fragments and content fragments for multi-site management.

Exercise 4.1 - Configure Translation Editor

  1. Go to AEM > Tools > Translation Configuration.
  2. Select /content/dam/ and Press Edit from action toolbar.
  3. Click General to open list of properties.
  4. In New Property textfield , enter articleTitle, articleAuthor & articleBody.
  5. Press the Save button.

Exercise 4.2 - Create Translation Project

  1. Go to AEM > Sites > We.Retail > Language Masters > English.
  2. Checked Select Adventure Page.
  3. Select References in sidebar.
  4. Click on Create & Translate Action on bottom of side bar.
  5. Select German in Languages drop down.
  6. Select Create Translation Projects in Project.
  7. Provide Title as Adventure Page Translation.

Figure 1: Translation Project

  1. Press the Create Button.

Exercise 4.3 - Run Translation Project

  1. Go to AEM > Project > Adventure Page Translation.
  2. Double click to open the project.
  3. Click on arrow icon in translation job card and start the translation.

Figure 1:Start Translation Project

  1. Click on three dots in translation job card and accept the translation.

Figure 1:Accept Translation Project

  1. Now go to AEM > Sites > We.Retail > Language Masters > Deutch.
  2. You should see a german page for Adventure page with translated content fragment and Experience Fragments.

Next Steps

Try to access content fragment in your third party application.

Additional Resources

AEM Fluid Experiences for headless usecases

AEM Content Fragement

[Translating Content Fragments] (https://helpx.adobe.com/in/experience-manager/6-4/assets/using/creating-translation-projects-for-content-fragments.html)

Appendix

Experience Fragments

[Experience Fragments Vs Content Fragment] (https://helpx.adobe.com/experience-manager/kt/platform-repository/using/content-fragments-experience-fragments-article-understand.html)