Example - Displaying a SharePoint picture library

✖
Copy to clipboard

The following example walks you through a simplified process of configuring a SharePoint connection and displaying 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 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 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




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




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




@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>

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

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

Additionally, you can enable your content editors to edit the SharePoint library 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 the content of the library in the SharePoint application.