Portal Order Page

​

Overview

​

Prerequisites

• The FS Roster accelerator (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).
• 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

1

Create the portal page

Create the portal page that will host the list, following Creating Portal Site Pages.

2

Add the roster component

On the page in Experience Builder, open Components and drag the RosterManageComponent onto the page.

3

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.

4

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.

​

Improving the Roster UI

​

Styling Hyperlinks to Look as Buttons

/* 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

​

Example

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

​

Styling the Roster for Better Spacing

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

​

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.