SharePoint Online - SLK WebParts: Installation and Setup

Important: Please remember to enable SameSite cookies in UniversitySite.  It's found on the Login Settings page in Global Settings inside the "Other Settings" section as show below.

There are two steps to install and setup the UniversitySite SLK WebParts. First, you must install the UniversitySite WebParts package as an app for SharePoint in your online instance of SharePoint. After you complete this installation, you can add the UniversitySite WebParts to any of your SharePoint pages and then set them up to connect to UniversitySite.

The SLK WebParts installer package is in a file named “university-site-web-parts.sppkg”.

There are 3 sections in this document:

• Section 1: Installing the UniversitySite WebParts into SharePoint Online.
• Section 2: Adding the UniversitySite PageViewer web parts to a SharePoint page and connecting them to UniversitySite.
• Section 3: Adding the UniversitySite Customizable web parts to a SharePoint page and connecting them to UniversitySite.

The Customizable web parts are a little different than the PageViewer web parts. While the PageViewer web parts allow you to embed a UniversitySite page in your SharePoint site, the Customizable web parts allow you to embed UniversitySite items in your SharePoint site and to pick and choose which items to show based on your customized settings.

Section 1: Installing the UniversitySite WebParts into SharePoint Online

First, you will need to open the “Apps for SharePoint” page in your instance of SharePoint Online. That URL is typically “https://XXX.sharepoint.com/sites/appcatalog/AppCatalog/Forms/AllItems.aspx” where “XXX” is the tenant name of your instance of SharePoint Online. Generally, “XXX” is your company’s domain name. If you cannot get there using this method. You can follow these steps to get there the hard way:

1. Go to “https://XXX-admin.sharepoint.com/” where “XXX” is the tenant name of your instance of SharePoint Online. Generally, “XXX” is your company’s domain name.
2. In the left panel, click on “More features”.
3. Scroll down until you see a section titled “Apps”, click on the “Open” button.
4. The first item should be named “App Catalog”, click on it.
5. Finally, click on “Apps for SharePoint”.

OK, now you should see this page either the easy way (using the URL) or the hard way (following all those clicks). All you need to do now is drag the file named “university-site-web-parts.sppkg” to the place on this page where it says “Drag files here to upload”.

After dropping that file into SharePoint Online, you will be prompted to “trust” the university-site-web-parts-client-side-solution. First, you can choose if you want to “Make this solution available to all sites in the organization”. Most people will want to check this box. And then second: click on the “Deploy” button to make the UniversitySite WebParts available for use in your SharePoint site.

YAY! The hard part is over. You have successfully installed the UniversitySite WebParts in your instance of SharePoint Online. Now go to Section 2 and/or Section 3 to add the UniversitySite WebParts to a SharePoint page and to connect them to UniversitySite.

Section 2: Adding the UniversitySite PageViewer web parts to a SharePoint page and connecting them to UniversitySite.

1. Create a new page or edit an existing page that you want to add the UniversitySite WebParts to. In this example, I will be creating a page showing the UniversitySite On-Demand courses. Click on the “+” button so you can add the UniversitySite PageViewer WebParts to the page.
2. First type “UniversitySite” into the search box so it’s easy to find what you’re looking for. Now, click on the “UniversitySite-PageViewer” to add it to the page.
3. Now we need to specify the settings for this Page Viewer so click on the “pencil” button.
4. First, we need to specify the URL to your instance of UniversitySite. If your UniversitySite is hosted in the cloud by us, your URL will be of the form “https://XXX.universitysite.com/UniversitySiteXXX” where you will replace both “XXX”s with your company domain name. In our example, we will use “demo” for “XXX”.
5. Finally, we can choose from the drop-down list named “Select the UniversitySite page to display”, whatever UniversitySite page we want to display on this page. In our example, we want the “LearningSite: On-Demand” page.
6. Now, you can just click on the “X” to close the settings panel and then click on the “Publish” button on the page. You did it! Reward yourself with a snickers bar!

Section 3: Adding the UniversitySite Customizable web parts to a SharePoint page and connecting them to UniversitySite.

The customizable web parts are a little different than the PageViewer web parts. While the PageViewer web parts allow you to embed a UniversitySite page in your SharePoint site, the Customizable web parts allow you to embed UniversitySite items in your SharePoint site and to pick and choose which items to show based on your customized settings.

1. Create a new page or edit an existing page that you want to add the UniversitySite WebParts to. In this example, I will be creating a page showing the Learning Activities feed items in UniversitySite. Click on the “+” button so you can add the UniversitySite-Customizable WebParts to the page.
2. First type “UniversitySite” into the search box so it’s easy to find what you’re looking for. Now, click on the “UniversitySite-Customizable” to add it to the page.
3. Now we need to specify the settings for this Customizable web part so click on the “pencil” button.
4. First, we need to specify the URL to your instance of UniversitySite. If your UniversitySite is hosted in the cloud by us, your URL will be of the form “https://XXX.universitysite.com/UniversitySiteXXX” where you will replace both “XXX”s with your company domain name. In our example, we will use “demo” for “XXX”.
5. Finally, we can choose from the drop-down list named “Select the UniversitySite items to display”, whatever types of UniversitySite items we want to display on this page. In our example, we want the “Learning Activity Feed” items.
6. Now before you close everything and see your new page, notice that there is an “Optional Settings” panel. This panel is different depending on which UniversitySite items you have chosen for display. Let’s take a look. Oh, pictures! Yes, we want to include pictures!
7. Now, you can just click on the “X” to close the settings panel and then click on the “Publish” button on the page. You did it! Reward yourself with another snickers bar!