Content Fragmentv1

Content Fragment allows a content fragment asset, its elements and variations to be presented on a page.

Using Core Components

Adobe Help Center

Examples

Simple Content Fragment

Content fragment component with an associated content fragment asset. The asset uses the Simple Fragment template and displays some dummy article content, including a header and paragraph. It has one Main element.

Main

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        paragraphScope:
        all
    
    4. 

  4. 
        jcr:lastModifiedBy:
        admin
    
    5. 

  5. 
        jcr:created:
        java.util.GregorianCalendar[time=1547562108208,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=21,SECOND=48,MILLISECOND=208,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        text:
        Main Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.
    
    7. 

  7. 
        variationName:
        master
    
    8. 

  8. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1547562521607,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=28,SECOND=41,MILLISECOND=607,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    9. 

  9. 
        sling:resourceType:
        core/wcm/extension/components/contentfragment/v1/contentfragment
    
    10. 

  10. 
        displayMode:
        multi
    
    11. 

  11. 
        fragmentPath:
        /content/dam/core-components-examples/library/sample-assets/simple-fragment
    
    12. 




    
        

    

    
    
        
    

        
    

        
Main

        

            
            
            
Lorem Ipsum


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Eu mi bibendum neque egestas congue quisque egestas. Varius morbi enim nunc faucibus a pellentesque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis.


        

    


    


    


    


    

    


    JSON

Variations

It is possible to output alternative variations on the page. Here we use the same simple content fragment asset, but instead display its Short variation. Short variations are more suited to mobile apps, for example.

Main

Lorem Ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        paragraphScope:
        all
    
    4. 

  4. 
        jcr:lastModifiedBy:
        admin
    
    5. 

  5. 
        jcr:created:
        java.util.GregorianCalendar[time=1547562108208,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=21,SECOND=48,MILLISECOND=208,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        text:
        Main Lorem Ipsum Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    
    7. 

  7. 
        variationName:
        short
    
    8. 

  8. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1547562329831,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=25,SECOND=29,MILLISECOND=831,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    9. 

  9. 
        sling:resourceType:
        core/wcm/extension/components/contentfragment/v1/contentfragment
    
    10. 

  10. 
        displayMode:
        multi
    
    11. 

  11. 
        fragmentPath:
        /content/dam/core-components-examples/library/sample-assets/simple-fragment
    
    12. 




    
        

    

    
    
        
    

        
    

        
Main

        

            
            
            
Lorem Ipsum


Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.


        

    


    


    


    


    

    


    JSON

Structured Content Fragment

In this example, the asset is based on a bespoke Core Component Model template which allows the output of structured data associated with a Core Component. The asset contains data for the image component.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        paragraphScope:
        all
    
    4. 

  4. 
        jcr:lastModifiedBy:
        admin
    
    5. 

  5. 
        jcr:created:
        java.util.GregorianCalendar[time=1547564075201,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=54,SECOND=35,MILLISECOND=201,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    6. 

  6. 
        text:
        Title Image Description Image allows a single image asset to be displayed on the page. Images are adaptive; the relevant image width is selected for the screen size and lazy loading is available. Latest Version 2.0 Type core-components-examples:component-type/atom
    
    7. 

  7. 
        variationName:
        master
    
    8. 

  8. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1547564106376,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=55,SECOND=6,MILLISECOND=376,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    9. 

  9. 
        sling:resourceType:
        core/wcm/extension/components/contentfragment/v1/contentfragment
    
    10. 

  10. 
        displayMode:
        multi
    
    11. 

  11. 
        fragmentPath:
        /content/dam/core-components-examples/library/sample-assets/structured-fragment
    
    12. 




    
        

    

    
    
        
    

    


    


    

    


    JSON

Elements

For structured content fragments, it is possible to limit the output to certain elements in the data. In this example we again show the component data for the image component, but only its title and type.

    
    
  1. 
        jcr:primaryType:
        nt:unstructured
    
    2. 

  2. 
        jcr:createdBy:
        admin
    
    3. 

  3. 
        paragraphScope:
        all
    
    4. 

  4. 
        jcr:lastModifiedBy:
        admin
    
    5. 

  5. 
        elementNames:
        component-title,component-type
    
    6. 

  6. 
        jcr:created:
        java.util.GregorianCalendar[time=1547564250036,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=3,HOUR_OF_DAY=15,MINUTE=57,SECOND=30,MILLISECOND=36,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    7. 

  7. 
        text:
        Title Image Type core-components-examples:component-type/atom
    
    8. 

  8. 
        variationName:
        master
    
    9. 

  9. 
        jcr:lastModified:
        java.util.GregorianCalendar[time=1547564694746,areFieldsSet=true,areAllFieldsSet=true,lenient=false,zone=sun.util.calendar.ZoneInfo[id="GMT+01:00",offset=3600000,dstSavings=0,useDaylight=false,transitions=0,lastRule=null],firstDayOfWeek=1,minimalDaysInFirstWeek=1,ERA=1,YEAR=2019,MONTH=0,WEEK_OF_YEAR=3,WEEK_OF_MONTH=3,DAY_OF_MONTH=15,DAY_OF_YEAR=15,DAY_OF_WEEK=3,DAY_OF_WEEK_IN_MONTH=3,AM_PM=1,HOUR=4,HOUR_OF_DAY=16,MINUTE=4,SECOND=54,MILLISECOND=746,ZONE_OFFSET=3600000,DST_OFFSET=0]
    
    10. 

  10. 
        sling:resourceType:
        core/wcm/extension/components/contentfragment/v1/contentfragment
    
    11. 

  11. 
        displayMode:
        multi
    
    12. 

  12. 
        fragmentPath:
        /content/dam/core-components-examples/library/sample-assets/structured-fragment
    
    13. 




    
        

    

    
    
        
    

    


    


    

    


    JSON

Built with Core Components 2.3.0.