SharePoint 2016/2013/Online: How to Optimize SharePoint Custom Pages Using HTML5 IndexedDB API

In this article we will discuss another obvious performance issues with SharePoint Solutions involving large volume of data transactions surfacing SharePoint Custom Pages.

This could become more prominent if we have strict governance in place and we are not allowed to make use of advanced server side options (Custom Web Service End Point, MTA Enabled Modules etc.).

In one of the recent assignment I came across a similar scenario where I need to crawl data from an external Web Service end Point and surface data on SharePoint Pages. Since the anticipated data volume was huge and traditional caching approaches like Cookies wont’ work due to size limitations.

In pursuit of the solution I have gone through the “HTML5 Web Storage APIs” that allows you to setup an In-Browser Transactional Database System called “IndexedDB”.

Here is a quick introduction of IndexedDB for details I must recommend you to visit IndexedDB

“IndexedDB is a transactional database system, like an SQL-based RDBMS. However, unlike SQL-based RDBMSes, which use fixed-column tables, IndexedDB is a JavaScript-based object-oriented database. IndexedDB lets you store and retrieve objects that are indexed with a key; any objects supported by the structured clone algorithm can be stored. Operations performed using IndexedDB are done asynchronously, so as not to block applications.”

I also want to thanks to “Raymond Camden” for his detailed research on Storage Limits for IndexedDB and believe you must refer this link to understand the limits carefully before getting into concrete implementations.

Now let’s try to understand the implementation details by using following diagram:

Solution Architecture Diagram & Explanation

1

In this solution the SharePoint Page will try to look for the required data in Local Indexed DB created to support this page. If data is not found in local database, page will issue the request for data from SharePoint List.

Since we are dealing with “100,000” Items present in SharePoint List, I made use of “REST API + OData Continuation” data access strategy to overcome SharePoint List Threshold Limits. This mechanism will access only 100 List Items at a time and it is safe to extend this limit up to 2000 items per fetch.

Each fetch will a JSON Object that will be persisted into Indexed DB as individual record. I opt this strategy to reduce the page load time. If the number of items are not much you can add each item as separate record.

Every subsequent data call will be automatically diverted to the local database as primary source.

Additionally we can add “Auto Refresh Modules” to keep the local database fresh with SharePoint List Changes and sync the changes with Indexed DB “Asynchronously”.

Ideally speaking for a complete solution “Auto Refresh Modules” are must to have.

So this all about execution summary for this solution.

Now let’s have look at implementation details as follows-

I have created a SharePoint List with two columns and “100,000” Items added to it as shown below.

Demo

This list will be acting as data source for the page. In actual scenarios this source could be a Web Service End Point which can provide voluminous data on demand.

2

3

Before getting into code let’s see how this Page will behave on execution. Demonstrating the page in action will be helpful later when we get a deep dive in code.

If we run the page we will see this page took about “3 minutes” to get execution completed.

The first execution cycle will include the following actions:

  1. Initialize IndexedDB Database
  2. Query SharePoint List
  3. Add REST API Response to IndexedDB
  4. Load page with data from IndexedDB

Since we are adding data to the store asynchronously, overall application will remain functional even it is taking 3 minutes to complete.

4

Following screen shot showing data adding to IndexedDB asynchronously

5

We can also review the Indexed DB initialized as the part of this request using “Developer Tools or F12 Key” with in the browser as shown below-

6

We can explore each item in the each of the JSON Object as shown below-

7

Now refresh the page to see the execution again and we can see roughly “1 second” to complete the page request.

The subsequent execution cycle will include the following actions:

  1. Query IndexedDB for data
  2. Load page with data from IndexedDB

So we can see how we can trim the execution path by using a well-defined strategy.

8

Code Analysis

Let’s do the code analysis to understand the concrete implementation.

In Step 1 we are enclosing some of the literals as variables and will refer theses variables later in the code

9

In Step 2 we are checking if respective Indexed Database is initialized already or not and if not Initialize the Database. In this demos let’s call this database as “Products”

10

In Step 3 “onsuccess” event handler will get executed and database object will get stored in a global variable “SharePointOptimization.sharePointStore”. This variable will be acting as start point for all the operations on the database in future.

In Step 4 default error handling module is assigned as callback function to “onerror”, “onblocked”, “onabort” event handler

11

In Step 5 we are querying SharePoint List using REST API

12

