---
schema_version: "1"
id: a8e37ac1f8f8e42b8d937e43d966e162f14bbbeaa28a8d30d6082b0aaa7cc49f
title: Create and Display Archive Widget as a Custom Visualforce Component
collection: admin
version: current
locale: en-us
portal_url: https://docs.salesforce.com/admin/current/en-us/platform/264-0-0/archive_o_widget_as_custom_visualforce_component.md
canonical_url: https://help.salesforce.com/s/articleView?id=platform.archive_o_widget_as_custom_visualforce_component.htm&release=264.0.0&type=5
source_site: help.salesforce.com
content_type: documentation
content_hash: 68fd9e3558227a692c776b6a835542a3ab64a313a0583ec137c85a2d6937692a
description: Create and show the CustomListRelatedRecordArchivedWidget and CustomSingleRelatedRecordArchivedWidget as custom Visualforce components in the Archive managed package.
products:
  - Security
  - Salesforce Platform
release: "264"
---
# Create and Display Archive Widget as a Custom Visualforce Component

Create and show the CustomListRelatedRecordArchivedWidget and CustomSingleRelatedRecordArchivedWidget as custom Visualforce components in the Archive managed package.

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-own_from_salesforce-264-0-0-production-enus/8ac98673-ede2-4046-a41e-2d5c846f24ff/images/icon_note.png)

Note This content relates to Archive. For Salesforce Archive, see [Store Data Externally with Salesforce Archive](https://help.salesforce.com/s/articleView?id=xcloud.archive_overview.htm&type=5&language=en_US).

![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-own_from_salesforce-264-0-0-production-enus/8ac98673-ede2-4046-a41e-2d5c846f24ff/images/icon_note.png)

Note From Archive Package 21, the Preview Table feature in the Archive policy form no longer controls the root layout setting. This feature has been deprecated.

The steps outlined are necessary only if you're creating a widget for objects that aren't included in the managed package. If this doesn't apply to your configuration, ignore these steps.

To create the Archive Widget:

1. To open the dropdown menu, click the Settings icon.
2. Select **Setup**.
3. Enter Visualforce Pages in the Quick Find box.
4. Click **New**.
    
    In the Page Information section, enter a name for the new Visualforce page that references the specific object.
    
    ![Note](https://sf-zdocs-cdn-prod.zoominsoftware.com/tdta-platform-own_from_salesforce-264-0-0-production-enus/8ac98673-ede2-4046-a41e-2d5c846f24ff/images/icon_note.png)
    
    Note Use underscores instead of spaces for the Visualforce page name.
5. In the Visual Markup section, insert this code into the `CustomListRelatedRecordArchivedWidget` body.
    
    ```
    <apex:page standardController="Account">
    <apex:includeLightning />
    <div id="lightning" />
    <div id="showErrornotSupported"></div>
    <style>
    lightning-breadcrumb.slds-breadcrumb__item {
    text-align: center !important;
    }
    .toastModal {
    height: 4rem !important;
    position: fixed !important;
    top: 0rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100000 !important;
    }
    </style>
    <script>
    let lwcArchiverApp = "OB_Archiver:lwcWrapperAppForVisualforce";
    let widgetComp = "OB_Archiver:customRelatedListResults";
    $Lightning.use(lwcArchiverApp, function () {
    $Lightning.createComponent(widgetComp,
    {
    recordId: "{!Account.Id}",
    objectApiName: "Account",
    defaultObjects:["Case","Task","ContentDocument","Opportunity"]
    },
    "lightning",
    function (cmp) {
    }
    );
    });
    </script>
    </apex:page>
    ```
6. In the Visual Markup section, insert this code into the `CustomSingleRelatedRecordArchivedWidget` body.
    
    ```
    <apex:page standardController="Account">
    <apex:includeLightning />
    <div id="lightning" /></div>
    <div id="showErrornotSuported"></div>
    <style>
    lightning-breadcrumb.slds-breadcrumb__item {
    text-align: center !important;
    }
    .toastModel {
    height: 4rem !important;
    position: fixed !important;
    top: 0rem !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    z-index: 100000 !important;
    }
    </style>
    <script>
    let lwcArchiverApp = "OB_Archiver:lwcWrapperAppForVisualforce";
    let widgetComp = "OB_Archiver:CustomRelatedSingleResults";
    $Lightning.use(lwcArchiverApp, function () {
    $Lightning.createComponent(widgetComp,
    {
    recordId: "{!Account.Id}",
    objectApiName: "Account",
    defaultChildObject:"ContentDocument"
    },
    "lightning",
    function (cmp) {
    }
    );
    });
    </script>
    </apex:page>            
    ```
7. After making necessary adjustments, click **Save**.

- **[Add the Archive Widget to Page Layout in Salesforce Classic](https://help.salesforce.com/s/articleView?id=platform.archive_o_widget_as_custom_visualforce_component.htm&release=264.0.0&type=5)**  
    Add a Archive managed package component, also known as a widget, to Lightning experience record pages in Salesforce Classic.

## Add the Archive Widget to Page Layout in Salesforce Classic

Add a Archive managed package component, also known as a widget, to Lightning experience record pages in Salesforce Classic.

1. In Setup, go to the object's layout.
2. Click **Edit Layout**.
3. Create a section in the object layout.
4. From the Components menu, select **Visualforce Page**.
5. In Section Properties, select **CustomListRelatedRecordArchivedWidget** or **CustomSingleRelatedRecordArchivedWidget**, or both.
6. Enter a Section Name for the new section.
7. Click the **Detail Page** checkbox and select **1-Column**.
8. Drag the page to the new section.
9. Click the **Properties** icon on the Visualforce page.
10. Set the Height to 500.
11. Turn on the **Show scrollbars** option.
12. Click **Save**.
    
    The new widgets are now visible on the page layout.