Debug office Add-ins

You could get logs of internal errors on the Office Addin using following method. Its simple and easy and involved few steps achieve.

Open Windows registry editor (windows + R then regedit.exe) and follow the route “HKEY_CURRENT_USER\SOFTWARE\Microsoft\Office\16.0\Wef\Developer\” and mention your location to write logs.

2017-07-24_12-00-23

Notes 

  • Runtime logging feature available in Office desktop 2016 version.
  • You must be admin of the considered system to perform this.

Important!

Initially, this is kept blank and keep in mind to reverse it back since it leads to performance issues.

Introduction to Script Lab – A Simplified but powerful way to Office Extendibility

Script Lab is a Microsoft garage project which initiated with summer hackathon held back in 2016. Creator main focus is to build a platform where build add-ins simple and with less knowledge curve for web developers. It is simple but it does not mean it is not powerful. Let’s go through below slider where you could kick start on developing Office extended apps.

click here if slider does not work. 

More information
https://www.microsoft.com/en-us/garage/project-details.aspx?project=script-lab

Github Repository
http://aka.ms/scriptlab

Get Script Lab
https://aka.ms/getscriptlab – install

Office Add-ins UX design patterns
https://github.com/OfficeDev/Office-Add-in-UX-Design-Patterns

Office JS API reference
https://dev.office.com/reference/add-ins/javascript-api-for-office

Integrate SharePoint Documents with Office Web Apps in Custom Solutions

If you are finding way of integrating Office Web Apps(OWA)with your custom solution which built with SharePoint CSOM/ JSOM or with integration of any client site development. Specially in a scenario where you develop your own “SharePoint display template” following integration points will be useful;

View in office web apps

Following link will work; if your requirement is to open your document in OWA. This can be done with simply appending parameter as below;

<uri to your document>?Web=0

Eg:
http://mydomain.local/sites/OWASite/Documents/TechCentro.docx?Web=0

Edit SharePoint documents in OWA

Following way of integration with the Office Web apps which let you to pick your action is; means that whether your action may be read, edit or your default setting.

<Web absolute URi>_layouts/15/WopiFrame.aspx?sourcedoc=<Relative URi to document>&action=<Your action>

Summary of actions as below;

 

&action=default -> Gets default setting of the documents
&action=view    -> Open office app as a read only
&action=edit    -> Open office app as editable

Eg:

http://mydomain.local/sites/OWASite/_layouts/15/WopiFrame.aspx?sourcedoc=/sites/OWASite/Documents/BestPractices.docx&action=edit

You can be changed the default behavior with following approach
https://technet.microsoft.com/en-us/library/ee837425.aspx?f=255&MSPPError=-2147217396

Building URL to the Office Web Apps

If you thinking about how to build your URL; following illustration may be useful.

var owauri="_spPageContextInfo.webAbsoluteUrl" //absolute URL of the SharePoint site
+"/_layouts/15/WopiFrame.aspx?sourcedoc=" //static phrase
+"/sites/OWASite/Documents/TechCentro.docx" //Relative URL to the document
+"&action=edit //Action parameter

Useful resources

https://technet.microsoft.com/en-us/library/ff431685.aspx

TypeScript for Office Dev | Convert Ts App to Office/SharePoint Add-in

TypeScript is not an alternative for any other programming language, it’s simply for make web developer productive when he is coding. It’s not C# for web, its not JavaScript extension or either its not alternative to JavaScript. Based on programming language design basics its for make source more readable to humans while also make its readable to machines.

Before startup, I would like to make you notice some facts over there. Even you are coding on *.ts file which is also known as ‘Typed Script’ in your script references, you are referencing a JavaScript file (*.js). It means that, behind the scene you are generating a JavaScript means that this is just an interface to your scripts.

<script src=”app.js”></script>

app.ts vs app.js in TypeScript application

What is in TypeScript?

  • Classes
  • Interfaces
  • Generics
  • Overloading

Describing on above purposely omitted since as Microsoft developers or as a developer above concepts and implementations are not new topics for us.

Develop TypeScript Application

You can be created TypeScript application as below, and you will get solution as shows in the above image which compares ts and js files which included.

FileNewProjectTemplatesTypeScript“HTML Application with TypeScript”

After you done with the templating you can develop your HTML application with using TypeScript and by integrating any client side framework like AngularJs, ReactJS or any framework you prefer. But my personal preference is Angular or React since they equipped with strong community and rich framework background.

You will use Unified APIs or more generally saying RESTful APIs to communicate with Office application data and services. If you are developing on SharePoint you may also use JSOM based libraries but the recommended way is keep the decoupled concerns with the RESTful APIs since it gives many advantages (Note: wait for explore advantages of moving towards RESTful services when Office Dev on a post in near future) .

References:

Converting TypeScript Application to Add-in (App)

After you done with TypeScript Application, converting app to Office Add-in is few step process. You can be pick which Office application and then all done. By clicking on “Start” you can test the application.

Convert to Office Add-ins

Note: If you developing SharePoint Add-in you are requires to give SharePoint, you requires to give relevant information to connect with it to host the application. For other application types you requires only Office installed on the machine to host the application.