In Step 6 we are making use of OData Continuation Techniques to overcome SharePoint List Threshold restrictions.

In this step we also call “AddDataToStore” function that will add SharePoint List Items coming as JSON Object to the Local Indexed Database.  It is important to recall that in this demo I am storing 1 JSON Object as 1 record in database and each object contains information for 100 List Items.

13

In Step 7 we are adding JSON Objects to IndexedDB. In order to do that we need to perform following operations-

  • Initialize Transaction with Read Write Operation Permissions
  • Get Handle on “Products” Database inside IndexedDB Data Stores
  • Call asynchronous “add” method to add JSON Object to “Products” Store

In Step 8 we are calling “QuerySharePoint” function to query data from SharePoint List in case data is not available in Local Database.

14

Steps 9, 10, 11 explains about “ReadSPStore” function where we will read the data from Local Data Store (IndexedDB)

In Step 9 following operations are performed-

  • Initialize Transaction with Read Operation Permissions
  • Get Handle on “Products” Database inside IndexedDB Data Stores
  • Call asynchronous “count” method to get total number of JSON Object available in “Products” Store

In Step 10 following operations are performed-

  • Check for get count request status
  • If success Initialize Indexed DB Cursor by calling asynchronous “openCursor” function

In Step 11 following operations are performed-

  • Check for get cursor request status
  • If success read the record from IndexedDB and add to the local array variable
  • Call “continue” function as long as there are items left in local store
  • Once all data is read and save to the local array pass this array to “RenderUI” function to render this data on the interface as required

15

In Step 12 we can plug any UI engine to produce more intuitive UI as applicable, for the sake of this demo I am writing out the Count of Store records * 100 (since each record contains 100 Items) to show the total number of items stored in the local store.

16

Steps 13, 14, 15 show you a helper function to check if local store contains required data or not. It helps to decide if we need to read data from Local Store or SharePoint List

“GetProductCount” function is quite similar to the “ReadSPStore” function except it perform a lesser number of operations

17

In Step 16 we will initialize Local SharePoint Store by calling “InitializeSharePointStore” function

18

In Step 17 we can see some of the UI elements to build a basic UI for this demo

19

Point of caution

Before implementing this mechanism make sure you have identified all the compatibility issues around this corner.

I would recommend you to refer the following site every now and then to make sure you are using features supported by the targeted browsers.

http://caniuse.com/#search=IndexedDb

20

Since I have made use of artifacts which are compatible with SharePoint Online Development Guidelines so we can use this approach with pages hosted in SharePoint Online as well.

That is all for this demo.

Hope you find it helpful.

 

Advertisements

SharePoint 2016/2013 : Exploring Client Side People Picker Control

People Picker control holds a well-known reputation in SharePoint Environment as being a reliable source of selecting SharePoint Users & Groups.

Since the current & recommended SharePoint Development strategies are pointing towards the Client Side Development Techniques, discussing Client Side counter part of People Picker Control (Libraries) becomes much worthier.

In this demo I would be discussing the implementation details of the Client Side People Picker Control in Production Scenarios.

I developed this POC as a tool which is an addition to my toolset and often proves helpful to deal with investigating User Properties by Querying User Profile Service & and basic property set associated with this control.

To start with this demo I have added some of the UI elements as described below:

User Selection: This section will be having Client Side People Picker Control implementation which further allow user selection.

User ID: This section will display User ID of the selected User, which is a crucial piece of information while working out test scenarios.

People Picker Properties: This section will display the User Properties that can be retrieved from the People Picker Objects.

User Profile Properties: This section will display the User Properties that can be retrieved from the User Profile Service based on the selected User Account.

1

In the next few screenshots we can see the HTML laid down to implement this simple UI

Notice the Div with ID “ppOwner”, this will be the place holder for the People Picker Control HTML replaced later on

2

Div with ID “UserID” will hold the User ID information

3

Div with ID “resolvedUser” will hold the People Picker Properties

4

Div with ID “userProfileProperties” will hold the User Profile Properties for the selected user

5

Let’s look to the code file that is implementing the logic behind this tool as described in below steps:

Step 1: Include all the JS files into your code as shown in the screen shot below.

Since these files are inter-referenced so the sequence here is critical. Make sure to include the files in the same sequence

6

Step 2: “initializePeoplePicker” is a generic function that defines the schema settings for the Client Side People Picker control which defines the behavior of this control

