Vista Gadget

From DevWiki

Jump to: navigation, search

The Volusion API can also be integrated with a Microsoft Vista Gadget. In order to integrate with a Vista Gadget, two files are required. A gadget manifest file to define the gadget and a html page to display the XML request.

Vista Gadget Manifest File (gadget.xml)

The Vista Gadget Manifest file is an XML file that contains configuration information for the gadget. This file includes the gadget's name, author, copyright, description, icon, code and website.

<?xml version="1.0" encoding="utf-8" ?>
<gadget>
  <name>Volusion New Orders</name>
  <namespace>volusion.com</namespace>
  <version>2.0.0.0</version>
  <author name="Volusion">
    <info url="www.volusion.com" />
  </author>
  <copyright>2007</copyright>
  <description>New Order Alert Gadget</description>
  <icons>
    <icon height="48" width="48" src="new_orders.png"></icon>
  </icons>
  <hosts>
    <host name="sidebar">
      <base type="HTML" apiVersion="1.0.0" src="new_orders.html" />
      <permissions>Full</permissions>
      <platform minPlatformVersion="1.0" />
    </host>
  </hosts>
</gadget>

Note that the xml file must be named as gadget.xml

Html Page

The HTML file that makes up the gadget itself is actually no different than any Web page that uses dynamic HTML; in fact, to create the HTML file you simply use any valid HTML tagging (including CSS styles) plus script code.

<html>
  <head>
    <title>New Orders</title>
    <script type="text/javascript">
      function download_orders() {
        var api_url = "http://YourUrl/net/WebService.aspx?
        Login=YourEmail@YourDomain.com&
        EncryptedPassword=YourPassword&
        API_Name=Generic\\Orders&SELECT_Columns=o.OrderID,o.OrderStatus,od.TotalPrice&
        WHERE_Column=o.OrderStatus&WHERE_Value=New";
 
        var xmlhttp;
        var api_response = "";
 
        xmlhttp = new ActiveXObject("MSXML2.ServerXMLHTTP");
        xmlhttp.open("POST", api_url, false);
        xmlhttp.onreadystatechange = function() {
          if (xmlhttp.readyState == 4) {
            if (xmlhttp.status == 200) {
              api_response = xmlhttp.responseText;
            } else {
              //unable to connect
            }
          } else {
            //connecting...
          }
        }
        xmlhttp.send();
      }

      function display_orders(api_response) {
        var xml_api;
        var xml_order;
        var xml_order_detail;
        var node_orders;
        var node_order_details;
        var i = 0, j = 0;
        var order_id = "";
        var total_price = 0;
        var order_price = 0.0;
        var html_orders = "";
        var order_count = 0;
			
        
        html_orders = html_orders + "<table border=0 cellpadding=0 cellspacing=0 width=110>";
        html_orders = html_orders + "<tr><td><font style=\"color:#bbbbbb;font-family:calibri;
        font-size:12px;\">Order ID</font></td><td align=right><font style=\"color:#bbbbbb;
        font-family:calibri;font-size:12px;\">Total</font></td></tr>";
          

        try {
          xml_api = new ActiveXObject("MSXML2.DOMDocument");
          xml_api.loadXML(a[o_response);
          node_orders = xml_api.getElementsByTagName("Orders");
			
          xml_order = new ActiveXObject("MSXML2.DOMDocument");
          xml_order_detail = new ActiveXObject("MSXML2.DOMDocument");
			
          if (node_orders.length > 0) {
            for (i = node_orders.length - 1; i > -1; i--) {
              xml_order.loadXML(node_orders.item(i).xml); 
			
              order_id = get_node_text(xml_order, "Orders/OrderID");
              order_price = 0.0;
              node_order_details = xml_order.getElementsByTagName("Orders/OrderDetails");
              if (node_order_details.length > 0) {
                for (j = 0; j < node_order_details.length; j++) {
                  xml_order_detail.loadXML(node_order_details.item(j).xml);
                  total_price = get_node_text(xml_order_detail, "OrderDetails/TotalPrice");
                  if (isNaN(total_price) == false) {
                    order_price = parseFloat(order_price) + parseFloat(total_price);
                  }	
                }
              }
              html_orders = html_orders + "<tr><td>" + order_id + "</td>
              <td align=right>$" + 
              (Math.round(order_price * 100) / 100).toFixed(2)+ "</td></tr>";
              order_count++;
              if (order_count > 10) {break;}
            }
          }
        } catch(err) {
          //error parsing xml
        } 
			
        html_orders = html_orders + "</table>";
        content_area.innerHTML = html_orders;
      }

      function get_node_text(xml_doc, node_name) {
        var current_node;
        var node_text;
		
        current_node = xml_doc.getElementsByTagName(node_name);
        if (current_node.length > 0) {node_text = current_node.item(0).text;}
        return node_text;	
      }
    </script>
  </head>
  <body onLoad="load_gadget();">
    <g:background src="background.gif" width="130">
         
     <center>
       <table border=0 cellpadding=0 cellspacing=0 style="margin-top:2px;">
         <tr>
           <td>
             <span id="content_area">
               <font style="color:#ffffff;font-family:calibri;font-size:12px;\">Loading...</font>
             </span>
           </td>
         </tr>
       </table>
     </center>
        
  </body>
</html>
Navigation