# Personalized Re-ordering of Rows

> Source: https://docs.recombee.com/recipes/video/fully-personalized-homepage/personalized-re-ordering-of-rows-advanced

> For the complete documentation index, see [llms.txt](/llms.txt).

**Table of contents**

* [Introduction](#introduction)
* [Composite Recommendations Overview](#composite-recommendations-overview)
* [Segmentation Setup](#segmentation-setup)
* [Scenario Setup](#scenario-setup)
* [Filters](#filters)
* [Requesting Recommendations](#requesting-recommendations)

# Personalized Re-ordering of Rows

![](/img/recipes/video/personalized-re-ordering-of-rows-advanced.png) 

## Introduction

It is usually the cornerstone of the OTT platform homepage to show the picks from various (micro) genres. You can make these rows truly personalized: Pick the top genres for the particular user, and also show the most appealing assets inside these rows.  
The same approach is besides the homepage often also used in the category pages, such as Movies or Series.

With [Composite Recommendations](/scenarios#composite-recommendations), you can easily personalize both:

1. The **order of those rows** (so genres appear in the order each user is most interested in), and
2. The **content inside each row** (so that within each genre, the user sees the most relevant items).

## Composite Recommendations Overview

**Composite Recommendations** return both a _source entity_ (for example, a [genre Segment](/segmentations)) and a list of _results_ (items from that Segment) in a single response.

They are requested via the [**Composite Recommendation API endpoint**](/api#composite-recommendation).

In our case:

* **Source:** ID of the row, e.g. the _genre_ (Item Segment)
* **Result:** Items (videos) for that row

[![Genre Rows Setup](/img/gui/composite_videos_to_genre.png)](/img/gui/composite_videos_to_genre.png)

Because the source is personalized (which genre the user likes), and the result is personalized (which items within that genre they like), you get dynamic row ordering and item ordering in one request.

## Segmentation Setup

First, in the Admin UI you create a **Segmentation** of your catalog items by genre.

1. Navigate to **Segmentations** → **Create**.
2. Set _Segmentation Type_ to _Property-based_.
3. Select the item property (e.g., `genre`) which defines the genre classification.

![Admin UI - Segmentation Setup](/img/recipes/video/genre-rows-with-personalized-order-advanced-segmentation-setup.png)

After picking the property, a preview opens up and you can see what genres exist in your catalog and the number of items per genre.

![Admin UI - Segmentation Setup - Preview](/img/recipes/video/genre-rows-with-personalized-order-advanced-segmentation-setup-preview.png)

## Scenario Setup

Go to **Scenarios** → **Create Scenario**.

1. Choose a **Scenario ID**, e.g. `homepage-rows-and-videos`.
2. Set the **Recommendation Type** to **Composite** (see [Composite Recommendations](/scenarios#composite-recommendations)).
3. Then pick one of the **Templates**:  
   * [video:videos-from-top-genre-for-you](/recommendation_logics#video-videos-from-top-genre-for-you)  
   * [video:videos-from-top-segment-for-you](/recommendation_logics#video-videos-from-top-segment-for-you)  
depending on the nature of your rows and create the Scenario.

![Admin UI - Scenario Setup](/img/recipes/video/composite-hp-rows-videos.png)

## Filters

Available Assets (Global Settings)

You always want to recommend only movies, series, and episodes that are currently available to watch for your users. Therefore you need to apply a [**Filter**](/scenarios#filters) rule to allow only such assets.

As it would be tedious and prone to error to add this rule to all the Scenarios, this rule shall be added to the [**Global Settings**](/scenarios#global-settings), so it is always applied everywhere.

**The particular filter depends on how you specify such assets in your catalog:**

* If you have a **boolean property** that marks the asset as available you can use the predefined _Available items \[boolean\]_ rule.
* If you have a **timestamp property** that specifies when the asset is published (becomes available) you can use the predefined _Published items rule_.
* Or if you have a **licensing window (start date, end date)** you can use the predefined _Items within their licensing window_ rule.
* In every other case, you can create a [**custom filter rule**](/reql) to allow only the available assets according to your own logic.

![Admin UI - Global Settings - Filter](/img/recipes/video/filter.png)

## Requesting Recommendations

There are two ways to show multiple personalized rows in your application:

1. **Using the API Client**

Using an [API Client of your choice](/api_clients), send multiple **[Composite Recommendation requests](/api#composite-recommendation)** within a single **[Batch request](/api#batch)**, with the [distinctRecomms](/api#batch-param-distinctRecomms) parameter set to `true` to deduplicate content across rows.

Tip

Composite Recommendations automatically ensure distinct _source entities_ (genres), while the `distinctRecomms` flag removes duplicate videos between rows.

See [this example](/api#composite-recommendation-example-category-sections-with-reordering) for guidance on how to implement this approach in your programming language.

Once you receive the response, render each _source_ (genre) as a row title and populate it with the corresponding _results_ (videos) to create a fully personalized homepage layout.

1. **Using the Widget SDK**

For web applications built with HTML, CSS and JavaScript, the [Widget SDKs](/widget-sdks) support Composite Recommendations out of the box.

Place one widget per row on your page, each sending its own **[Composite Recommendation request](/api#composite-recommendation)**. Design the row title with the `SourceItemComponent` parameter and the videos inside it with `ItemComponent`.

Multiple widgets on one page are deduplicated automatically, for videos as well as for _source entities_ (genres).

For full code examples and in-depth guidance, see the relevant SDK documentation on Composite Recommendations:

* [Carousel Widget (JS)](/widget-sdks/carousel-widget-js#composite-recommendations)
* [Carousel Widget (React)](/widget-sdks/carousel-widget-react#composite-recommendations)
* [Grid Widget (JS)](/widget-sdks/grid-widget-js#composite-recommendations)
* [Grid Widget (React)](/widget-sdks/grid-widget-react#composite-recommendations)
* [Feed Widget (JS)](/widget-sdks/feed-widget-js#composite-recommendations)
* [Feed Widget (React)](/widget-sdks/feed-widget-react#composite-recommendations)