How to build your first ‘Hello World’ Add-In and a basic overview of the Add-ins concept

Previous posts in this series: Getting started with SharePoint Add-Ins development – Part I

Welcome to part II of this series about SharePoint Add-Ins development. In this post, we will create our first super basic Add-In part and later, in coming blog post we will learn do more advance stuff like using REST/CSOM/OData and read & write to SharePoint lists, how to use Ajax/JSON, overcome CORS issues and work with external API data, but first we need to master the basics.

Do I need to be an experienced SharePoint developer to follow this series? No, you don’t need to be that, but I would recommend that you have some basic knowledge about the basic in web development and that you have worked with SharePoint before.

No time to waste here, let’s start build this right now!

Overview

These instructions are aimed for a SharePoint Online environment, but you should also be able to follow this post if you are working in an onprem environment, even if some details are not the same comparing the versions. In this blog post, we will create an add-in with a app part.

Please note that SharePoint Add-ins can fit into a SharePoint website in several ways

  1. Add-In Part
    • Like a web part, you can add an Add-In part as a part of a web page in SharePoint. Behind the scenes, it’s an Iframe that you drop onto the page that contains the Add-In. Almost all types of SharePoint components can be part of a SharePoint Add-in, including pages, lists, workflows, custom content types, custom design and JS functions etc.
  2. Immersive full-page Add-In
    • A full-page Add-In, that cover the whole page in SharePoint. This type of Add-In is useful when you need more space than an Add-In part can provide
  3. UI Custom Action
    • Extend ribbon and menus for lists, documents, and more. Can be useful if you for example need to add a button in the ribbon that will fire some JS function when clicking

Some stuff to do before you start developing

  1. First, you need to create a “developer site collection”. https://dev.office.com/sharepoint/docs/sp-add-ins/create-a-developer-site-on-an-existing-office-365-subscription
    A developer site makes it easier to get set up and start creating, testing, and deploying your SharePoint Add-ins more quickly. However, they are not supported in all versions of o365.
  2. You need to install Visual Studio, if you don’t have it, download Visual Studio 2017 Community for free from here: https://www.visualstudio.com/downloads/

Great, all setup & ready to go!

Create your first SharePoint hosted Add-In (Add)

  1. Open Visual Studio 2017 and select File > New > Project
  2. Select (or search for) SharePoint Add-in (Visual C#), name it MyFirstAddIn and use the same name for the solution. No need to change the path for Location, where the project will be saved locally or set up source control. Just click OK now
  3. Type the URL to your developer site collection, the site you will deploy and test your Add-In. Select SharePoint-hosted and click Next
  4. Log in with your account
  5. Select “SharePoint Online” and click FinishThe most basic stuff is now in place. The next step is to type some text and place the Add-In as an Add-In Part onto the start page of your developer site.

Create an app part

When you create a SharePoint Add-in project, it automatically creates a Immersive Full-page Add-In for you. You will find it solution explorer, under Pages. It’s called Default.aspx

  1. In Visual Studio, close the Default.aspx page
  2. In Visual Studio Solution explorer, right click the project folder below the Solution and click Add > New Item…1.png
  3. Select (or search for) Client Web Part, select this and name it to “MyFirstAddInPart”. Click Add and Finish, without change anything. The Add-In Part (client web part) will now be opened.
  4. Now think of this page just as a normal aspx or html page, find the body section and type some text
    2.png
  5. Open the corresponding Elements.xml file
    3.png
  6. Remove “Title” and “Description” text, we don’t want the word Title after our own Title for this Add-In Part. You can delete the commented out text as well, no need for that.
    4.png
  7. Ok great, time to run this now. Click at the green arrow “Start” in the menu bar in Visual Studio. Now wait for the deploy, upload and install procedure to be finished. Once the Add-In is ready, a web page will be opened. You can later select if Google Chrome, Firefox or some other browser should be the default browser for debugging in Visual Studio, more about that in the next post. As you now noticed, it’s the immersive full page taht opens, the Default.aspx page. You can later change that behavior so that the Add-In part (client web part) opens immediately instead of the default page. I’ll explain more about this immersive page in next post.
  8. Click at the link in the top left corner in the browser window to get to the start page of your developer site.
    5.png
  9. Edit the start page and click at App Part6.png
  10. Select “MyFirstAddInPart”, click Add and save the page.

Great, when you reached this far, you will be ready for the next post and receive more knowledge for Add-In development.

Next post will contain:

  • How to select default browser for debugging
  • How to select start page when deploying
  • How to publish and manual upload an Add-In
  • The famous Cab tricks
  • The immersive full page
  • How to delete the Add-In from SharePoint
  • How to install the Add-In to another site (your Intranet) than just in the developer site collection
  • About the App Catalog
  • How to publish the Add-In to Office Store

In future posts in this series, we are going to learn how to communicate with the host web (SharePoint), using Postman, using REST/JSOM, CRUD operations to external API’s and a lot of more really cool stuff and nice tricks, stay tuned!