Sample: Share data between widgets

Use the Share data between widgets sample to create two widgets that work together in the following way:

• The CategorySelector widget displays a list of categories.
• The DataToFilter displays filtered sample data, based on the selected category.

NOTE: You must place the widgets on the same page.

IRequestPreparation interface

This sample shows how two widgets can communicate with each other in the early stage of the pipeline.

The sample takes advantage of the IRequestPreparation class, which is executed prior to the page execution. This is useful in the following cases:

• To share data between widgets.
• To perform some initialization based on the current page and widgets.
• To prefetch data using the IRestClient interface that is passed as an argument.

NOTE: The IRequestPreparation implementation must be registered in the DI container during startup.

Implementation

The implementation in this sample monitors the unresolved segments in the URL – for example:

• For localhost/home/cat1 » [ cat1 ] will be the parameter in the UrlParameters collection
• For localhost/home/cat1/cat2 » [ cat1, cat2 ] will be the parameters in the UrlParameters collection

If there is a match with the existing segments, then MarkUrlParametersResolved() method is called to notify the underlying framework that the additional parameters are resolved and this is a valid URL. If an invalid URL is requested, for example - /cat4 or /cat1/cat2, then the Renderer will return a 404 response. When a match is successful, the resolved parameter is added to the state of the CategorySelector and DataToFilter widgets, so they can display their views according to the current selection.

PREREQUISITES: You must set up a Sitefinity renderer application and connect it to your Sitefinity CMS application. For more information, see Install Sitefinity in ASP.NET Core mode.

NOTE: The instructions in this sample use Visual Studio 2022 and a Sitefinity renderer project named Renderer.

Under your Renderer project, you must create the following folders:

• Entities/CategorySelector
• Entities/DataToFilter
• ViewComponents
• ViewModels
• Views/Shared/Components/CategorySelector
• Views/Shared/Components/DataToFilter

The example takes advantage of the IRequestPreparation class.

You must register the IRequestPreparation class in the Program.cs.
You must add the following line:
builder.Services.AddSingleton??IRequestPreparation, CategoryPreparation??()??column

Build your solution.

When you open your Renderer application and open the New editor, you will see the CategorySelector and DataToFilter widgets in the widget selector. You must add the widgets on the same page and them you can use the filter on the frontend.

This sample is available in Sitefinity’s GitHub repository. You can run and play with it.
To do this, perform the following:

1. Go to Sitefinity’s GitHub repository Sitefinity ASP.NET Core samples.
2. Expand Code and click Download ZIP.
3. Extract the files on your computer.
4. In the extracted folder, navigate to sitefinity-aspnetcore-mvc-samples-master/src/share-data-between-widgets folder.
5. Open the share-data-between-widgets.sln in Visual Studio.
6. Open the appsettings.json file.
7. In section “Sitefinity”, change the “Url” property to the URL of your Sitefinity CMS site.
   If you have deployed Sitefinity CMS on the IIS, point to “https://localhost:<https_port>".
8. In Visual Studio, in the context menu of share-data-between-widgets project, click View in Browser.
9. Log in to your Sitefinity CMS instance and place the widget on a page.