Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

SharePoint Framework Client WebPart–Playing with context, pageContext, Web, User and CultureInfo

Overview As a SharePoint developer, we are familiar with SPContext. We can easily access the current Site, Web and User related information from SPContext.Current. In this post, we will see that how to get the similar details from SharePoint Framework Client WebPart. Create a new WebPart The prerequisites of SharePoint Framework Client Side development is that, NodeJs Visual Studio Code I have explained in my previous posts on how to install and configure NodeJs and VS Code. In addition to that, here you find more details about creating a Hello World WebPart. https://github.com/SharePoint/sp-dev-docs this.Context (IWebPartContext) This is a similar to SPContext. One of the important properties is pageContext and we can access the following properties from that, Site Web User CultureInfo this.Context.pageContext.web This will return the Absolute URL, Relative URL, Web site title and Web site unique ID. Here is the syntax for that.   The output of the above code is, this.Context.pageContext.user This will return the logged in user’ loginName and displayName. The output of the above code is, this.Context.pageContext.cultureInfo This will return the site culture information. Based on that, we can localize the webpart easily. The output of the above code is, Summary In the post, we will see that few important SharePoint Framework properties. In the next post, we will see that, how to use httpClient object.

How to setup the live examples of Office UI Fabric ReactJs Components in local machine

Overview As promised, Office DEV team has released the preview version of Office UI Fabric React Components. Before install the components in our local machine, let us see that how it will useful in our SharePoint development. SharePoint Framework Microsoft has introduced a new SharePoint development strategies called SharePoint Framework to adopt a modern web development. The SharePoint Framework is a combination of, Office UI Fabric – This is a UX framework  similar to Bootstrap. Office UI Fabric React Components – This is similar to Angular Bootstrap UI. They are building a similar components using ReactJs for Office UI Fabric. If you are from Angular JS background, you can use ngOfficeUIFabric.com. Data Access  – Office DEV team has released PnP.JS.Core to simplify the SharePoint operations. Client WebPart Development and Deployment – Not yet released. Here I have listed of our all the links related to SharePoint Framework from SharePoint community. Installing Office UI Fabric React Components To view the samples, first we need to clone to source code to our local machine. https://github.com/OfficeDev/office-ui-fabric-react then, we need to install the dependencies, c:\sivarajan\Samples\office-ui-fabric-react> npm install Here is the solution structure of the preview, Now we can run the application from command prompt and see the live examples. c:\sivarajan\Samples\office-ui-fabric-react> gulp serve http://localhost:4321/index.html#/examples Summary In the next post, we will see that how to use the components in our application.

SPFx Series 4 – Enabling IntelliSense for Typescript in Visual Studio Code

Overview In this post, we will see that, how to enable the IntelliSense for TypeScript. There are three ways, we can enable the IntelliSense for TypeScript. Using  ///reference – File Scope Method Using tsconfig.json Method Using typings Method Using ///reference – File Scope Method Opened Visual Studio Code with current folder AngularTS from my command prompt, C:\Samples\AugularTS> code . Created a new sub folder src under AngularTS and added two files sample1.ts and sample2.ts Now add the following code snippets in the sample1.ts file   When we try to access the Greeter class from sample2.ts, we won’t get the IntelliSense for that. Similar to JavaScript, we can enable the IntelliSense by explicitly reference the file.  See the example below.   Using tsconfig.json Method Under the root folder AngularTS, lets add a new file called, tsconfig.json and add the following code. Now we try to access the Greeter class in sample2.ts file, we can see the IntelliSense, without reference the files. Using typings Method We can follow this approach, suppose if we want to enable the IntelliSense for AngularJs or ReactJs inside our source code. First we need to install the node module typings globally https://www.npmjs.com/package/typings For enabling the TypeScript IntelliSense, lets execute the command one by one. Create a typings.json file using typings init command Install the AngularJs definition file using typings install –save –global dt~angular Now we can see that, typings.json file added under the AngularTS folder. Open the typings.json file, we can see that the installed angular definition dependencies added here. Now we can try the angular syntax, we can get the IntelliSense.           Summary For our development, mostly we will use tsconfig.json approach for internal code IntelliSense and typings approach for external modules IntelliSense like Angular, Angular Route, ReactJs.

SPFx Series 3 – Installing Visual Studio Code and enabling IntelliSense for JavaScript

