Overview of Rendering Components

To structure the output for a search submission, you must embed specific rendering tags within the <stl:searchOutput> container. The core elements required are <stl:pageContents>, wich displays the list of results, and <stl:pageItems>, responsible for the pagination controls, along with multiple <stl:pageItem> definitions.

Configuration Constraints:

• The <stl:searchOutput> tag is required to enclose exact one <stl:pageContents> element to render the actual result data.
• Pagination navigation relies on at least one <stl:pageItems> block containing distinct <stl:pageItem> entries. Refer to doucmentation for those specific components for detailed configuration.
• Additional HTML or STL elements can be placed freely outside these mandatory blocks within <stl:searchOutput> to apply custom styling or layout wrappers.

1. Default Implementation

When minimal markup is provided, the system renders results using standard settings. This example defines a width constraint without altering internal structures:

<stl:searchOutput pageNum="12" width="500px">
</stl:searchOutput>

2. Custom Layout with Keyword Highlighting

This approach enables case-sensitive highlighting and allows full control over the visual arrangement. A table structure is used here to organize the navigation links.

<stl:searchOutput width="500px" isHighlight="true">
    <stl:pageContents scope="All" pageNum="12">
        <div class="result-card">
            <stl:a target="_blank"></stl:a><br />
            <stl:content type="Content" isClearTags="true" wordNum="120"></stl:content>
        </div>
    </stl:pageContents>
    
    <hr />
    
    <stl:pageItems>
        <table cellpadding="0" cellspacing="0" width="90%" height="40px" align="center">
            <tr>
                <td align="left">
                    <stl:pageItem type="FirstPage" text="Start"></stl:pageItem> | 
                    <stl:pageItem type="PreviousPage" text="Back"></stl:pageItem> | 
                    <stl:pageItem type="NextPage" text="Forward"></stl:pageItem> | 
                    <stl:pageItem type="LastPage" text="End"></stl:pageItem>
                </td>
                <td align="right">
                    <stl:pageItem type="CurrentPageIndex" text="Page:"/> 
                    <stl:pageItem type="PageNavigation"/>
                </td>
            </tr>
        </table>
    </stl:pageItems>
</stl:searchOutput>

3. Handling Success and Empty States

Using conditional templates ensures users receive appropriate feedback when no matches are found versus when results exist successfully.

<stl:searchOutput width="500px">
    <stl:successTemplate>
        <stl:pageContents scope="All" pageNum="12">
            <a href="#"><stl:a target="_blank"></stl:a></a>
        </stl:pageContents>
        <br />
        <stl:pageItems>
            <table cellpadding="0" cellspacing="0" width="90%" height="40px" align="center">
                <tr>
                    <td align="left">
                        <stl:pageItem type="FirstPage" text="First"></stl:pageItem> | 
                        <stl:pageItem type="PreviousPage" text="Prev"></stl:pageItem> | 
                        <stl:pageItem type="NextPage" text="Next"></stl:pageItem> | 
                        <stl:pageItem type="LastPage" text="Last"></stl:pageItem>
                    </td>
                    <td align="right">
                        <stl:pageItem type="CurrentPageIndex" text="Current:"/> 
                        <stl:pageItem type="PageNavigation"/>
                    </td>
                </tr>
            </table>
        </stl:pageItems>
    </stl:successTemplate>
    
    <stl:failureTemplate>
        <table width="90%" cellspacing="2" cellpadding="2" border="0">
            <tbody>
                <tr>
                    <td align="center">Error: No records matched your query.</td>
                </tr>
            </tbody>
        </table>
    </stl:failureTemplate>
</stl:searchOutput>