## Introduction

### Goal

Save time and avoid copy-pasting when updating your websites by configuring a content-driven component so that you can share documents between channels.

### Prerequisites

Make sure to follow the [Content-Driven Component](🔗) tutorial before starting this one.

Keep the [Site Management API](🔗) reference documentation and the documentation on how to [Configure a Content Selector or Drop Down Field Editor UI](🔗) handy.

The tutorial assumes you have at least two channels [created](🔗) using the [Reference SPA](🔗) template. The example used contains three [translated](🔗) channels (_MyBusiness_Denmark_, _MyBusiness_France_, and _MyBusiness_Germany_):

## Configure the Banner Carousel Component for Content Reuse

In this tutorial you are going to [configure](🔗) the Reference SPA's _Banner carousel_ shared component to allow picking banner documents outside the current channel's content root folder.

Please note that the Reference SPA channel template contains two versions of the Banner carousel component: a [page-specific component](🔗) and a [shared component](🔗). In this tutorial you are going to use the shared component.

Before you start configuration, check what the document picker looks like right now. Open one of the channels in the _Experience manager_, click on the large banner carousel component at the top of the homepage, and pick a banner document, you'll notice that the picker is restricted to the content folder for the current channel:

### Create a Development Project

To be able to modify the Banner carousel component's configuration, you need a [development project](🔗). Open the _Projects_ app, create a new development project, and add all the channels you want to set up for content sharing.

### Configure the Picker Root Path

Open the _Site development_ app, select one of the channels in your development project, and open the _Components_ tab.

Select the _Reference SPA Banner carousel_ component, select the _Properties_ tab, then click on the edit icon for the _document1_ property.

Scroll down to the bottom of the property editing dialog. You'll see that the _Picker root path_ field is empty and the _Relative_ checkbox is checked:

This is the default configuration and means that the document picker will allow selecting documents in the current channel's root folder or one of its subfolders.

In _Picker root path_, enter "/content/documents". This is the internal repository path of the parent folder of all the "root" folders visible in the _Content_ app.

Uncheck the _Relative_ checkbox.

Click _Save_ to persist the changes.

The change of the folder path configuration happens on the most granular level: a property of a singular component belonging to a single channel. For all _Reference SPA Banner carousel_'s slides to display the "root" path, you need to configure each document property separately or use our Site Management API to apply the change to all components.

If you already have documents displayed on a page and then you change the component configuration, you need to pick those documents again to update the links.

### Confirm Content Sharing is Enabled

Browse to the _Experience manager_ and open the channel in which you modified the picker path. Make sure your development project is selected in the _For project_ dropdown. Add the selected page to the project.

The modified configuration only applies to newly added Banner carousel components, so add a Reference SPA Banner carousel shared component to the page. Click inside the component to open its configuration and pick a document for the first banner.

The document picker should now show all your content root folders in the left column and allow you to pick documents from any of them:

### Apply Changes in All Document Properties of the Banner Carousel Component in All Channels

So far, you have only configured a single banner document property of the Banner carousel component in single channel for content sharing. To apply the same change to all 5 banner document properties in all of your channels, you'll want to use the [Site Management API](🔗) rather than the _Site development_ app's UI.

Use a PUT request to the [components endpoint](🔗) (make sure to substitute your Content hostname and your channel name and development project ID):

Use the following JSON payload:

Repeat the above request for each of your channels.

Remember that the changes won't apply to components that are already added to any pages in your channels so you'll have to delete and re-add them.

### Use a Shared Content Folder (Optional)

Depending on how you manage your channels and content, it may be a good idea to create a separate content root folder for shared documents that are reused across different channels.

Open the _Content_ app and click on _+ Add root folder_ to create a new root folder called "Shared":

Within the new "Shared" root folder, create a subfolder called "Banners":

Create some Banner documents in the new shared banners folder (or copy/move some from your channel folders).

Since your Banner carousel components are already set up to pick banner documents from the entire content repository, you can pick from the new shared banners folder right away:

Alternatively, you may want to only allow picking banner documents from the shared banners folder. In that case, configure the _Picker root path_ for each banner document property to "/content/documents/shared/banners". This is the internal repository path for the Shared/Banners folder.

This results in the document picker only showing the shared banners folder and restricting selection to that folder:

## Additional links

  1. Save time and automatically recreate a page's structure using [page templates](🔗).

  2. Simplify multi-site, multi-language content management thanks to [folder linking](🔗).