Slices Templating in Java

The Slices field is used to define a dynamic zone for richer page layouts.

Example 1

You can retrieve Slices from your documents by using the getSliceZone() method.

Here is a simple example that shows how to add slices to your templates. In this example, we have two slice options: a text slice and an image gallery slice.

Text slice

The "text" slice is simple and only contains one field, which is non-repeatable.

non-repeatable

- A Rich Text field with the API ID of "rich_text"

repeatable

None

The "image-gallery" slice contains both a repeatable and non-repeatable field.

non-repeatable

- A Title field with the API ID of "gallery_title"

repeatable

- An Image field with the API ID of "gallery_image"

Integration

Here is an example of how to integrate these slices into a blog post.

Copy
<div class="blog-content">
    <c:forEach items="${document.getSliceZone('blog_post.body').getSlices()}" var="slice">

        <!--Render the right markup for a given slice type-->
        <c:choose>

            <c:when test="${slice.getSliceType() == 'text'}">
                <!--Rich Text slice -->
                <div class="text-section">
                    ${slice.getNonRepeat().getStructuredText("rich_text").asHtml(linkResolver)}
                </div>
            </c:when>

            <c:when test="${slice.getSliceType() == 'image-gallery'}">
                <!--Image slice-->
                <div class='image-gallery'>
                    <h2 class="gallery-title">
                        ${slice.getNonRepeat().getText("gallery_title")}
                    </h2>
                    <c:forEach items="${slice.getRepeat().getDocs()}" var="image">
                        <img src="${image.getImage('gallery_image').getUrl()}" />
                    </c:forEach>
                </div>
            </c:when>

        </c:choose>
    </c:forEach>
</div>

Example 2

The following is a more advanced example that shows how to use Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

FAQ slice

The "faq" slice takes advantage of both the repeatable and non-repeatable slice sections.

non-repeatable

- A Title field with the API ID of "faq_title"

repeatable

- A Title field with the API ID of "question"

- A Rich Text field with the API ID of "answer"

The "featured_items" slice contains a repeatable set of an image, title, and summary fields.

non-repeatable

None

repeatable

- An Image field with the API ID of "image"

- A Title field with the API ID of "title"

- A Rich Text field with the API ID of "summary"

Text slice

The "text" slice contains only a Rich Text field in the non-repeatable section.

non-repeatable

- A Rich Text field with the API ID of "rich_text"

repeatable

None

Integration

Here is an example of how to integrate these slices into a landing page.

Copy
<div class="page-content">
    <c:forEach items="${document.getSliceZone('page.body').getSlices()}" var="slice">

        <!--Render the right markup for a given slice type-->
        <c:choose>

            <c:when test="${slice.getSliceType() == 'faq'}">
                <!--FAQ slice -->
                <div class="faq">
                    ${slice.getNonRepeat().getStructuredText("faq_title").asHtml(linkResolver)}
                    <c:forEach items="${slice.getRepeat().getDocs()}" var="faq">
                        <div>
                            ${faq.getStructuredText("question").asHtml(linkResolver)}
                            ${faq.getStructuredText("answer").asHtml(linkResolver)}
                        </div>
                    </c:forEach>
                </div>
            </c:when>

            <c:when test="${slice.getSliceType() == 'featured_items'}">
                <!--Featured Items slice -->
                <div class="featured-items">
                    <c:forEach items="${slice.getRepeat().getDocs()}" var="featuredItem">
                        <div>
                            <img src="${featuredItem.getImage('image').getUrl()}" />
                            ${featuredItem.getStructuredText("title").asHtml(linkResolver)}
                            ${featuredItem.getStructuredText("summary").asHtml(linkResolver)}
                        </div>
                    </c:forEach>
                </div>
            </c:when>

            <c:when test="${slice.getSliceType() == 'text'}">
                <!--Text slice-->
                <div class="text">
                    ${slice.getNonRepeat().getStructuredText("rich_text").asHtml(linkResolver)}
                </div>
            </c:when>

        </c:choose>
    </c:forEach>
</div>

Old Style Slices (deprecated)

Old Style Example 1

Here’s an example that shows how to integrate the old-style Slices into a blog post.

Each Slice only contains one single field. The two available Slice choices here are Rich Text fields and Images.

Copy
<c:forEach items="${document.getSliceZone('blog_post.body').getSlices()}" var="slice">
    <!--Render the right markup for a given slice type-->
    <c:choose>
        
        <c:when test="${slice.getSliceType() == 'rich-text'}">
            <!--Rich Text slice -->
            <div>
                ${slice.getValue().asHtml(linkResolver)}
            </div>
        </c:when>
        
        <c:when test="${slice.getSliceType() == 'image'}">
            <!--Image slice-->
            <p class='block-img'>
                <img src="${slice.getValue().getUrl()}" />
            </p>
        </c:when>
        
    </c:choose>
</c:forEach>

Old Style Example 2

The following is a more advanced demonstration of the old-style Slices for a landing page. In this example, the Slice choices are FAQ question/answers, featured items, and text sections.

Two of these slices contain multiple fields within a group.

Copy
<div class="page-content">
    <c:forEach items="${document.getSliceZone('page.body').getSlices()}" var="slice">
        <!--Render the right markup for a given slice type-->
        <c:choose>

            <c:when test="${slice.getSliceType() == 'faq'}">
                <!--FAQ slice -->
                <div class="faq">
                    <c:forEach items="${slice.getValue().getDocs()}" var="faq">
                        <div>
                            ${faq.getStructuredText("question").asHtml(linkResolver)}
                            ${faq.getStructuredText("answer").asHtml(linkResolver)}
                        </div>
                    </c:forEach>
                </div>
            </c:when>

            <c:when test="${slice.getSliceType() == 'featured-items'}">
                <!--Featured Items slice -->
                <div class="featured-items">
                    <c:forEach items="${slice.getValue().getDocs()}" var="featuredItem">
                        <div>
                            <img src="${featuredItem.getImage('image').getUrl()}" />
                            ${featuredItem.getStructuredText("title").asHtml(linkResolver)}
                            ${featuredItem.getStructuredText("summary").asHtml(linkResolver)}
                        </div>
                    </c:forEach>
                </div>
            </c:when>

            <c:when test="${slice.getSliceType() == 'text'}">
                <!--Text slice-->
                <div class="text">
                    ${slice.getValue().asHtml(linkResolver)}
                </div>
            </c:when>

        </c:choose>
    </c:forEach>
</div>