Add Page List, Pagination, Page Content, and Title renderings

Abstract

Use the Page Content renderings

The Page Content section in the SXA toolbox contains a variety of renderings that help you add content to your pages. For example, renderings that display lists, pagination, and titles.

The Page List rendering displays a hierarchical tree list of the pages on your site by predefined Sitecore queries. For example, you can use the Page List rendering to display the sitemap of the site, to list an overview of product types, or to display a list of pages within a blog post.

You can configure which pages appear in the list and select different styling options for different goals. For example, you may want a simple nested list of all your pages for the sitemap:

2360F548A3014A0CB44B95D2FDAC2608.png

You could also create a more detailed list showing a title, description, thumbnail, and details:

83AE2DAC095A4A0583BE79118DD1144D.png

To add and configure a Page List rendering:

  1. From the toolbox, drag the Page List rendering to the page.

  2. In the floating toolbar, click Edit the Component Properties.

  3. In the General section, determine the items that you want on the list and their appearance by editing the following fields:

    • Source Type click a Sitecore query: Children, Siblings, or Items using the same template.

      By default, the Page List rendering displays children of itself.

      FD3B6EA3D1BA4F599A15CB30C316AD7F.png
    • Page Size – enter the number of pages that you want to display. For example, if from a huge list of items, you want to display the first 15 items only, enter 15.

  4. To have several display options ready for use, in the Control Properties dialog box, in the Styling section (or from the floating toolbar), select a variant for the Page List rendering.

    For example, select a simple variant that displays a nested list, a variant that lists the page title and a description, or a more detailed variant that also displays thumbnails:

    00A3BBDC683C4B36A12ACFC63B631951.png

You can also select the variant, from the Page List tool bar directly. Click the Select component variant drop-down to see a preview of the variants.

4FC2B0B647224B8482E842704FD214B6.png

By default, the Page list component renders on the current page. If you want to switch the context for for example the tags of different pages you must create a Page list variant that contains a placeholder. For this placeholder you can enable the user to switch context for the renderings inside the placeholder.

The Pagination rendering lets you add pagination to the Page List, Event List, and File List renderings. It reflects the number of pages, and enables you to navigate to a page directly or use additional buttons (First, Previous, Next, Last).

To add pagination to a page list, you must map an existing list rendering with pagination using the List Signature field. By default, the Pagination rendering displays the default list without page numbers.

Note

You can attach more than one Pagination rendering to a list.

To add pagination:

  1. Drag and drop the Pagination rendering on the page.

  2. In the floating toolbar, click Edit the Component Properties.

  3. Determine how you want the pagination to display by editing the following fields:

    • Page Size – enter a number to determine the number of list items to display.

    • Collapsed Pagination Threshold – enter the number of pages above which the pagination should collapse. If you have a long list of pages, it can be a good idea to collapse the page tree. For example, set the List Signature field to collapsed-pagination and in the Collapse Pagination Threshold field enter 3:

      CAEB56484725415FBD8CF6F3292B72EA.png

    Note

    To show all pages, enter -1. To show no page numbers but only the Next/Previous buttons, enter 0 or leave this field empty.

    • List Signature – enter the unique signature to map the pagination to a specific list rendering, for example, collapsed-pagination.

      076296397FE140929D8858A750C29BCD.png
    • Offset – enter the number of items that you want to skip.

The Title rendering displays the title or subtitle of the current page. You can add the Title rendering anywhere on your page by dragging it from the toolbox to the page. By default, the Title field takes the name of the page it is on but you can add different rendering variants or select a different data source.

To add and configure the Title rendering:

  1. From the Toolbox, drag the Title rendering to the page.

  2. To select a different data source or to use a variant, navigate to the floating toolbar, and click Edit the Component Properties.

    For example, to select a rendering variant with fallback functionality, in the Variant field, click Page Title with Fallback. This can be convenient when not all pages contain a title. When there is no title defined, the navigation title is displayed. If this field is also empty, the display name is shown and if that fails, a custom text message appears:

    3361A34DE2144185ADAF0C1F7757B54C.png
    762DE0CC50BC4A81BA7DACFFB27ABEEC.png

The content on your pages is stored in Sitecore as fields such as the Title, Header, Footer, and Image fields. The Page Content rendering enables you to drag and drop the content wherever you think it fits best and, thanks to rendering variants, you can easily select the appropriate field to be shown from a drop-down list.

Note

By default, the Page Content rendering has no data source specified. Depending on the page template, the rendering displays fields from the page that you drop it on.

Because the Page Content rendering displays fields that are present on the context item, and the current page contains the data, no mapping is needed. If you point its data source to another page, it will use fields from that page instead

To add and configure the Page Content rendering:

  1. From the toolbox, drag the Page Content rendering to the page.

  2. In the floating toolbar, click Edit the Component Properties. By default, the Page Content rendering uses the first available rendering variant.

  3. Determine the content you want by selecting the data source and the variant. You can also select the variant directly from the toolbar:

    3A236EE46C0C45A4B55359464F5E3A32.png

Note

If you use the Page Content rendering in a partial design, you can render fields from any page.