SharePoint online add-in with CRUD operations using TypeScript, DefinitelyTypedJquery and REST API – Part 2

Pankaj Salunkhe
Latest posts by Pankaj Salunkhe (see all)

<< Part 1      Related Articles      Download code

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.

 

Create Item

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.

 

Delete operation

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.

Conclusion

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.

I strongly recommend that you also try this sample. TypeScript is a very interesting and promising solution for using JavaScript with SharePoint. You can use Typescript in full trust solutions that include JavaScript.

 

<< Part 1      Related Articles      Download code


Check Articles From Categories      Health and Parenting      Inspiring Stories      Technology      Microsoft Azure      SharePoint O365

Leave a Reply

Your email address will not be published. Required fields are marked *