Overview In the last post, we saw that how to install and confgure Node.Js and NPM. Now lets see that how to install Visual Studio Code and enabling IntelliSense for both JavaScript. JavaScript / TypeScript Editors There are many editors are available for JavaScript / TypeScript editor. Here is a list for that, ALM - http://alm.tools/ Visual Studio Code https://code.visualstudio.com/ Brackets http://brackets.io/ ATOM https://atom.io/ WebStorm https://www.jetbrains.com/webstorm/ Sublime https://www.sublimetext.com/ Here you can find the editors comparisons http://www.slant.co/topics/1686/~javascript-ides-and-editors Installing Visual Studio Code Visual Studio Code is a cross platform free tool from Microsoft. Lets see that how to install Visual Studio Code. Here is a link here for Visual Studio Code, https://code.visualstudio.com/download Run the downloaded VSCodeSetup-stable.exe file and follow the wizard with default values. Please make sure that “Add to the PATH” checkbox has checked in the Select Additional Tasks screen. After successful installation, Visual Studio Code Editor will be opened. You can also open the Visual Studio Code from command line. I have created my project folder “AngularTS”. While typing “code .”, visual studio code will be opened with current directory.You can see here, current folder “AngularTS” in the left navigation. On right click the mouse on the left navigation area, context menu will be opened. It help us to create a new folder or file, open the current explorer or command prompt. Enabling JavaScript IntelliSense Out of box JavaScript IntelliSense I have created sample.js and sample1.js in the folder and created a function getAddress in sample.js. When we try to access the getAddress function, we will get the IntelliSense by out of box. Suppose if you try to access the getAddress method in sample2.js file, we won’t get IntelliSense for that. Explicit JavaScript IntelliSense By explicitly reference the sample.js to sample2.js, we can get the intellisense. Lets see how to do that. This approach is little hard for larger JavaScript application. Implicit JavaScript IntelliSense By adding a jsconfig.json file in the root folder, we can provide IntelliSense across the multiple JavaScript files. Once you add the sample.js and sample1.js under files attributes in jsconfig.json file, you can get the reference in sample1.js file. This is a best approach for larger JavaScript application. If you like to know more about jsconfig.json attributes, please follow the link, https://code.visualstudio.com/docs/languages/javascript#_javascript-projects-jsconfigjson Summary In the next post, we will see that how to install and configure TypeScript IntelliSense.

SPFx Series 2 - Installing and Configuring Node.Js and NPM

Overview Node.Js is a cross platform server-side JavaScript environment based on V8 engine. As a SharePoint developer, we enough to know that how to install and configure the Node.Js and Node Package Manager (NPM). Installing Node.Js Here we can find the latest Node.Js exe, https://nodejs.org/en/download/ I have downloaded the Node.JS version v4.4.7 (64 bit) which include the NPM 2.15.8. Click the node-v.4.4.7.msi file for trigger installation. Follow the wizard instructions with default values and complete the installation. On successful installation, restart your machine to refresh the environment variables %PATH%. Open the command prompt and try the following commands If you are seeing the similar result in your screen then, you are good to go the next step. Node Page Manager Navigate the following link to get your packages like AngularJs, ReactJs, jQuery, etc. https://www.npmjs.com/ We can install the npm packages globally and locally. Let’s see how to install TypeScript package globally. Go to the site https://www.npmjs.com/ and search the word typescript. It will return typescript and typescript related packages. Later in the series, we will see how to use this in our project. On click the typescript link, it will redirect to https://www.npmjs.com/package/typescript Here you can find the how to install and uninstall instructions for typescript from our machine and try to install the typescript package globally. > npm install –g typescript Now lets see how to lists the installed packages, Uninstalling the Node.Js and NPM 1. Uninstall from Programs & Features with the uninstaller. 2. Reboot (or you probably can get away with killing all node-related processes from Task Manager). 3. Look for these folders and remove them (and their contents) if any still exist. Depending on the version you installed, UAC settings, and CPU architecture, these may or may not exist: C:\Program Files (x86)\Nodejs C:\Program Files\Nodejs C:\Users\{User}\AppData\Roaming\npm (or %appdata%\npm) C:\Users\{User}\AppData\Roaming\npm-cache (or %appdata%\npm-cache) 4. Check your %PATH% environment variable to ensure no references to Nodejs or npm exist. 5. If it's still not uninstalled, type where node at the command prompt and you'll see where it resides -- delete that (and probably the parent directory) too. 6. Reboot, for good measure. You can find the more details about uninstalling Node.Js form Mac http://stackoverflow.com/questions/11177954/how-do-i-completely-uninstall-node-js-and-reinstall-from-beginning-mac-os-x And you can find the more details about uninstalling from Windows http://stackoverflow.com/questions/20711240/how-to-completely-remove-node-js-from-windows Summary Here we saw that how to install and configure Node.Js and NPM and also how to install the NPM package. Let’s see how to install the Visual Studio Code editor and configure the TypeScript and JavaScript IntelliSense.