Step 3: “registerPPOOnChangeEvent” is the function used to register events for People Picker Control

78

Step 4: This step shows the registration of “OnControlResolvedUserChanged” Event that will fire every time a valid user is selected using the people picker control

Step 5: Once this event fired, it will make a call to “Execute” Function

9

Step 6: Inside the “Execute” function we have to first create object to People Picker Control. It is important to note the convention to write the code:

“this.SPClientPeoplePicker.SPClientPeoplePickerDict.” + <Enter ID of the people picker Div Element> + “_TopSpan”;

Based on this convention we have object created as follows:

var peoplePicker = this.SPClientPeoplePicker.SPClientPeoplePickerDict.ppOwner_TopSpan;

Step 7: Once object has been initialize we can call “GetAllUserInfo” function that will return a dictionary of User Properties in the form of Key & Values for each user selected in the People Picket (if multi selection is enabled)

Step 8: Get each of the users from the dictionary and pass it to another function “getUserDetails” that will use this to further query User Profile Properties

Step 9: Retrieving the User ID out of properties dictionary and showing it in the User ID section

10

Step 10: Calling User Profile REST End Point by passing user name with domain ([domainName]\[userName]) from the Step 8

Step 11: If the REST Call is successful, pass the user properties collection to the “renderUserDetails” function to display all the properties in User Profile Properties Section

Step 12: If the REST Call is failed we can handle the exceptions in this callback function

11

Step 13: “getUserId” function takes user name with domain ([domainName]\[userName]) as input parameter. This function will return a promise that we are consuming in Step 9

12

Step 14: “renderUserDetails” function takes user properties dictionary as input from Step 11, loop it through each of the dictionary entry and render the data in User Profile Properties Section

13

And this is all for the code

In order to test the implementation lets go back to the People Picker Page, select the required User you would like to look for

14

On selection and if this user is valid (resolved) we will able to see the User Properties as shown below:

151617

That is all for this demo.

Hope you find it helpful.

SharePoint 2013/Online: JavaScript Injection using Embed JavaScript Pattern

Based on the latest recommendations from Microsoft, User Interface SharePoint 2013 & SharePoint Online should be customized using Client Side Frameworks and not using Traditional Master Page Customization based on Branding Solutions.

Moving on the same recommendations we will discuss JavaScript Injection or Embed JavaScript Pattern which is one of the newly recommended techniques from Microsoft that enables the developers to write applications to push the client scripts into the page from outside SharePoint Environment.

This sounds similar to the implementation of the Delegate Controls in an on premise SharePoint Installation but in this case we push the scripts from outside of the SharePoint Environment.

Using Client Side Frameworks such as JQuery along with this technique we can perform DOM Manipulation (adding, removing, modifying HTML Elements) as and when needed in whichever ways.

We must make use of Custom Actions with SharePoint App Model in order to implement Embed JavaScript Pattern by utilizing location identifier ScriptLink that can be accessed through UserCustomActions collection of SPWeb Object.

In this in this article we will see how to implement Embed JavaScript Pattern in real time business applications as below-

Lets’ start with a SharePoint App Project by selecting App for SharePoint Project Template

1

Specify the Site URL

Choose Provider-Hosted as hosting model in order to develop High Trust Apps

2

Choose ASP.Net Web Forms Application to create Web Application Project for the Provider Hosted App

3

Provide Certificate details for the High Trust Apps

4

Now once the project is ready we can start with the coding part of Solution as follows-

Steps 1 – In the default.aspx add HTML code to provide UI for the solution

5

In the App.js file add the following code-

Steps 2 – Refer the JQuery File from the CDN

Steps 3 – Calling InjectJavaScript Function

6

Steps 4 – Inside InjectJavaScript Function, check if MDS is enabled and if it is Register Custom JavaScript code using RegisterModuleInit function.

The first parameter to the RegisterModuleInit function is the path to the JavaScript file relative to the _layouts folder.  Since this solution deploys the JavaScript file into a folder under the _layouts virtual directory, you have provided that relative path.  The second parameter is the entry point function which is LoadJSInsideHostWeb.

This approach will ensure that this JavaScript will work both with MDS enabled & disabled sites.

7

Steps 5 – Inside LoadJSInsideHostWeb function, we are calling LoadJQuery function to include JQuery file from the CDN and once loaded successfully it is calling ModifyHostWeb which will do the actual job of Injecting JavaScript Code to the Host Web

