Using Web APIs within PI forms editing

Suggested pre-requisites:

Start by "enabling forms editing within your Project Insight."

The following example will create a ToDo item then load it to view/display.

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 execute 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.


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