<a href="/wiki/pages/viewpage.action?pageId=2537667836">Pagination (Quartz)</a>

Created by Rossel, Annika, last modified by Milanov, Kalin on Nov 16, 2022

Annika RosselVisual Design contact

Useful Links:

Introduction

Pagination Control

The pagination control is used to split the table or list content into separate pages.

It is used as an alternative to the growing mode or More button. Recommendation to use the pagination pattern can be found in the guideline.

Pagination Control Specification

Desktop & Tablet

The pagination control is divided into three sections. These three sections take on the full width of the available control (table or list) it refers to. The first section (Results per Page) is left-aligned, the second section (page selection) centrally aligned and the optional third section (Results) right-aligned.

<div> <div></div> <div>Description</div> <div>Desktop (compact)</div> <div>Tablet (cozy)</div> </div> <div> <div><strong><br></strong></div> <div>Pagination Control</div> <div> <p>Width: 100%</p> <p>Height: 2.75rem (results in 44px)</p> <p>Background: transparent</p> </div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">A</span></strong></div> <div>Padding</div> <div> <p>Left padding according to the general specification of the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2Fvisualcore%2FResponsiveTable%2B%2528Fiori%2B3%2529%2B-%2BSpecification">table</a>: 1rem</p> <p>Right padding according to the general specification of the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2Fvisualcore%2FResponsiveTable%2B%2528Fiori%2B3%2529%2B-%2BSpecification">table</a>: 1rem</p> </div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">B</span></strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">Label</a></div> <div>According to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">Label</a> specification.</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C</span></strong></div> <div>Padding</div> <div>Width: 0.5rem</div> <div>-</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">D</span></strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2051306683">Select</a></div> <div> <p>Width: 5rem (results in 80px)</p> <p>According to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2051306683">Select</a> specification.</p> </div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">E</span></strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257">Navigation Buttons</a></div> <div>All buttons use the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">tertiary transparent highlight</a> styling. The general <em><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257">Icon Only Button - Compact Size Specification</a></em> apply to all of them.</div> <div>All buttons use the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">tertiary transparent highlight</a> styling. The general <em><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257">Icon Only Button - Cozy Size Specification</a></em> apply to all of them.</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">E1</span></strong></div> <div>Back Button</div> <div>Icon: sap-icon://nav-back</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">E2</span></strong></div> <div>Page Button</div> <div></div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">E3</span></strong></div> <div>Next Button</div> <div>Icon: sap-icon://navigation-right-arrow</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);"> F</span></strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2047541747">InputField</a></div> <div> <p>Min-width: 2.5rem (results in 40px)</p> <p>According to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2048463312">InputField</a> specification.</p> <p>The page number is centrally aligned and always filled.</p> </div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);"> G</span></strong></div> <div>Placeholder Dots <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">Label</a></div> <div>Width: 1.5rem</div> <div>–</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);"> H</span></strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">Label</a> (Optional)</div> <div>According to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2048463312">L</a><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">abel</a> specification.</div> <div>–</div> </div> <div> <div><strong>I</strong></div> <div>Padding</div> <div>Padding between Buttons: 0.5rem</div> <div></div> </div>

Number of Pages < 10

If there are less than 10 pages overall available, there is no need for having the input there because all pages can be accessed via clicking the corresponding button.

<div> <div></div> <div>Description</div> <div>Desktop</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">A</span></strong></div> <div>Button</div> <div>The selected button uses the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">tertiary transparent highlight</a> styling in Pressed/Down (active) state.</div> </div>

First Page Selection Sample

If there are more than 9 pages available, there should always be a minimum of 9 elements shown between the navigation arrows in order to have a smooth transition between pages. (No jumping of arrows)

Mobile

For mobile size the pagination control consists of two sections: The first section (Results per Page) is left-aligned and the second section (page selection) right-aligned.

<div> <div></div> <div>Description</div> <div>Mobile (cozy)</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">A</span></strong></div> <div>Padding</div> <div> <p>Left padding according to the general specification of the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2Fvisualcore%2FResponsiveTable%2B%2528Fiori%2B3%2529%2B-%2BSpecification">table</a>: 1rem</p> <p>Right padding according to the general specification of the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fdisplay%2Fvisualcore%2FResponsiveTable%2B%2528Fiori%2B3%2529%2B-%2BSpecification">table</a>: 1rem</p> </div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">B</span></strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2051306683%23Select(Fiori3)-SelectforPhone-FullscreenDialog">Select</a></div> <div> <p>Width: 5rem (results in 80px)</p> <p>According to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2051306683">Select</a> specification.</p> </div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C</span></strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257">Navigation Buttons</a></div> <div>All buttons use the <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2025039257%23Button(Fiori3)-TertiaryTransparentHighlightButton">tertiary transparent highlight</a> styling. The general <em>Icon Only Button - Cozy Size Specification</em> apply to all of them.</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C1</span></strong></div> <div>First Page Button</div> <div>Icon: sap-icon://media-rewind</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C2</span></strong></div> <div>Back Button</div> <div>Icon: sap-icon://nav-back</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C3</span></strong></div> <div>Next Button</div> <div>Icon: sap-icon://navigation-right-arrow</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">C4</span></strong></div> <div>Last Page Button</div> <div>Icon: sap-icon://media-forward</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">D</span></strong></div> <div>Label</div> <div>According to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2048463312">L</a><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">abel</a> specification.</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">E</span></strong></div> <div>Padding</div> <div>0.25rem (results in 4px)</div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">F</span></strong></div> <div><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2048463312">InputField</a></div> <div> <p>Min-width: 2.5rem (results in 40px)</p> <p>The page number is centrally aligned and always filled.</p> <p>According to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2048463312">InputField</a> specification.</p> </div> </div> <div> <div><strong><span style="color: rgb(0,0,0);">G</span></strong></div> <div>Label</div> <div>According to <a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2048463312">L</a><a href="https%3A%2F%2Fwiki.wdf.sap.corp%2Fwiki%2Fpages%2Fviewpage.action%3FpageId%3D2046200429">abel</a> specification.</div> </div>

Responsiveness & Adaptiveness

For LayoutS size use the mobile specification, L and XL size use the desktop or table specification and for M size, the right-aligned optional Results section is not shown.

Interaction

The standard interaction states of the used controls apply with the following additions:

Buttons do not have a down/ active state. (If pressing a specific page number, the page visible on the button is automatically entered into the InputField(F); If pressing the navigation buttons the number in the InputField is counted up/down.)
If selecting a new range with the Results per Page Select or changing the page currently shown in the table, the backend retrieves the data and the table is in a busy state. After retrieval the table shows the first entry on top of the table.