Development Of SharePoint Add-In Solution As A (Custom List) On Office 365 - Azure - Part One

Hello Readers,

In this article on “Development of SharePoint Add-In Solution as a (Custom List) on Office 365 – Azure – Part 1”, we will be learning how can we use SharePoint Add-In Solutions to create a custom list on Office 365.

Kindly follow my first article on how to develop a SharePoint Add-In and then refer my new article below.

What is SharePoint Add-In?

There are two kinds of SharePoint Add-ins, SharePoint-hosted, and provider-hosted add-ins. In this article, we will see a SharePoint hosted add-in and depending on various scenarios you can conclude what kind of host you require.

As quoted from Microsoft Docs, “A SharePoint Add-in is a self-contained piece of functionality that extends the capabilities of SharePoint websites to solve a well-defined business problem.”

In simple words, we use add-ins to keep the custom code off the websites to prevent any security or performance glitch on our servers but also manage to achieve the same functionality by storing them elsewhere. It is easily manageable and keeps our sites and servers safe.

We can use all the SharePoint components such as pages, lists, workflows, custom content types, list templates, web parts, and more using the SharePoint Add-In feature.

The SharePoint Add-ins that we will develop and install today will be featured as a tile on the Site Contents page of the SharePoint website where you can click on them and execute your business logic.

Now, it’s time to achieve the same so kindly follow the steps below and learn how to develop a SharePoint Add-In of a Custom List on Office 365-Azure.

• Once you add in ready as per the screen below, right click on the solution and click on Add a new item
  
  
  
  
  
• Under the Office/SharePoint section, click on List and name it
  
  
  

• Once you click on Add, you will have an option to create a default custom list or choose a format from different types list template. Once you select, click on Finish
  
  
  

• The list component gets added where you have sections like Columns, Views, and List to configure
  
  
  
  
  
• Here under the column section, you can add a variety of columns with all types and mark them if you want them as required or not
  
  
  
  
  
• Similarly, you can either use a default view or create your own views. You can also assign the row limits and also if you want it to be read-only
  
  
  
  
  
• Here under the list section, you can provide the listing URL and the description for the list instance which will get created as a SharePoint Add-In
  
  
  
  
  
• Now under the Page section on your solution explorer, search for “ContentPlaceHolderID="PlaceHolderMain”” under that on the div, add your reference to your list instance which will get attached to your SharePoint Add In
  
  1. <asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">
  2. <div>
  3. <p>
  4. <asp:HyperLink runat="server" NavigateUrl="JavaScript:window.location = _spPageContextInfo.webAbsoluteUrl + '/Lists/Learning%20List/AllItems.aspx';" Text="Learning List" />
  5. </p>
  6. </div>
  7. </asp:Content>

• Right click on the Solution, Build & Deploy
  
  
  

• Click on the settings icon on the right corner and click on “Add an App”
  
  
  
  
  
• Search for your app you have developed
  
  
  
  
  
• It will ask you to Trust the app
  
  
  
• Click on Trust It
• You will see your app installed under the site content
  
  
  
  
  
• Click on it, you add it will open
  
  
  
  
  
• As we had added a link on the default page.aspx, click on the list name “Learning List”, the SharePoint Add-In will load the custom list for you
  
  
  

This was our SharePoint Add-In on Office 365 of a Custom List. We will see many more aspects of SharePoint Add-In features in the upcoming article.

Until then, keep reading & keep learning.