8

Steps 6 – Inside ModifyHostWeb function

  • We are manipulating the Site Title of the Host Web by using JQuery Element Identifier
  • We are replacing the Site Icon of the Host Web by using JQuery Element Identifier

9

Steps 7 – Inside LoadJQuery function we are loading JQuery File from the CDN

10

Steps 8 – Here we are hooking up the button click event for InjectJs & RemoveJS HTML buttons

Inside each event handler we are calling InjectJavaScript & RemoveJavaScript functions by passing Client Context to the Host Web & Web Object referring the Host Web and setting the notification message on the SharePoint App Page (default.aspx) to show the status of the operation

11

Steps 9 – Inside InjectJavaScript function we are making use of Custom Actions Framework for SharePoint to inject JavaScript based customization inside the Host Web in the following steps-

12.1

Preparing path of the Script file that we are going to inject into the Host Web and embedding it by creating the dynamic script block with src attribute set to the script file path.

Then we are retrieving the UserCustomActions collection in context of the Host Web and adding the new User Custom Action with Location as Script Link and Script Block as dynamic script block created earlier

 

13

Steps 10 – Inside RemoveJavaScript Function we are removing the User Custom Action from the UserCustomActions collection in context of the Host Web based on the Description & Location property of the User Custom Action.

14

With this we are done with the code.

Now lets’ run the App and see it in action by pressing F5 in Visual Studio

Once the App launched we can see the UI with a Result Panel & two HTML Buttons

  • Inject JavaScript to Host Web – This button will Inject JavaScript to the Host Web using User Custom Action
  • Remove JavaScript to Host Web – This button will Remove JavaScript from the Host Web by removing User Custom Action

15

If we look the Host Web before embedding the script to it, it would look like as follows. Notice we have default Site Icon and Title which was provided at the time of site creation

16

Now on App Page click on Inject JavaScript to Host Web button to push custom JavaScript into the Host Web

On clicking the button we can see the success message in the Result Panel confirming that the JavaScript has been applied to the Host Web

17

If we revisit the Host Web we can see the Site Icon and Title has been changed as per the code we had added to the custom JavaScript File that we have injected into Host Web

And since this change takes place at the Master Page Level, we can see the effect of the change all across the site on every screen as shown below:

18

19

20

 

Now in order to unplug the JavaScript based customizations out of the Host Web we can click on Remove JavaScript to Host Web

Once the Remove operation has been completed successfully we can see the result panel confirming the success of the operation.

21

And we can go back to Host Web to ensure that the Site Icon and Original Title are restored back as usual.

22

So we can clearly see the “Embed JavaScript Pattern” is very effective as it gives you handle on customizing Host Web Elements from outside the SharePoint itself.

Point of Caution

It is the responsibility of the App Developer to handler the smooth removal of the injected code as soon as the App gets uninstalled. There are a couple of issues that I would like to point out around this fact as follows:

If code is injected using SharePoint Hosted App, then it is not possible to get it removed the injected code automatically by any mean. In this case it is required to provide a User Interface or any other mean to execute the code for removal of injected Javascript followed by User Training for the Administrators to run the code first before uninstalling the App.

If code is injected using Provider Hosted App, then it is possible to get it removed automatically by handling App Uninstalling Event using Remote Event Receivers. You can refer to following of my earlier blogs on Remote Event Receivers to get better understanding on usage

That’s all for this demo.

Hope you find it helpful.

SharePoint Developer Tools – Get Your Gears

There are quite a number of Must to Have developer tools that every SharePoint Developer must have in its arsenal in order to boost its own Productivity while developing solutions on SharePoint Platform.

Few of the tools which are my personal favorites also are listed below:

CAML Designer 2013

CAML Designer can generate the CAML Query Stubs based on the inputs provided by the developer and can quickly give a handle on even complex query formations.

It is not just about the Formation of Queries but also offers code Transition from actual CAML Query to

  • Corresponding Server Side Object Model Code
  • Corresponding Managed Client Side Object Model Code
  • Corresponding JSOM & REST API Calls
  • Corresponding PowerShell Code

1

Download Path: http://biwug-web.sharepoint.com/SitePages/Caml_designer.aspx

SharePoint Manager 2013

SharePoint Manager has got quite a simple and intuitive interface which allows you to quickly and easily navigate down the farm and investigate settings, properties, schema XML and so on. Most of the things in your SharePoint environment can be investigated from this tool.

