SharePoint Programming With TypeScript - Part Two

Introduction

 

In this article, you will learn implementing basic TypeScript examples on SharePoint, using Visual Studio.

 

In my previous article, you have seen/learned the TypeScript basics and prerequisites to be available on Visual Studio for SharePoint TypeScript programming.

• SharePoint Programming with TypeScript - Part 1 

SharePoint Project with plugins

 

The snapshot, shown below shows the project created with the necessary plugin files. By default, the files will be present under the scripts folder. For this example, I have dragged the files to StyleLibrary folder.

 

Note

In this case, the files to be used for the operations need to be managed/accessed from the site's Style Library.

 

 

 

Adding Custom Files

 

Add the custom type script file to the project. Once you start putting your code into the TypeScript file, the compiler will translate the content from TypeScript to JavaScript code. JavaScript file will be generated automatically. JavaScript file is usually hidden. Please find the steps , mentioned below to include the hidden files in the project. 

• From the Solution Explorer, click on the project.
• Click on show all files icon. All the hidden files will be shown.
• Right click on Sample.js file, select Include In Project method.
• Now, JavaScript file will hold the content translated from TypeScript file.

The snapshot, shown above shows the project structure, before and after including JavaScript files.

 

TypeScript & JavaScript Code

 

As a basic example, we will see how to get the information about the site. In the sample TypeScript file, paste the code, mentioned below and save it.

/// <reference path="../../StyleLibrary/TSSample/typings/jquery/jquery.d.ts"/>
/// <reference path="../../StyleLibrary/TSSample/typings/sharepoint/SharePoint.d.ts"/>

$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        SP.SOD.executeOrDelayUntilScriptLoaded(()=>GetSiteDetails.LoadLists(), 'SP.js');
    }, 'SP.RunTime.js');

});

module GetSiteDetails {
    var context;
    var web;
    export function LoadLists() {
        context = SP.ClientContext.get_current();
        web = context.get_web();
        context.load(web);
        context.executeQueryAsync(success, failure);
    }

    function success() {
        $("#siteName").html("<div> " + web.get_title() + " Site Info :: </div>");
        $("#siteName").append("<div> Description : " + web.get_description() + "</div>");
        $("#siteName").append("<div> Web Template : " + web.get_webTemplate() + "</div>");

    }
    function failure() {
    }
}

The code will be compiled and JavaScript code will be generated in JavaScript file. JavaScript content will be similar to the code snippet, mentioned below. Do not change anything in JavaScript file manually. 

/// <reference path="../../StyleLibrary/TSSample/typings/jquery/jquery.d.ts"/>
/// <reference path="../../StyleLibrary/TSSample/typings/sharepoint/SharePoint.d.ts"/>
$(document).ready(function () {
    SP.SOD.executeOrDelayUntilScriptLoaded(function () {
        SP.SOD.executeOrDelayUntilScriptLoaded(function () { return GetSiteDetails.LoadLists(); }, 'SP.js');
    }, 'SP.RunTime.js');
});
var GetSiteDetails;
(function (GetSiteDetails) {
    var context;
    var web;
    function LoadLists() {
        context = SP.ClientContext.get_current();
        web = context.get_web();
        context.load(web);
        context.executeQueryAsync(success, failure);
    }
    GetSiteDetails.LoadLists = LoadLists;
    function success() {
        $("#siteName").html("<div> " + web.get_title() + " Site Info :: </div>");
        $("#siteName").append("<div> Description : " + web.get_description() + "</div>");
        $("#siteName").append("<div> Web Template : " + web.get_webTemplate() + "</div>");
    }
    function failure() {
    }
})(GetSiteDetails || (GetSiteDetails = {}));
//# sourceMappingURL=Sample.js.map

Test the Code

 

To test the functionality, add JavaScript file reference to the page and test it. TypeScript file will not be referred to anywhere in the project. 

 

Note

The operation, mentioned below can be completed manually as well. 

• Since we are referring to jQuery plugin, add in in the style library folder of Solution explorer. Add the text file to the Style Library and paste the code, mentioned below.
  

  <script type="text/javascript" src="/Style Library/TSSample/jquery-1.11.1.min.js"></script>
  <script type="text/javascript" src="/Style Library/TSSample/Sample.js"></script>
  
  <div id="siteName"></div>

• Right click on the project and deploy.
• The files will be present under http://siteurl/Style Library/TSSample.
• Navigate to pages library. Create a page. Then add a content editor webpart to the page. (Content Editor webpart will be present under Media Content Category).
• Edit the Webpart and provide the sample text file path URL in content link text box. Save the page. 

The snapshot, shown below shows the page, which shows the site details.

 

 

Summary

 

Thus, you have learned adding the TypeScript file to the SharePoint project and testing the JavaScript (translated from TypeScript code) on SharePoint page.