Client Web part using SharePoint Provider Hosted Add-in/App


In this post I will explain the process to create the client web part/Add-In part using SharePoint Provider Hosted Add-In model and read the available lists in the current site.

For this project, you need Visual Studio 2015/2013 with Office Developer Tools installed and SharePoint Developer site. You can get a SharePoint developer site using an ‘Office 365 Trial’ subscription.

Create a New Project in Visual Studio 2015/2013 and select App for SharePoint 2013 or SharePoint Add-In template. Click OK.


Enter the developer site collection URL and select Provider hosted


Login to Office 365 site, Here I am using Office 365


Now the solution will be created with the ‘SharPointClientWebPart’ and the ‘SharePointClientWebPartWeb’ projects. Right click the ‘SharePointClientWebPart’ project, Add ‘New Item’ and select the ‘Client Web Part (Host Web)’. Name it as ‘ListsWebPart’ and Click ‘Add’


Select the default option to create the new web part page. You can use the existing default.aspx page as well. Click ‘Finish’.


With this option, new ‘ListsWebPart.aspx’ page will be created under ‘Pages’ folder of Web Project


Open the LictsWebPart.aspx.cs and add the below code in ‘’Page_Load’ method. Make sure to add the namespace using Microsoft.SharePoint.Client

            var spContext = SharePointContextProvider.Current.GetSharePointContext(Context);
            using (var clientContext = spContext.CreateUserClientContextForSPHost())
            {
                Web web = clientContext.Web;
                clientContext.Load(web.Lists, lists => lists.Include(list => list.Title));
                clientContext.ExecuteQuery();
                foreach (List list in web.Lists)
                {
                    Response.Write(list.Title + "<br/>");                   
                }         
            }

Now the code Looks like below:


Now open the ‘AppManifest.xml’. In the ‘General’ tab change the Start page URL from ‘default.aspx’ to ‘ListsWebPart.aspx’ which has been created before


Now, Open the ‘Permissions’ tab and select the ‘Scope’ and ‘Permissions’ as per below to read the lists


Now build the project and deploy, Here Visual Studio automatically updates the web.config file with the new client id and deploys the app to the developer site collection  

Trust the App


Now the page will be redirected to ListsWebPart.aspx and lists will be displayed as below.


Click on ‘Certificate Error’ on the browser


Click on ‘View Certificate’ and ‘Install Certificate…’

 

You can new add the client web part to any page in the developer site collection. Now, create a new page in the developer site collection

Now Edit ‘ReadLists’ Page -> Insert -> select the App Part -> Select ‘ListsWebPart’ client web part and Click Add
                                                                                

Web part will be displayed as below on the SharePoint page with the lists from the current web
                                                                         
 
 

Comments

Post a Comment

Popular posts from this blog

Create and Deploy custom copilot to SharePoint Site (Part 2)

Image
  Custom Copilot as a canvas control on SharePoint site: This post is an extension to Part 1 to deploy the custom Copilot to SharePoint site. Before proceeding further please refer to the Part 1 as we are leveraging the custom Copilot and Service Principal created in the previous post. Deploying custom Copilot requires an additional app registration(this is different than the one created in the Part 1 for enabling authentication) to register SharePoint site as a canvas app to host copilot and handle single sign on flow. Create App Registration for SharePoint App: Login to https://portal.azure.com -> Microsoft Entra ID -> Create New App Registration Select 'Single page application' for platform and the SharePoint URL where the copilot is to be hosted and accessed Select API permissions blade and add custom API permission which was created in part 1 Save the Application(client Id) and the tenant id these will be used in SharePoint canvas app Deploy SharePoint SPFx App on ...
Read more

Create and Deploy custom copilot to MS Teams and SharePoint Site (Part 1)

Image
Custom Copilot using Copilot Studio published to MS Teams: In this two part series we see how to create a custom copilot using Microsoft Copilot Studio for Generative Answers based on the SharePoint Knowledge DB(files uploaded to SharePoint) and deploy the copilot to MS Teams and a SharePoint site. Deploying custom copilot to MS Teams and SharePoint require an authentication enabled. Lets create an Azure Service Principal(Client Id and Secret) required to enable Manual Authentication as deploying to SharePoint requires Manual Authentication. Create App Registration for Authentication: Login to https://portal.azure.com -> Microsoft Entra ID -> Create New App Registration    Add delegated API permissions: openid, profile, Files.Read.All, Sites.Read.All from Microsoft Graph Add a Scope from 'Expose an API' blade. This is required to publish the copilot to SharePoint site. You can ignore this step if you are publishing your copilot to MS Teams only. Crete a client secret fro...
Read more

Copilot Announcements from Microsoft Build 2024

Image
  Microsoft Announced major updates to Copilot Studio in Build 2024. In this article we will see the new Copilot features announced in Build 2024. New User Experience Redefined simplified developer experience for creating copilots using Copilot Studio.  Templates Industry specific templates to create custom copilots based on the industry specific templates. Templates will accelerate the development as we do not need to start from scratch. Some of these templates are Store Operations, Sustainability Insights, Website Q & A etc. we can also save custom copilot as template and made it available to others. Create Copilots from SharePoint - Private Preview Users can directly create custom copilots from SharePoint site by selecting documents and extend the copilot using Copilot Studio. Copilot will be available on the SharePoint site and we can directly ask any questions on the data from the data within the SharePoint site Copilot Connectors/Knowledge Sources We can now bring in...
Read more