This tool allows you to quickly navigate the Site Hierarchy and objects, and you can also get a quick handle on Schema of List, Fields and on object properties like Object GUIDs, Object Titles and so on.

2

Download Path: http://spm.codeplex.com

ULS Viewer

ULS Viewer allows you to look into the SharePoint ULS Logs in real time by parsing the Logs. The information (Correlation ID, Date Time Stamp, Event Source Process and so on )exposed by this tool is really useful for productive debugging capabilities.

3

With the evolution of SharePoint 2013 Developer Dashboard also includes these capabilities of reading & parsing ULS logs. Developer Dashboard contains a separate tab by the name “ULS” where we can see the ULS log entries.

4

Download Path: http://www.microsoft.com/en-in/download/details.aspx?id=44020

CKS Dev

CSK Dev is a Visual Studio extension which adds a bunch of new Project items for SharePoint Projects that are really helpful in increasing productivity of a developer.

Extension Project Items included

  • WCF Service SPI template
  • Contextual Web Part SPI template
  • Branding SPI Template
  • ASHX SPI template
  • Upgrade Solution Step
  • Restart IIS Step
  • Copy To SharePoint Root Step

And many more…

5

6

Download Path: http://visualstudiogallery.msdn.microsoft.com/cf1225b4-aa83-4282-b4c6-34feec8fc5ec

Color Palette Tool for Branding

Color Palette allows you create a composed looks for SharePoint 2013.

7

Download Path: http://www.microsoft.com/en-us/download/details.aspx?id=38182

SharePoint 2013 Search Tool

SharePoint Search Tool allows to you create and test SharePoint Search Keyword Query backed up by SharePoint REST API paradigm. It also allows you to analyze the Query Stats and adjust them as per the required output.

8

Download Path: http://sp2013searchtool.codeplex.com/

Fiddler

Fiddler is a Web Proxy that allows to Debug Web Traffic, do Performance Testing, HTTP/HTTPs Traffic Recording, Security Testing and so on.

The use of Fiddler becomes utmost necessary now with the evolution of SharePoint 2013 which is more focused on Development Strategies based on Client Side Scripting Technologies.

9

Download Path: http://fiddler2.com/get-fiddler

SPCAF – SharePoint Code Analysis Framework

SharePoint Code Analysis Framework helps to validate your custom SharePoint Solutions and Apps against Best Coding Practices prescribed the industry drawn by various industry standards.

This framework can be really helpful to let you verify if your custom solutions are Stable, Complying with Company Policies, Following Coding Best Practices, Well Designed and Maintainable and much more.

10

Download Path: http://www.spcaf.com

.NET Reflector from Red Gate

.Net Reflector is one of the best tools I have ever used for understanding code of Third Party DLLs for which I even did not had the Source Code.

Reflector allows you to look into the DLLs to see the code encapsulating inside it to understand its functioning.

11

Download Path: http://www.red-gate.com/products/dotnet-development/reflector/

PowerShell Tools for Visual Studio

This is an excellent Visual Studio Extensions for PowerShell which enables code intellisence for PowerShell Scripts within Visual Studio Editor.

12

Download Path: http://visualstudiogallery.msdn.microsoft.com/c9eb3ba8-0c59-4944-9a62-6eee37294597

SPFastDeploy

This tool is specially designed to enhance the productivity while working with SharePoint App.

This tool is best suited for pushing the code changes quickly to SharePoint Apps without re-deploying the Apps. This could save a significant amount of time during App Development.

13

Download Path: http://visualstudiogallery.msdn.microsoft.com/9e03d0f5-f931-4125-a5d1-7c1529554fbd

Advanced REST Client plugin for Google Chrome

This is a Chrome Plugin that allows you configure and investigate REST Queries by configuring and executing REST API Call through the tool UI. It also allows us to look for the Stats of the REST Queries in execution.

14

Download Path: https://chrome.google.com/webstore/detail/advanced-rest-client/hgmloofddffdnphfgcellkdfbfbjeloo?hl=en-US

Postman – REST Client plugin for Google Chrome

This is again a Chrome Plugin that allows you deal with REST Calls same as “Advanced REST Client plugin for Google Chrome”.

It is just a matter of choice which one you prefer to work with.

15

Download Path: https://chrome.google.com/webstore/detail/postman-rest-client/fdmmgilgnpjigdojojpjoooidkmcomcm

