---
schema_version: "1"
id: c3cd3d1dbc512623f90314ee0462a47dcc8c0bee2c05712e21536715db9585d3
title: Customize Contractor Portal
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/ind/264-0-0/energy_configuring_contractor_portal.md
canonical_url: https://help.salesforce.com/s/articleView?id=ind.energy_configuring_contractor_portal.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 839178297799417f467b6535dfeee14cb1d471a061d6120e0745d727731e58f4
description: Configure Contractor Portal to provide a quality, branded experience for your customers.
products:
  - Energy and Utilities
release: "264"
---
# Customize Contractor Portal

Configure Contractor Portal to provide a quality, branded experience for your customers.

Contractor Portal is delivered as a website template, built on Experience Cloud. Working with a certified [Experience Cloud Consultant](https://trailhead.salesforce.com/en/credentials/experiencecloudconsultant) can help deliver the best portal experience for your contractors.

## Portal Component Overview

To get started, here is an overview of the most important components of the Contractor Portal to focus on.

The Experience Cloud components control the basic look and feel of the Contractor Portal site. See [Customize Sites with Experience Builder](https://help.salesforce.com/s/articleView?id=experience.community_designer_overview.htm&type=5&language=en_US).

Some components, such as OmniStudio FlexCards and Lightning Web Components, are hosted by the digital experience site, and are configurable through their respective sections in the org. See the list of components at [Bill of Materials for Contractor Portal](https://resources.docs.salesforce.com/rel1/doc/en-us/static/misc/ContractorPortalComponentsList.pdf).

These Flows are delivered as templates. Clone them and then customize the cloned flows as per your business needs. See [Flow Builder](https://help.salesforce.com/s/articleView?language=en_US&id=sf.flow.htm).

<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small "><colgroup><col style="width:50%"> <col style="width:50%"></colgroup><tbody><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Label</td><td class="slds-cell-wrap" style="vertical-align:top;">API Name</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Trigger Application Approval for Contractor</td><td class="slds-cell-wrap" style="vertical-align:top;">euccontractor__ContractorEnrlApproval</td></tr><tr class=""><td class="slds-cell-wrap" style="vertical-align:top;">Process Approved Application</td><td class="slds-cell-wrap" style="vertical-align:top;">eucloudprogram__ProcessApplnApproval</td></tr></tbody></table>

## Application and Enrollment Flow Description

- A contractor selects Enroll on the Program Description page and begins filling out the required fields.
- Upon application submission, an Individual Application record is created along with Individual Application Item records (if applicable). Uploaded documents, if any, are stored as Notes & Attachments on the Individual Application.
    
    - In the Contractor Portal: the program FlexCard moves from the Available subtab to the Enrolled subtab with the tag In Review.
    - The Is Submitted By Third Party field is set to TRUE (because the contractor is a Partner User).
- During the Trigger Application Approval for Contractor (euccontractor\_\_ContractorEnrlApproval) process automation flow, the Individual Application Status is updated from Submitted to In Review and an Approval Request is generated.
- If the Approval Request is approved, a record is created in Program Enrollment using the Process Approved Application (eucloudprogram\_\_ProcessApplnApproval) Flow, determining the Enrollee Role among other updates. The contractor is now approved to operate in this program. Salesforce then performs these updates:
    
    - The Enrollee Role is determined by a formula which returns Contractor if Is Submitted By Third Party is TRUE and Submitted By Account Id matches ProgramEnrollment.AccountId.
    - In the Contractor Portal: The In Review tag is removed from the program FlexaCard because the application is approved.
- If the Approval Request is rejected, then no Program Enrollment record is created. To allow a reapplication, delete the Individual Application Item record(s) associated with the Individual Application.

## See Also

- [Set Up an Experience Cloud Site](https://help.salesforce.com/s/articleView?id=sf.products.networks_setup_maintain_communities.htm&type=5&language=en_US)
- [Lightning Design System Styling Hooks](https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/#site-main-content)
- [Lightning Design System Design Tokens](https://www.lightningdesignsystem.com/design-tokens/#site-main-content)

## Customize Portal Components

From the Experience Builder, you can customize the portal components such as the background and borders of the header, navigation tabs, links, icons, colors, and user profile dropdown colors.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-energy_utilities-264-0-0-production-enus/520849e5-9b41-4bae-b97b-d269cc2fce83/images/icon_note.png)

Note To add new programs and edit programs, go to the Programs tab of Program Management Console.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-ind-energy_utilities-264-0-0-production-enus/520849e5-9b41-4bae-b97b-d269cc2fce83/images/icon_note.png)

Note These components use placeholder URLs. Update to actual URLs<table class="slds-table slds-table_bordered slds-max-medium-table_stacked slds-m-bottom_small ">
                  <thead class="slds-text-title_caps ">
                    <tr><th class="slds-cell-wrap" scope="col" id="d28280e247">Component</th>
                    <th class="slds-cell-wrap" scope="col" id="d28280e249">OmniStudio FlexCard</th>
                  </tr></thead>
                  <tbody><tr class="">
                    <td class="slds-cell-wrap" data-label="Component" headers="d28280e247">Quick Actions: Upload License<p>Quick Actions: Upload Labour</p>
                    </td>
                    <td class="slds-cell-wrap" data-label="OmniStudio FlexCard" headers="d28280e249">EnergyUtiltiesCPQuickActions</td>
                  </tr>
                  <tr class="">
                    <td class="slds-cell-wrap" data-label="Component" headers="d28280e247">Program Details: Eligible Zip Codes<p>Program Details: Approved Energy Star Equipment</p>
                    </td>
                    <td class="slds-cell-wrap" data-label="OmniStudio FlexCard" headers="d28280e249">EnergyUtilitiesCPViewProgramDetailsChildCard</td>
                  </tr>
                  <tr class="">
                    <td class="slds-cell-wrap" data-label="Component" headers="d28280e247">Available Programs: Eligible Zip Codes<p>Available Programs: Approved Vendors</p>
                    </td>
                    <td class="slds-cell-wrap" data-label="OmniStudio FlexCard" headers="d28280e249">EnergyUtilitiesCPAvailableProgramChildCard</td>
                  </tr>
                  <tr class="">
                    <td class="slds-cell-wrap" data-label="Component" headers="d28280e247">Approved Program Details: Leads tab</td>
                    <td class="slds-cell-wrap" data-label="OmniStudio FlexCard" headers="d28280e249">EnergyUtilitiesCPLeads</td>
                  </tr>
                  <tr class="">
                    <td class="slds-cell-wrap" data-label="Component" headers="d28280e247">Approved Program Details: Closed tab</td>
                    <td class="slds-cell-wrap" data-label="OmniStudio FlexCard" headers="d28280e249">EnergyUtilitiesCPClosedLeads</td>
                  </tr>
                </tbody></table>To configure these components, open their respective FlexCards. See [OmniStudio FlexCards](https://help.salesforce.com/s/articleView?id=xcloud.os_omnistudio_flexcards_24388.htm&type=5&language=en_US).

1. Open the Contractor Portal in Experience Builder.
    1. From Setup, In the Quick Find box, enter All Sites, and then select **All Sites**.
    2. From the All Sites list, beside the Contractor Portal site, click **Builder**.
        
        Contractor Portal opens in Experience Builder.
2. Select a page.
    
    For example, to view the Available programs tab, select the **Programs** page.
3. To customize the header, click the header component.
    
    For example, the **Stacked Header** component contains the sample header image, User Profile menu, and the Overview and Programs navigation tabs.
    
    1. Under Background & Border colors, select the Image, background colors, and border colors.
    2. Under Links & Icons, select the color details for the navigation tabs.
    3. Under Dropdown Menus, select the color details for the User Profile menu.
4. Choose the OmniStudio FlexCard that you want to show.
    1. Select a Flexcard component in the site.
    2. In Flexcard Name, select the FlexCard that you want to show.
        
        To customize a FlexCard, clone a FlexCard and edit its properties. Alternatively, create a FlexCard and publish it to the Digital Experience site. When your cloned or new FlexCard is ready to be consumed by the Digital Experience site, you can select it from Flexcard Name.
5. Edit tabs in the Tab Layout.
    1. From the Pages menu, click **Programs.**.
        
        The Programs tab contains two subtabs in the Tab Layout component. The Available subtab shows all programs that are available for enrollment for the contractor. The Enrolled subtab shows the status of submitted applications.
    2. Select the **Tab Layout** component.
    3. In the Tab Layout menu, click **Add**.
    4. Click New Tab, and enter a name for the tab.
    5. To add a component to the new tab, click **Components**, and then drag the component to the new tab region.
        
        Some components may take a few minutes to load after moving them.
6. To confirm your changes to the Contractor Portal site, click **Publish**.