How to Create a Custom Archive Visualforce Component

The following information is relevant for Orgs that use Salesforce Classic.

The following applies to CustomListRelatedRecordArchivedWidget and the CustomSingleRelatedRecordArchivedWidget.

From Package 21 onward, the Preview Table feature from the New Archive Policy form no longer controls the root layout setting. (deprecated). The RelatedRecordArchivedWidget is not customizable.
 We recommend using the two above-mentioned widgets. However, all steps are defined below. 
 

These steps are only required if you create a widget for objects not included in the managed package. If irrelevant to your setup, you may skip this step.

1. At the top-right of the page, click the Settings icon to open the drop-down menu, and select Setup.

2. Filter by entering Visualforce Pages in the Quick Find.

3. Click New.

4. In the Page Information section, create a new Visualforce page, and name it appropriately to reference the specific object (with no spaces).

5. In the Visual Markup section, insert the following code into the body: 

For CustomListRelatedRecordArchivedWidget:

<apex:page standardController="Account">
    <apex:includeLightning />
    <div id="lightning" />
    <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:customRelatedListResults";
            $Lightning.use(lwcArchiverApp, function () {
            $Lightning.createComponent(widgetComp,
                {
                    recordId: "{!Account.Id}",
                    objectApiName: "Account",
                    defaultObjects:["Case","Task","ContentDocument","Opportunity"]
                },
                "lightning",
                function (cmp) {
                }
            );
        });
    </script>
</apex:page>

• Change the standardcontroller, objectApiName and recordId to the desired parent object.
• The defaultObjects are not hard coded and can be adapted to include up to 10 objects.
   

For CustomSingleRelatedRecordArchivedWidget:

<apex:page standardController="Account">
    <apex:includeLightning />
    <div id="lightning" />
    <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:"Case"
                },
                "lightning",
                function (cmp) {
                }
            );
        });
   
      
    </script>
</apex:page>

For RelatedRecordArchivedWidget *(supported up to version 21):

<apex:page showHeader="false" standardController="Account" docType="html-5.0" >
<OB_Archiver:SearchResultWidget recordId="{!Account.Id}" object="Account"> 
</OB_Archiver:SearchResultWidget> 
</apex:page>

6. Replace the marked parentObject to be the object of the Visualforce page.

7. Click Save.

Adding the Widget to page layout in Salesforce Classic:
 

1. Open the object layout page in the Setup and click Edit Layout.
   

2. Create a new section in the object layout.

3. Select the Visualforce page from the components option. 
    

4. Complete the Section Properties adding either the CustomListRelatedRecordArchivedWidget and/or CustomSingleRelatedRecord Archived Widget 

5. Enter a Section Name.
   

6. Check the Detail Page checkbox, and select 1-Column

7. Drag the Own page to the new section.
   

8. Click the Visualforce page properties button:

   1. Set the Height to 500 

   2. Enable the Show scrollbars option.
      

9. Save the page layout.
   The new widgets are displayed.