SharePoint 2013 Client Browser

This is the similar tool as SharePoint Manager with the only difference that it allows us to connect to SharePoint Sites Remotely using Client APIs. So now no more need to login to SharePoint Server to browser SharePoint Site Objects using this tool.

16

Download Path: https://spcb.codeplex.com/

smtp4dev

This is an awesome tool for testing SharePoint Send Mail Functionalities no matter if it is Custom or OOB functionality that we are testing.

It is used to verify if the SharePoint is sending mails to the recipients properly. This tool intercepts the mails that were sending to the recipients by SharePoint and allows you to view them in its own UI.

17

Download Path: http://smtp4dev.codeplex.com/

PowerGUI

PowerGUI is one of the best tools available for PowerShell Programming. It provides intellisence support for writing PowerShell Scripts at the same time provides lot of useful windows for Debugging purposes.

18

Download Path: http://powergui.org/downloads.jspa

SharePoint Software Factory

The SharePoint Software Factory is a Visual Studio Extension helping SharePoint Beginners, as well as experienced developers to create, manage and deploy SharePoint solutions without having to know schema internals of the SharePoint Artifacts.

19

Following is the list of few of the features offered by this extension-

20

And many more…

For a detailed list of available features you can visit : http://www.matthiaseinig.de/docs/SPSF/OutputHTML/SPSF_RECIPES_INDEX.html

Download Path: https://spsf.codeplex.com/

SharePoint Solution Deployer

SharePoint Solution Deployer helps you to deploy SharePoint solution packages (.wsp) to multiple SharePoint environments. It deploys, retracts and upgrades one or more WSPs and can be extended to perform additional custom tasks in PowerShell before or afterwards.

It provides a simple XML configuration file which allows you to define the deployment environment by using variables i.e. to perform different actions on different URLs depending to which farm you are currently deploying.

21

Download Path: https://spsd.codeplex.com/

SharePoint Diagnostic Studio 2010

Microsoft SharePoint Diagnostic Studio 2010 (SPDiag version 3.0) was created to simplify and standardize troubleshooting of Microsoft SharePoint 2010 Products, and to provide a unified view of collected data.

This tool can be used for-

  • Gathering relevant information from a farm
  • Displaying the results in a meaningful way
  • Identifying performance issues
  • Sharing or exporting the collected data
  • Providing reports for analysis

And much more…

22

Download Path: https://technet.microsoft.com/en-us/library/hh144782(v=office.14).aspx

SPServices

SPServices is a jQuery library which abstracts SharePoint’s Web Services and makes them easier to use. It also includes functions which use the various Web Service operations to provide more useful (and cool) capabilities. It works entirely client side and requires no server install.

23

Download Path: http://spservices.codeplex.com/

SharePoint LogViewer

SharePoint Log Viewer is a Windows application for reading and filtering Microsoft SharePoint ULS Logs.

It offers the following key features-

  • View multiple SharePoint log files at once
  • Search by any field
  • Filter the log by any field
  • File drag & drop support
  • Live monitoring for entire farm
  • Export filtered log entries
  • Bookmark log entries
  • Get popup notification of SharePoint log events from system tray
  • Receive email notifications on errors
  • Redirect log entries to event log
  • Supports SharePoint 2007, 2010 and 2013

24

Download Path: http://sharepointlogviewer.codeplex.com/

FxCop

FxCop is an application that analyzes managed code assemblies (code that targets the .NET Framework common language runtime) and reports information about the assemblies, such as possible design, localization, performance, and security improvements. Many of the issues concern violations of the programming and design rules set forth in the Design Guidelines, which are the Microsoft guidelines for writing robust and easily maintainable code by using the .NET Framework.

25

Download Path: https://msdn.microsoft.com/en-us/library/bb429476(v=vs.80).aspx

JavaScript Beautifier

This online tool is used to beautify, unpack or De-obfuscate JavaScript and HTML, make JSON/JSONP readable, etc.

26

Download Path: http://jsbeautifier.org/

JSON Formatter & Validator

This is an online tool to that can be used to validate the JSON Packets

27

28

Download Path: https://jsonformatter.curiousconcept.com/

Being a SharePoint Developer I can say using these tools should be the second habit for SharePoint Developers to enhance their development capabilities which results in quick delivery turn around.

Hope you all find it helpful.