Example for paging

The following example contains a list component with a Technical Process and a properties definition.

The following example is only an example to demonstrate the principle of paging, it should not be considered as best practice.

XML

<ListComponent name="Paging" path="Paging" displayName="Paging" process="fillListProcess.wrf" default="true">
	<Properties>
		<Property name="List" type="Complex">
			<Property name="Description" type="String" displayName="Description"/>
			<Property name="Id" type="Integer" displayName="Id"/>
		</Property>
	</Properties>
	<Columns>
		<Column value="#List.Id" />
		<Column value="#List.Description" />
	</Columns>
</ListComponent>

In this example there is an XML file as data source containing 67 entries:

dataSource.xml

XML

<?xml version="1.0" encoding="UTF-8"?>
<List>
	<Description>Value</Description>
	<Id>0</Id>
	...
	<Description>Value</Description>
	<Id>66</Id>
</List>

To process the request and get only the entries that are needed, a Technical Process must be designed:

First, the data source and the request are merged in this Technical Process so that they can then be processed in a mapping.

The mapping looks like this:

processRequest.xsl

XML

<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="2.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
  <xsl:output media-type="text/xml" method="xml"/>
  <xsl:template match="/">
    <OkList>
      <xsl:attribute name="size" select="count(Merge/List/Id)"/>
      <xsl:for-each select="Merge/List/Id">
        <xsl:if test="number(Id)>=/Merge/Search/@offset and number(Id)< /Merge/Search/@offset+/Merge/Search/@limit">
          <List>
            <Description>
              <xsl:value-of select="Description"/>
            </Description>
            <Id>
              <xsl:value-of select="Id"/>
            </Id>
          </List>
        </xsl:if>
      </xsl:for-each>
    </OkList>
  </xsl:template>
</xsl:stylesheet>

The mapping processes the offset and limit information from the query (/Merge/Search/@offset bzw. /Merge/Search/@limit) and sorts out the entries that do not meet these conditions. A data model with <OkList> as root element is generated for the entries that fulfill the conditions. This data model can be read by the Web App. The total number of entries in the list is added to <OkList> with the size attribute. If you scroll now in the list component, the component knows that there are more entries than are displayed. These entries are loaded with a new query with a different offset.