Gmail Contextual Gadget (Part 2)

Last post I talked about how to set up the manifest to trigger whenever there are certain key words in your email message. Though now I want to talk about how to go about building a button and list gadget. This button and drop down list will appear each time it matches the regular expression that one sets up in the application manifest.

Though in a gadget what is needed to build your application are the following:

 

<?xml version="1.0" encoding="UTF-8"?>

<Module>
    <ModulePrefs title="Your Gadget"
                 description=""
                 height="20"
                 author=""
                 author_email=""
                 author_location="">

        <!-- Declare feature dependencies.
The first one is not specific to Gmail contextual gadgets. -->
        <Require feature="dynamic-height"/>

        <!-- The next feature, google.contentmatch, is required for all
Gmail contextual gadgets.
<Param> - specify one or more comma-separated extractor IDs in
a param named "extractors". This line is overridden by the extractor ID
in the manifest, but is still expected to be present. -->
        <Require feature="google.contentmatch">
            <Param name="extractors">
                google.com:MessageIDExtractor,google.com:SenderEmailExtractor,google.com:RawSubjectExtractor,google.com:RecipientEmailExtractor
            </Param>
        </Require>
    </ModulePrefs>

    <!-- Define the content type and display location. The settings
"html" and "card" are required for all Gmail contextual gadgets. -->
    <Content type="html" view="card">
    <!--[<span pre=""-->CDATA[
<script type="text/javascript">// <![CDATA[
src</span>="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
// ]]></script>
        <script type = "text/javascript">

		//Here you can build your application using javascript and html.
    ]]>
  </Content>
</Module>

Now that I explain how to go about setting up your gadget, now comes the coding part into the content part of the xml.

The main idea is to create drop down list and button that will display a list of your clients in which you can save your message history into your CMS system. In this case I wanted to restrict this list down to people who are not from Gate6. By doing that I can take an array of email addresses from the To and From section of the email and parse them. This will only store the ones that don’t have a @gate6.com and @gatesix.com email address. Also I want to store the subject and message id where I can locate this email.

This is shown below:

<script type="text/javascript">// <![CDATA[
src</span>="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
// ]]></script>
        <script type = "text/javascript">

		$(document).ready(function()
		{
			var messageid;
			var subject;
			var clients = [];

                        //Gets all data from the email that was extracted and stores it in matches array.
			matches = google.contentmatch.getContentMatches();
			for(var match in matches)
			{
				for(var key in matches[match])
				{
					if(key == 'message_id')
					{
                                                //Stores the message id from the email thread
						messageid = matches[match][key];
					}
					if(key == 'sender_email')
					{
                                                //Looks into the From email section to store non Gate6 employees
						if(!(matches[match][key].indexOf("gate6") > -1) || (matches[match][key].indexOf("gatesix") > -1))
						{
							clients.push(matches[match][key]);
						}
					}
					if(key == 'subject')
					{
                                                //Stores whatever subject the email thread has
						subject = matches[match][key];
					}
					if(key == 'recipient_email')
					{
                                                //Looks into the To section of the email and stores non Gate6 employees
						if(!(matches[match][key].indexOf("gate6") > -1) || (matches[match][key].indexOf("gatesix") > -1))
						{
							clients.push(matches[match][key]);
						}
					}

				}
			}

With the storing of values completed then we can manipulate and create our list and submit button, which will make an AJAX call to return a JSON response. This AJAX call sends data selected to the php backend. The PHP backend then manipulates this data and sends it to the Quickbase CRM As shown below:

//This will display the list and submit button if there exists people who are not Gate6 employees
			if(clients.length > 0)
			{
				$("<select id="<span class=&quot;hiddenSpellError&quot; pre=&quot;&quot;>emailList</span>" name="emailList">").appendTo("#myForm");</select>
				//Loop that gets all possible clients from the email address and makes a drop down item
				for(i=0;i
				{
					$("").val(clients[i]).html(clients[i]).appendTo("#emailList");
				}
				$("<input id="<span class=&quot;hiddenSpellError&quot; pre=&quot;&quot;>showbtn</span>" type="submit" name="submit" value="Send To Quickbase CRM" />").appendTo("#myForm");
			}

			//Creates the string which will be where the message will be located in Gmail
			var url = 'https://mail.google.com/mail/u/0/#all/' + messageid;
			var encodedurl = encodeURIComponent(url);

			if(clients.length != 0)
			{
				var contact = getListValue();
			}

			//AJAX call to my php backend where I make calls into Quickbase CRM
			$('#showbtn').click(function(){
				//$('input[type=submit]', this).attr('disabled','disabled');
				var dataValues = "subject=" + subject + "&url=" + encodedurl + "&contact=" + contact + "&messageID=" + messageid;
				$.ajax({
					type: 'GET',
					data: dataValues,
					cache: false,
					contentType: "application/json",
					dataType: "jsonp",
					url: "http://test.com/quickbase/sendtocrm.php?callback=?",
					success: function(response){
					//Output result on success
						if(response.success == 2)
						{
							alert("Success: Sent To Quickbase")
						}
						else if(response.success == 1)
						{
							alert("Error: Contact Doesn't Exist")
						}
						else if(response.success == 0)
						{
							alert("Error: Message Thread Is Already In Quickbase")
						}
					}
				});
				return false;
			});
		});

		adjustPageHeight();

		//This adjusts the size of the window that will carry the button and list
		function adjustPageHeight()
		{
			gadgets.window.adjustHeight(50);
			setTimeout('adjustPageHeight()',1000);
		}

		//Counts the number of items in the drop down list
		function getListValue()
		{
			var val = document.getElementById("emailList");
			var email = val.options[val.selectedIndex].value;
			return email;
		}

        </script>
		<form id="myForm">
		</form>

With this now we can look into the fun stuff which is the PHP code that makes API calls to the web application Quickbase.

Leave a comment

Your email address will not be published. Required fields are marked *