Paging Links Builder
In this topic ...
Customizing the Paging Buttons
Related Topics ...
The Paging Links builder adds a set of links to a page in the model for navigating through a data set specified in a Paging Assistant builder call. The look and feel of the paging links is defined by the Imported Page that gets inserted into the specified location. We can customize the appearance of the paging links by creating your own HTML page that displays the links with the desired appearance.
Specifying Inputs
The Paging Links builder takes the inputs described in the table below. For help on inputs common to many or all builders such as those in the Properties and HTML Attributes input groups, see "Using the Builder Call Editor."
Input Name Description Name Enter a name for this builder call. The Designer displays this name in the Builder Call List. Page Location Use the Page Location input to specify the page or pages on which this builder call will act. Alternatively, we can type in the page location syntax directly. See "Locating Control Builders on Pages" for detailed documentation about the Page Location input and page location syntax.
Assistant Name The name of the Paging Assistant builder to use as a data source. Maximum Links Upper limit on number of links to show Link Text Overrides Override Link text Enable this box to specify your own text for the First, Prev, Next and Last link buttons. (When this box is enabled, input areas are displayed in which we can enter text.) To turn the links off altogether, enable this box and leave the text input areas blank.
Disable this check box to use text in the incoming HTML.
If you use an indirect reference to link text, we need to use < and/or > in indirect link labels that may contain < or | so that they'll show up correctly in the browser.
When static text values such as NEXT> are added as the XML child of an HTML <a> tag, the XML processor knows to encode the | as > If you use an indirect reference such as ${Variables/prev} and your variable is a string with the value "<PREV" then that gets turned into a JSP expression within the <a> tag, and not XML text, so there's no automatic XML encoding.
In such cases, your link text label in your variable should be set to something like "<PREV" and/or "NEXT>" so that the angle brackets are pre-encoded before the JSP code fetches those indirect values on the page.
Advanced HTML Page HTML file to use as the Imported Page base instead of default HTML. Make URLs Absolute Enable this whenever the HTML has relative URLs in it, whether or not this is a local file. Disable if you are using a page that references other Web sites so that external links will work.
Customizing the Paging Links
We can alter the appearance of the paging links by making a copy of the HTML page that controls the appearance of the paging links. We can find this file in <servable_content_root>/factory/pages/data_paging_links.html. The following HTML is the default code for the data_paging_links.html file:
<span name="wrapper">
<span name="prevlink">[<< Prev]</span>
<span name="prepglinks">
<span name="prepglink" />
</span>
<span name="curpg" />
<span name="postpglinks">
<span name="postpglink" />
</span>
<span name="nextlink">[Next >>]</span>
</span>
You could set the display of all text for the paging links by adding the style information shown in bold in the HTML below:
<head>
<style>
SPAN.linkText {
font-family: Arial;
font-weight: bold;
font-style: normal;
color: navy;
}
</style>
</head>
<span name="wrapper" class="linkText" >
<span name="prevlink">[<< Prev]</span>
<span name="prepglinks">
<span name="prepglink" />
</span>
<span name="curpg" />
<span name="postpglinks">
<span name="postpglink" />
</span>
<span name="nextlink">[Next >>]</span>
</span>
Be sure to leave the named <span /> tags in place; the Paging Links builder uses tags as the locations for the various builder calls it uses to implement the paging links control.
To customize the appearance of the paging links control:
- Create a copy of the data_paging_links.html file, which can be found in the <servable_content_root>/factory/pages directory.
- Modify the new file to implement any style or other appearance changes you want to make.
- Save the modified file.
- In the Paging Links builder call, set the HTML Page input in the Advanced category to the path and file name of the new HTML page.
- Click OK.
- Run the model. The appearance of the paging links will now be determined by your HTML file.
If you change the HTML file used by the paging links, generate the model so that we can see the new changes.