Step 3: Create a Lightning Web Component for the Content Sync Panel

To make the content sync panel, create a Lightning web component that displays the content sync buttons and the status of the sync. The Lightning web component must contain an HTML file, a JavaScript file, and an XML file for configuration.

For information on how to create a Lightning web component, see Lightning Web Components Dev Guide: Create Lightning Web Components.

Create these files as part of your Lightning web component.

• HTML

  • Create the page layout, static text for the interface, and display buttons that call the JavaScript methods when clicked.

    • Reference: Lightning Web Components: HTML Templates
    • Sample: HTML Lightning Web Component Sample

• JavaScript

  • Define the methods that call the Apex methods from Step 2: Write Apex to Send an HTTP Call to the Connected App.

    • Reference: Lightning Web Components: Component JavaScript File
    • Sample: JavaScript Lightning Web Component Sample

• XML

  • Configure the Lightning web component so that it can be used as a tab in Salesforce.

    • Reference: Lightning Web Components: Component Configuration File
    • Sample: XML Lightning Web Component Sample

j

Get Started

Custom Content Types

Salesforce CMS Extensions

Managed Content GraphQL API

Display Salesforce CMS Content

Display CMS Content in B2C Commerce Cloud

Display CMS Content in Experience Builder Sites

Import and Display CMS Content in Marketing Cloud

Access CMS Content with a Connected App

Create a Content Selector for External Content Providers

Create a Panel to Initiate Content Sync

Step 1: Configure a Remote Site

Step 2: Write Apex to Send an HTTP Call to the Connected App

Step 3: Create a Lightning Web Component for the Content Sync Panel

HTML File Sample

JavaScript File Sample

XML File Sample

Step 4: Add a Tab for the Content Sync Panel

Connect Your External CMS to Your Experience Builder Site