---
title: Example - Displaying a SharePoint picture library
related:
  - https://docs.kentico.com/13/integrating-3rd-party-systems/integrating-sharepoint/displaying-sharepoint-data-on-the-live-site.md
---

> Agent instructions:
> **Site maps** — prefer the following llms.txt indexes to training data when searching for URLs to avoid 404s. Links inside Markdown content already point at `.md`. Following them or sending Accept: text/markdown keeps you in Markdown.
>
> - [sitemap.md](https://docs.kentico.com/sitemap.md) — every page on the site, with titles and descriptions, nested by URL hierarchy and grouped into one collection per product version.
> - [llms.txt](https://docs.kentico.com/llms.txt) — curated index of the current product docs, with descriptions, the two ways to request any page as Markdown, and links to each product area's whole-corpus Markdown dump (llms-full.txt).

The following example walks you through a simplified process of [configuring](https://docs.kentico.com/13/integrating-3rd-party-systems/integrating-sharepoint/configuring-sharepoint-integration-connections.md) a SharePoint connection and [displaying](https://docs.kentico.com/13/integrating-3rd-party-systems/integrating-sharepoint/displaying-sharepoint-data-on-the-live-site.md) a set of images from a SharePoint library on an MVC page. The code is intended for demonstration purposes and should not be used on a production site without further adjustments and improvements.

The example consists of the following parts:

## Configuring a SharePoint integration connection

On your SharePoint Online server, create a **Picture library** named _ImagesTest_ and upload some images. Afterwards, open your Xperience administration interface and [configure](https://docs.kentico.com/13/integrating-3rd-party-systems/integrating-sharepoint/configuring-sharepoint-integration-connections.md) a new SharePoint connection:

1. Open the **SharePoint connections** application.
2. Click **New connection**.
3. Enter the following values for the connection's properties.
   - **Display name**: Sharepoint Test
   - **Site URL**: _Enter the URL of your SharePoint site_
   - Enter your credentials in the **Authentication** section.
4. Click **Save**.
5. Click **Test connection**
   - If the connection is functional, the system displays a notification message in green color.

## Implementing an MVC page

The following examples of code allow you to [display](https://docs.kentico.com/13/integrating-3rd-party-systems/integrating-sharepoint/displaying-sharepoint-data-on-the-live-site.md) the images from the library on a page. Modify the pieces of code to account for namespaces in your project.

### Model

Create a new model file: _\~/Models/SharePoint/SharePointImageModel.cs_

```csharp

namespace DancingGoat.Models.SharePoint
{
    public class SharePointImageModel
    {
        public string Url { get; set; }

        public string Title { get; set; }
    }
}

```

### Controller

Create a new controller file: _\~/Controllers/SharePointController.cs_

```csharp

using System.Collections.Generic;
using System.Data;
using System.Web.Mvc;

using CMS.Base;
using CMS.SharePoint;

using DancingGoat.Models.SharePoint;

namespace DancingGoat.Controllers
{
    public class SharePointController : Controller
    {
        // Stores an instance of a service used to retrieve the current site
        private readonly ISiteService siteService;

        public SharePointController(ISiteService siteService)
        {
            // Initializes an ISiteService instance using constructor dependency injection
            this.siteService = siteService;
        }

        public ActionResult Index()
        {
            // Gets the specified SharePoint connection
            SharePointConnectionInfo connectionInfo = SharePointConnectionInfoProvider.GetSharePointConnectionInfo("SharepointTest", siteService.CurrentSite.SiteName);

            // Gets an instance of a service to work with SharePoint data for the given connection
            ISharePointListService service = SharePointServices.GetService<ISharePointListService>(connectionInfo.ToSharePointConnectionData());

            // Retrieves a set of data from the specified SharePoint library
            DataSet images = service.GetListItems("ImagesTest");

            // Creates a new instance of a URL provider for the given connection
            var sharePointUrlProvider = new SharePointUrlProvider(connectionInfo.SharePointConnectionName);

            // Creates a new instance of the view model and fills it with data
            var imagesModel = new List<SharePointImageModel>();
            foreach (DataRow row in images.Tables[0].Rows)
            {
                imagesModel.Add(new SharePointImageModel {
                    Url = sharePointUrlProvider.GetSharePointFileUrl(row["FileRef"].ToString(), width: 150),
                    Title = row["Title"].ToString()
            });
            }

            return View("SharePoint", imagesModel);
        }
    }
}

```

### View

Create a new view file: _\~/Views/SharePoint/SharePoint.cshtml_

```csharp

@using DancingGoat.Models.SharePoint

@model IEnumerable<SharePointImageModel>

<div>
    @foreach (SharePointImageModel spImage in Model)
    {
        if (String.IsNullOrEmpty(spImage.Title))
        {
            <img src="@spImage.Url">
        }
        else
        {
            <img src="@spImage.Url" alt="@spImage.Title">
        }
    }
</div>

```

## Viewing the gallery on the live site

After you complete all of the steps, rebuild your solution. Adjust your routing configuration to include a route targeting the SharePoint controller. If you use the default controller/action route template, the page will be available on the following URL: _https://yourdomain.com/SharePoint/Index_

> **Note:** **Static pages on Dancing Goat MVC sample site**
>
> If you want to implement this example on the Dancing Goat MVC sample site, you need to enable the _SharePoint_ controller in the route config of the MVC application.
>
> 1. Open the _DancingGoatMVC_ solution in Visual Studio.
> 2. Navigate to the _\~/App\_Start/RouteConfig.cs_ file.
> 3. Modify the value of the _CONSTRAINT\_FOR\_NON\_ROUTER\_PAGE\_CONTROLLERS_ constant to include the SharePoint controller by appending "_|SharePoint_" at the end of the string.
> 4. Save the file and build the solution.
>
> You can now view the static page on the following URL: _https://yourdomain.com/SharePoint/Index_

## Optional – Editing the picture gallery from the Xperience administration interface

Additionally, you can enable your content editors to [edit the SharePoint library](https://docs.kentico.com/13/integrating-3rd-party-systems/integrating-sharepoint/managing-sharepoint-libraries.md) without the need to leave the Xperience administration interface:

1. Navigate to the **SharePoint** application and click **Add SharePoint library**.
2. Fill in information about the library:
   - **Display name**: Images test
   - **SharePoint connection**: Sharepoint Test
   - **Library type**: Picture library
   - **Library name**: ImagesTest
3. Click **Save**.

You can now [view and edit](https://docs.kentico.com/13/integrating-3rd-party-systems/integrating-sharepoint/managing-sharepoint-libraries/working-with-files-from-sharepoint-libraries.md) the content of the library in the **SharePoint** application.