> For the complete documentation index, see [llms.txt](https://docs.intranet.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.intranet.ai/sharepoint-intranet/components/sliding-news.md).

# Sliding News

A customizable news banner that can be shown across multiple pages of the SharePoint intranet.

## What is Sliding News

This customizer allows you to **display the latest intranet news in a sliding banner** that is fully customizable in its colors, position and content. The news items scroll inside the banner, giving users an immediate and dynamic overview of what is happening in the company.

Unlike a classic news web part, Sliding News **is not added to a single page**: the same banner can be **shown on several pages at the same time** and, if needed, **excluded from specific pages**. This makes it ideal for highlighting important communications across the whole intranet without having to configure the web part page by page.

As with [Company News](https://docs.intranet.ai/sharepoint-intranet/components/company-documents), Sliding News lets you **categorize news through metadata (tags)** and **target news to specific audiences**, so that each user sees the content that is most relevant to their activities. It also supports **multilingual intranets**, allowing you to show only the news translated into the language of the page.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FVTSlSZLvpshf4w9684pW%2Fpresentation.png?alt=media&amp;token=742c1a77-0689-41e6-a41a-e367a8fa4149" alt=""><figcaption></figcaption></figure></div>

***

## Activate Sliding News on the intranet

Sliding News is a **SharePoint customizer**: it is already part of the intranet pages, so you **don't need to add it to a page as a web part** or edit any page. To activate the banner, you just need to configure it through a dedicated **SharePoint list**, where each item corresponds to one banner. The pages where the banner appears are defined directly in the list item.

*

```
<div align="left"><img src="https://docs.intranet.ai/~gitbook/image?url=https%3A%2F%2F2718234637-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FriXlnuemuParrCf7Uotu%252Fuploads%252FrJj8SZIOm3KoTIhiTpkf%252FSite-contents.png%3Falt%3Dmedia%26token%3Ddecd6eb1-0761-499d-a103-22dce63bec92&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=174a491fecad66bf8df77ad3952dff9d&#x26;sv=3" alt="" height="351" width="318"></div>
```

* First of all, click on the **Settings** icon on the top right of the page, then click on **Site contents**.

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FfFKVnsxAYtmpkkXlWVeB%2Flist.png?alt=media&amp;token=c59044ba-50aa-4ee3-8699-e4367a7b9b72" alt=""><figcaption></figcaption></figure>

* Scroll down and select the **Sliding news** list.

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FfFKVnsxAYtmpkkXlWVeB%2Flist.png?alt=media&amp;token=c59044ba-50aa-4ee3-8699-e4367a7b9b72" alt=""><figcaption></figcaption></figure>

* Click on **New** at the top of the list to create a new item.

<figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FasWM7RZSqFYKrX4Emknf%2FnewItem.png?alt=media&amp;token=e7b531e2-34f9-4f1f-ab62-e96721644a57" alt=""><figcaption></figcaption></figure>

* In the **Content Type** field, make sure **SlidingNews** is selected.
* Fill in the fields of the form as indicated in the [Configuration](#configuration) section.
* Click on **Save**: the banner will be activated and will automatically appear on the pages you have selected.

***

## Configuration

1. [Banner settings](#banner-settings)
2. [Data sources](#data-sources)
3. [Filters settings](#filters-settings)
4. [Pages settings](#pages-settings)
5. [Display settings](#display-settings)
6. [Color settings](#color-settings)

### Banner settings

These settings define the basic information of the banner and where it is placed on the page.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F5lVx3cFGTUMPQ5aNmmSl%2FcontentType-title-position.png?alt=media&amp;token=be529485-c4e5-4ea5-bd21-6b4ea83745cf" alt=""><figcaption></figcaption></figure></div>

* **Content Type**: select **SlidingNews**. This content type contains all the fields needed to configure the banner.
* **Title**: enter a name to identify the banner within the list (for example, "Test" or "Homepage banner"). This name helps you recognize the configuration when you have several banners.
* **Banner position** (required): select where the banner will be displayed on the page, **at the Top or at the Bottom** of the page.

### Data sources

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F4ekR5HKvhnzsWZDoQX7j%2FdataSources.png?alt=media&amp;token=89f2e894-44d1-477a-a6db-51c52aa03293" alt=""><figcaption></figcaption></figure></div>

* **News sites**: enter the URLs of the sites from which you want to take the news to show in the banner. If you want to use more than one site, **separate the URLs with a pipe (|)**, without spaces between URLs and pipes.
* **Use hub site**: you can choose to take news from the whole hub. If you select **Yes**, the **News sites** field will be ignored and the search will be made through all the sites associated with the hub site.

### Filters settings

Fill out this section if you need to set which news each user will see in the banner:

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FDYFyMucMtenuEzIE49Gq%2FfilterSettings.png?alt=media&amp;token=41cb54ac-02a6-4233-828e-49a43450a252" alt=""><figcaption></figcaption></figure></div>

* **News tags filter**: enter the internal name of the managed property preceded by **owstaxId**, then a colon (:) followed by the value you want to filter by. To use more than one filter, separate them with a pipe (|), without spaces. For example: `owstaxIdNewsDepartment:IT|owstaxIdNewsDepartment:Marketing`. To find the managed property and its values, see [Access the term store](#access-the-term-store) below.
* **Filter by audience**: if you **enable** this option, news will be visible only to the targeted groups. If you **disable** it, all news will be accessible to everyone within the intranet, regardless of their group or role.
* **Max news to show**: indicate the maximum number of news you want to display in the banner (for example, 3).
* **Hide untranslated news**: on translated pages, by default the banner also shows news that hasn't been translated. This option allows you to display only the news translated into the language of the page. If you **disable** it, untranslated news will also be visible, appearing in their original language.

### Display settings

In this section, you can define how the news are shown inside the banner, their order and the interaction options for a tailored user experience.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2F9opXoVHmTPklD2eRMlNX%2FdisplaySettings.png?alt=media&amp;token=48d3ebcd-15bd-410e-a3b7-1e89a55d2cf4" alt=""><figcaption></figcaption></figure></div>

* **Open news in new tab**: if you enable this option, clicking on a news item will open it in a new browser tab. If you disable it, the news will open on the current page.
* **Order field name**: enter the internal name of the field used to sort the news (for example, the publication date field).
* **Order ascending**: if you enable this option, the news will be sorted in ascending order based on the field set above. If you disable it, they will be sorted in descending order (for example, from the most recent to the oldest).
* **Title all caps**: if you enable this option, the news titles will be displayed in capital letters.
* **Show description**: if you enable this option, the content of each news item will be displayed next to its title.

### Pages settings

These settings define on which pages of the intranet the banner is displayed. If these fields are left blank, the banner will appear in all pages of the site.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FfcQQXh0rCWNuFnqh0iQx%2FpagesSettings.png?alt=media&amp;token=2292b6ec-8f18-436c-a9f5-c4ebc7cc524e" alt=""><figcaption></figcaption></figure></div>

* **Pages to include**: enter the URLs of the pages where you want the banner to appear. Separate the URLs with a pipe (|), without spaces between URLs and pipes.
* **Pages to exclude**: enter the URLs of the pages where the banner must **not** be displayed, using the same format. This is useful when the banner is shown on a whole group of pages but you want to hide it on some of them.

### Colors and Active settings

You can customize the look of the banner so that it is aligned with your brand. If you leave these fields blank, the banner will use the intranet theme colors. All color fields accept **any CSS format**: keyword (e.g. `white`), hex (e.g. `#1E3A8A`), rgb or rgba (e.g. `rgba(30, 58, 138, 0.9)`). Finally, you can decide whether or not to activate the banner.

<div align="left"><figure><img src="https://2718234637-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FriXlnuemuParrCf7Uotu%2Fuploads%2FXVgJDWv06a0UkrPTUz45%2FcolorSettings.png?alt=media&amp;token=41367ef9-b79f-4d61-bd47-4c1fc7237606" alt=""><figcaption></figcaption></figure></div>

* **Banner title color code**: set the color of the banner title.
* **News text color code**: set the color of the news text.
* **Background color code**: set the background color of the banner.
* **Is active**: if you enable this option, the banner will be active and appear according to the specifications you indicated in the configuration settings; otherwise, it will not be shown.

***

## Access the term store <a href="#access-the-term-store" id="access-the-term-store"></a>

To access the **Term store**, take the following steps:

1. Click on the **Settings** icon at the top right of the page, then click on **Site information**.

<div align="left"><img src="https://docs.intranet.ai/~gitbook/image?url=https%3A%2F%2F2718234637-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FriXlnuemuParrCf7Uotu%252Fuploads%252FXtv0rDl6626xtCelTtnA%252Fimage.png%3Falt%3Dmedia%26token%3D0605e144-ed92-45a1-b69d-c7ecbd47dd90&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=b6e1c40c79839096eba4bcefe87f25a7&#x26;sv=3" alt=""></div>

2. Click on **View all site settings**.

<div align="left"><img src="https://docs.intranet.ai/~gitbook/image?url=https%3A%2F%2F2718234637-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FriXlnuemuParrCf7Uotu%252Fuploads%252FnevEP9YBYN3QTPpdKdaU%252Fimage.png%3Falt%3Dmedia%26token%3Dda5e30a0-e867-4b74-b920-59058fb360a4&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=a9a0f97172ed02feb6a98470ed4401b9&#x26;sv=3" alt=""></div>

3. Under Site Administration, click on **Term store management**.

<div align="left"><img src="https://docs.intranet.ai/~gitbook/image?url=https%3A%2F%2F2718234637-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FriXlnuemuParrCf7Uotu%252Fuploads%252FrBpBEN5CMpbgWmDyJgBn%252Fimage.png%3Falt%3Dmedia%26token%3D0faa8e88-1a5c-446d-9a69-5e9cb8e87a68&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=744efc2165e404000acad26904c44777&#x26;sv=3" alt=""></div>

4. You will land on the **Term store**, which is the area where you can create **term sets** and **terms**, i.e. **tags** to categorize your content. Here you need to copy the unique identifier of the taxonomy, which is a code composed of numbers, letters and hyphens.

<div align="left"><img src="https://docs.intranet.ai/~gitbook/image?url=https%3A%2F%2F2718234637-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FriXlnuemuParrCf7Uotu%252Fuploads%252FuPt39OmseA3BGxxRywNF%252FNews%2520IAI%25208%2520%281%29.png%3Falt%3Dmedia%26token%3Df81cab01-9294-419f-8029-ec44b7f133cf&#x26;width=768&#x26;dpr=3&#x26;quality=100&#x26;sign=27ae26ef62c1af45c2d9bf7863ffcba7&#x26;sv=3" alt=""></div>

If you want to discover more about filters and the Term store management, [click here. ](https://docs.intranet.ai/configuration/creation-of-tag-systems-for-news-and-documents)

![](https://docs.intranet.ai/~gitbook/image?url=https%3A%2F%2F2718234637-files.gitbook.io%2F%7E%2Ffiles%2Fv0%2Fb%2Fgitbook-x-prod.appspot.com%2Fo%2Fspaces%252FriXlnuemuParrCf7Uotu%252Fuploads%252F9iisadxA5pjL4u25Rp3v%252F2023-12-21%252011_29_26-News%2520Archive%2520-%2520intranet.ai%2520docs.png%3Falt%3Dmedia%26token%3D41dc40f8-62c7-497a-af90-6b0abf3e646a\&width=768\&dpr=3\&quality=100\&sign=79dad0e87898bd22ed1171deea621c4d\&sv=3)
