This page describes how a JQUERY based API can be used along with OMNINxG. In this example we setup a calendar instance and obtain data by AJAX calls to the DNN API Endpoints that have been created.
<link href='/omni/js/fullcalendar/fullcalendar.css' rel='stylesheet' />
<script src='/omni/js/fullcalendar/lib/moment.min.js'></script>
<script src='/omni/js/fullcalendar/fullcalendar.min.js'></script>
<style> #calendar { height: 600px; margin: 100 auto; } </style>
<script>
$(document).ready(function()
{
// hide the warning div
$("#eventwarning").hide();
// Bind the Buttons for the Modal Dialog
$( "#eventdelete" ).bind("click",function() {
// disable the delete button and add a spinner to the button
$( "#eventdelete" ).attr( "disabled", "disabled" );
$("#eventdelete").html("<img src='/omni/images/dnnanim.gif'/> Please Wait");
// add the delete call
$.ajax({
url: "/omni/DesktopModules/DnnSharp/DnnApiEndpoint/Api.ashx?method=CRMProspectFollowupDelete",
data: {followupid: $( '#eventdelete' ).data('eventid')}
}).done(function(result) {
// check if there is a success code in the response
if(result.success == 1)
{
// remove the event from the calendar
$('#calendar').fullCalendar( 'removeEvents' ,$( '#eventdelete' ).data('eventid'))
// hide the modal
$("#eventdelete").html("<span class='fa fa-trash-o'></span> Delete");
$( "#eventdelete" ).removeAttr( "disabled");
$('#myModal').modal('hide');
}
else
{
$("#eventwarning").html("The Scheduled Followup could not be Deleted.");
$("#eventwarning").show();
$("#eventdelete").html("<span class='fa fa-trash-o'></span> Delete");
$( "#eventdelete" ).removeAttr( "disabled");
}
});
});
$( "#eventcompleted" ).bind("click",function() {
$('#myModal').modal('hide');
window.location = "/omni/CRM/Prospects/ProspectSchedule.aspx?fid="+$( '#eventcompleted' ).data('eventid');
});
// Bind the calendar
$('#calendar').fullCalendar({
height: 600,
header: { left: 'prev,next today', center: 'title', right: 'month,basicWeek,basicDay' },
editable: false,
allDayDefault: true,
eventLimit: true, // allow "more" link when too many events
eventClick: function(calEvent, jsEvent, view) {
$('#eventdetail').html(calEvent.title); // change the title of the modal dialog
$('#eventtitle').html('Scheduled Followup on ' + $.fullCalendar.moment(calEvent.start).format('DD-MM-YYYY'));
// add the id of the event to delete and complete
$( '#eventdelete' ).data('eventid',calEvent.id);
$( '#eventcompleted' ).data('eventid',calEvent.id);
// show the modal
$('#myModal').modal('show');
},
events:
[
<razor>
@{
var args = new Dictionary<string,object>(){{"id",Request.QueryString["oid"]}};
var hasComma = false;
foreach(var dbRow in OMNICRM.GetProspectScheduledFollowups(args))
{
if(dbRow.followup_id != null && !String.IsNullOrEmpty(dbRow.followup_id.ToString()))
{
var title = dbRow.scheduled_notes.ToString();
var eventBorderColor = "#2a6496";
if(dbRow.is_completed != null && dbRow.is_completed.ToString() == "1") {eventBorderColor = "#c0c0c0";}
if(dbRow.ContactName != null && !String.IsNullOrEmpty(dbRow.ContactName.ToString()) ){ title += " with "+ dbRow.ContactName.ToString();}
if(dbRow.FollowUpByName != null && !String.IsNullOrEmpty(dbRow.FollowUpByName.ToString())){title += " by "+dbRow.FollowUpByName.ToString() ;}
if(hasComma){
<text>,</text>
}
<text>{ id: @dbRow.followup_id, title: '@title', start: '@dbRow.scheduled_followup_date_ISO', borderColor: '@eventBorderColor' }</text>
hasComma = true;
}
}
}
</razor>
]
});
});
</script>
<div id='calendar'></div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="eventtitle">Scheduled Followup</h4>
</div>
<div class="modal-body" id="eventdetail">
</div>
<div class="modal-footer">
<div class="alert alert-warning" id="eventwarning"></div>
<button type="button" class="btn btn-default btn-xs" data-dismiss="modal"><span class="fa fa-times"></span> Close</button>
<button type="button" class="btn btn-danger btn-xs" id="eventdelete" ><span class="fa fa-trash-o"></span> Delete</button>
<button type="button" class="btn btn-info btn-xs" id="eventcompleted" ><span class="fa fa-thumbs-o-up"> Completed</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
The link and script tags setup the JS files and the CSS that you want to include in the Page.
The ready function calls the function inside it when the page has completed loading. This is used to setup the various JQuery Elements and Javascript objects that are used throughout the page.
The bind function sets up another function to be called when the click event is fired on the OBJECT with the ID #eventdelete i.e. when the eventdelete button is clicked the function defined in the bind call will be called.
The $.ajax call performs the following:
The URL to which an AJAX request will be sent. This URL will be created using the Endpoint Module - the method to be called is also specified directly in the URL.
The data that is sent to the URL is also defined here.
This function that is called after the AJAX function returns i.e. the server returns its response.
Razor Tag
The <razor> tag contains C# code that is executed on the Server-side when the page is first generated. Here is the sequence of calls:
Setup the parameters to send to the TOKEN that is being called.
OMNICRM.GetProspectScheduledFollowups is the Token that is called - and args is the parameters that are being passed into it. The TOKEN returns an array of Objects.
The foreach loop iterates through the array of Objects that is references with dbRow.
The Token OMNICRM.GetProspectScheduledFollowups calls a Stored Procedure that returns many rows that match the parameter being passed into it. Each row is being stored in dbRow when the loop runs. The columns in the row are being referenced with the "." operator i.e. dbRow.ContactName is the ContactName column in the record being returned.