In previous article we have seen how to create new project for SharePoint Add-in, how to add support for TypeScript and code add-in using typescript.
In continuation with that, lets see now how to build, debug and deploy add-in to SharePoint online.
Debug and test add-in on development environment
Step 1: Run app in development environment
Click on start button in visual Studio to directly shows app in app domain, you will see immersive full page app with list of all items from HostList.
Read All items
By default add-in will show list of all items from the list. alternatively you can click on get all items button to read all the items of list.
To create new item to the list, click on New Item button, you will be presented with modal dialog, to get the inputs for Name, Last Name and Address.
Edit or Update Item
Every row in the list has edit and delete buttons, to make changes to particular row, click on edit button and you will be presented with edit dialog, with values of selected row. you can make the changes and click on save button.
Every row in the list has delete buttons, to make changes to particular row, click on edit button and you will be presented with edit dialog, with values of selected row. you can make the changes and click on save button.
Deployment to SharePoint online
Once you are done with debug and test on development environment, its time to publish on SharePoint online.
Step 1: Publish from Visual Studio
In Visual studio solution explorer, right click on project and click on publish then click on package the add-in button. you can shave the package at local machine.
Step 2: Upload package to app catalog
Now you can upload the package to App Catalog site on SharePoint online. If app catalog site is not available you need to create one before deployment. e.g. in my case i have create app catalog at https://sharecareinspire.sharepoint.com/sites/appcatalogsci
Step 3: Add App to Team Site Collection
Once add-in is published to app catalog, you can now use app on any site collection in your tenant.
Step 4: Trust App to manipulate list on site
As we have provided read, write and delete permissions on list for this app, it will prompt you to trust the app with warning if you want app to manipulate list on this site.
Step 5: Open app in immersive full page mode.
Once you trust the app, you are ready to use it. As this app is created as an immersive full page app, if you open the app it gets opened in full page mode. and by default shows you all the items in list.
It’s time for SharePoint developers to take another look. While support for TypeScript in Visual Studio is excellent for standard web projects, life is a little more difficult in SharePoint app projects.
With this article is just a guidance, you’ll be able to integrate TypeScript into your SharePoint add-ins and take advantage of strong typing, modules, classes and interfaces.
Health and Parenting Inspiring Stories Technology Microsoft Azure SharePoint O365