Using Web APIs within PI forms editing

So you're ready to consume Web APIs (home grown, 3rd party or Project Insights) and need a sense of direction on how to implement?

Well, this guide will give you a brief overview this can be accomplished!

First, the pre-requisites:

Each item above has a reference with more details for you to learn and grasp how all the components come together and work.

Once you have enabled forms editing within your Project Insight, let's begin by creating a simple ToDo item then loading it to view/display it.

Forms Editing with JavaScript
Figure 1 - Add an Ajax 'GET' method to return a response from the Project Insights Web Api.
Tip: You can request a method from any URL (as long it is valid). Also, "GUID" and "Id" are interchangeable and used to retrieve the item.

	
$(function() {
    // Handler for .ready() called.
    $.get( "/api/to-do/{GUID}", function( data ) {
    alert( "Data Loaded: " + data );
    });
});

The example above will make a request and return a response "data". We can then debug to the console window or alert the client with the object returned.

When you reload the page; the jQuery will be executed with the AJAX method that will perform a 'GET'. Once the response is returned, we call perform an alert or set a debugger to "see" the actual execution and the response object (if applicable).


Figure 2 - Execution of the jQuery to make an Ajax 'GET' call method to the web api.
Tip: Using a developers plug-in or Chrome dev tools, you can debug more effectively in the console.

With just a few lines of code and configuration within Project Insight, you'll be able to leverage and customize your environment to your specifications!

If you have any further questions or comments, please leave them below.

Thank you and happy coding!

Online 6/13/2017