> ## Documentation Index
> Fetch the complete documentation index at: https://docs.fusioncore.us/llms.txt
> Use this file to discover all available pages before exploring further.

# Portal Order Page

> Add the FS Roster accelerator component to a portal page, point it at a Roster_Setting__c record, and style the table — render action links as buttons and improve spacing.

## Overview

After you have created your roster settings, build the portal order page by adding the FS Roster accelerator's component to a portal page and pointing it at the `Roster_Setting__c` record you want that page to display. This page covers adding the component, then the CSS and field tips that make the rendered table look its best.

If you have not created your `Roster_Setting__c` records yet, do that first — see [Roster Settings](/end-user-guides/portal/portal-order-page-roster-settings/roster-settings).

## Prerequisites

* The [FS Roster accelerator](/end-user-guides/portal/portal-order-page-roster-settings/roster-settings) (`unmanaged-package-roster-accelerator`) is installed in the org. The roster component ships with this package, not with managed Portal.
* The `Roster_Setting__c` records exist (see [Roster Settings](/end-user-guides/portal/portal-order-page-roster-settings/roster-settings)).
* The Business Unit's `FCORE_PORTAL__Portal_URL__c`, `FCORE_PORTAL__Portal_Checkout_Page_Path__c`, and `FS_Portal_Installments_Page_Path__c` are set, so the order action links resolve.

## How to Add a Roster to a Portal Page

<Steps>
  <Step title="Create the portal page">
    Create the portal page that will host the list, following [Creating Portal Site Pages](/end-user-guides/portal/creating-portal-site-pages).
  </Step>

  <Step title="Add the roster component">
    On the page in Experience Builder, open **Components** and drag the **RosterManageComponent** onto the page.

    <Frame caption="Dragging the RosterManageComponent onto the page">
      <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4860117120/image-20260326-203159.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=234a1271aaf03fa2860bc7382935e072" alt="The Experience Builder Components panel with RosterManageComponent" width="391" height="735" data-path="images/end-user-guides/4860117120/image-20260326-203159.png" />
    </Frame>
  </Step>

  <Step title="Copy the Roster Setting ID">
    Open the **Roster Settings** list, click the **Roster Setting** record you want this page to display, then copy its record ID from the browser URL.

    <Frame>
      <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4860117120/Screenshot_2025-01-07_at_8.52.29-PM.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=4b4e90ca593fd20e9ff610f0e7d6bbd6" alt="A Roster Setting record with its record ID in the URL" width="2010" height="956" data-path="images/end-user-guides/4860117120/Screenshot_2025-01-07_at_8.52.29-PM.png" />
    </Frame>
  </Step>

  <Step title="Point the component at the record">
    Paste the **Roster Setting ID** into the component's settings. The table now renders the orders or payments defined by that `Roster_Setting__c` record.

    <Frame caption="Pasting the Roster Setting ID into the component">
      <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4860117120/image-20260326-202911.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=399217e8fecc675afc174015739e6d56" alt="The RosterManageComponent property panel with the Roster Setting ID field" width="300" height="493" data-path="images/end-user-guides/4860117120/image-20260326-202911.png" />
    </Frame>

    <Frame caption="The rendered roster on the portal page">
      <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4860117120/image-20260326-203106.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=a8556eba2a41dbfe9c17df9641e45da4" alt="The rendered roster table on the portal order page" width="1419" height="638" data-path="images/end-user-guides/4860117120/image-20260326-203106.png" />
    </Frame>
  </Step>
</Steps>

## Improving the Roster UI

These tips style the roster rendered by the FS Roster accelerator — including the order action links surfaced by `FS_Portal_Actions__c`.

### Styling Hyperlinks to Look as Buttons

Apply the following CSS styles to your Site via:

`Setup` → `All Sites` → \[YOUR SITE] `Builder` → `Theme` → `Edit CSS` → `Use Overrides`

```css theme={null}
/* Display Roster Table hyperlinks as buttons */
.cRosterManageComponent .dataTable td > a {
    background-color: var(--lwc-colorBackgroundButtonBrand);
    border-color: var(--lwc-colorBackgroundButtonBrand);
    border-radius: 4px;
    border-style: solid;
    border-width: 0.8px;
    color: var(--lwc-colorTextBrandPrimary);
    padding: 5px 16px;
    text-decoration: none;
}

.cRosterManageComponent .dataTable td > a:hover {
    background-color: var(--lwc-colorBackgroundButtonBrandHover);
}
```

### Handling Lookup Fields in a Roster

Adding a lookup field directly to a roster will be displayed as a clickable link. However, clicking the link may result in an error page. To avoid this issue, you can create a formula field that displays only text instead of a link.

#### Example

* **Lookup Field:** `AccountId`
* **Formula Field (Text Display Only):** `Account.Name`

This ensures that the account name appears as plain text rather than a broken link.

### Styling the Roster for Better Spacing

Apply the following CSS styles to your Site via:

`Setup` → `All Sites` → \[YOUR SITE] `Builder` → `Theme` → `Edit CSS` → `Use Overrides`

```css theme={null}
div.cRosterComponent {
    margin: 0 100px 0 100px;
    background-color: #FFFFFF;
    box-shadow: 0 4px 4px #00000040;
    border-radius: 20px;
    padding: 40px;
}
```

<Frame>
  <img src="https://mintcdn.com/fusionspan/dgaf-BkijdfqhSNr/images/end-user-guides/4860117127/Screenshot_2025-02-05_at_9.22.59-PM.png?fit=max&auto=format&n=dgaf-BkijdfqhSNr&q=85&s=920853aaab4a578025403b527da0f95f" alt="A styled roster table with rounded corners, padding, and a drop shadow" width="1308" height="1538" data-path="images/end-user-guides/4860117127/Screenshot_2025-02-05_at_9.22.59-PM.png" />
</Frame>

## Limitations and Common Pitfalls

* **The component comes from a separate package.** **RosterManageComponent** is part of the FS Roster accelerator. If you cannot find it in the Components list, the accelerator is not installed in the org — install it before configuring the page.
* **A wrong or missing Roster Setting ID shows an empty table.** The component renders nothing useful unless the ID you paste matches an existing `Roster_Setting__c` record. Copy the ID from the record's URL exactly.
* **Action link columns can render blank.** If the order action links (`FS_Portal_Actions__c`) appear empty, the Business Unit is missing one of its URL fields (`FCORE_PORTAL__Portal_URL__c`, `FCORE_PORTAL__Portal_Checkout_Page_Path__c`, `FS_Portal_Installments_Page_Path__c`). This fails silently — no error is shown.
* **The styles target the FS Roster accelerator's markup.** The CSS selectors above (`.cRosterManageComponent`, `div.cRosterComponent`) match the classes the FS Roster accelerator renders. They have no effect if the accelerator is not installed and its component is not on the page.
* **Lookup columns render as links that can break.** Adding a lookup field directly to a roster displays it as a clickable link, and clicking it may land on an error page in the portal. Display a text formula field (for example, `Account.Name`) instead of the raw lookup.
* **CSS overrides are site-wide.** The styles are applied through the site's theme CSS overrides, so they affect every roster on the site, not just the order page. Scope your selectors if you need different styling per page.