Community Toolbar

Conduit API

Case Study

Case Study -> Personal App -> Introduction

The Personal Apps page will be hosted on your server and displayed on your toolbar as an HTML App. It is actually another version of the personalization identification you already run on your website.
(Note: The page you create can have any extension, such as .php, .aspx, etc.)

Personal Apps provide you with the ability to expose user-specific information through your toolbar.

Example case study sections:

1. User login

2. Quick search

3. User messages

- Flow Chart

- 'Date Me' Code Sample

'Date Me' ToolbarApiCommunication.js file

// Utility functions to communicat with Conduit toolbars var linkBaseUrl = "http://demosite.conduit.com/Website/SearchResults.aspx?gender="; var genderString = null; var ageString = "18-25"; function OpenGadget(url, width, height){ OpenFloatingWindow(url, width, height); } function ChangeComponentWidth(width){ ChangeWidth(width); } function loadUser(){ // Load user name and password if stored on toolbar var userName = RetrieveKey("userName"); if(userName != null || userName != ""){ var userNameCtl = document.getElementById("userNameTextBox"); userNameCtl.value = userName; // Check if password was stored var password = RetrieveKey("password"); if(password != null || password != ""){ var passwordCtl = document.getElementById("passwordTextBox"); passwordCtl.value = password; } } } function RefreshAndClose(){ RefreshToolbar(); setTimeout('CloseFloatingWindow()',500); } function OpenGadget(url, width, height){ OpenFloatingWindow(url, width, height); } function Logout(){ LoadXMLDoc('http://demosite.conduit.com/Toolbar/LogoutUser.ashx'); RefreshToolbar(); } function RefreshMyToolbar(){ // Get you toolbar handle var oToolbar = new TPI.Toolbar("CT2297876"); var oReturn = oToolbar.Refresh(); } function GenderChange(){ var male = document.getElementById("genderMale"); var female = document.getElementById("genderFemale"); if(male.checked == true){ genderString = "male"; } if(female.checked == true){ if(genderString == null){ genderString = "female"; } else{ genderString += ",female"; } } // Set the main frame url var link = document.getElementById("serachResultLink"); link.href = linkBaseUrl + genderString + "&age=" + ageString + "#_main"; } function AgeChange(){ // Set the main frame url var link = document.getElementById("serachResultLink"); var age = document.getElementById("ageRange"); ageString = age.options[age.selectedIndex].text; link.href = linkBaseUrl + genderString + "&age=" + ageString + "#_main"; } function SearchClick(){ if(genderString == null){ alert('Please selecte a gender'); return false; } var link = document.getElementById("serachResultLink"); location.href = link.href; // Close the gadget window CloseFloatingWindow(); } function loadUser(){ // Load user name and password if stored on toolbar var userName = RetrieveKey("userName"); if(userName != null || userName != ""){ var userNameCtl = document.getElementById("userNameTextBox"); userNameCtl.value = userName; // Check if password was stored var password = RetrieveKey("password"); if(password != null || password != ""){ var passwordCtl = document.getElementById("passwordTextBox"); passwordCtl.value = password; } } } function LoadXMLDoc(url){ try{ if (window.XMLHttpRequest) { // code for all new browsers xmlhttp = new XMLHttpRequest(); } else if (window.ActiveXObject) {// code for IE5 and IE6 try{ xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e){ xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } } if (xmlhttp != null) { xmlhttp.open("GET", url, false); xmlhttp.send(null); } else { // Error } } catch(e){ // Error alert(e); } }

'Date Me' HTML App (personal data component) .aspx code

<%@ page language="C#" autoeventwireup="true" CodeFile="~/Toolbar/PersonalData.aspx.cs" inherits="PersonalData" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head id="Head1" runat="server"> <title>Date Me | Toolbar</title> <meta http-equiv="refresh" content="60"> <!-- Conduit API script declaration --> <script type="text/javascript" language="JavaScript" src="http://api.conduit.com/BrowserCompApi.js" ></script> <script type="text/javascript" language="JavaScript" src="http://api.conduit.com/ToolbarApi.js" ></script> <script type="text/javascript" language="JavaScript" src="../Scripts/ToolbarApiCommunication.js"></script> <style type= "text/css"> body{ margin-left:0; margin-right:0; margin-top:0; margin-bottom:0; width:100%; height:100%; overflow:hidden; background-color:threedface; font-family:Arial; font-size:12px; } </style> </head> <body> <form id="personalDataForm" runat="server"> <table runat="server" id="userLoginTable" cellpadding="0" cellspacing="0" border="0" style="vertical-align:middle" width="35px"> <tr align="center" style="height:25px"> <td> <input type="image" src="../Images/login.gif" alt="Login" style="display:inline-table;vertical-align:middle" onclick="OpenGadget('http://demosite.conduit.com/Toolbar/ToolbarLogin.aspx', 340, 230);return false;"   /> </td> </tr> </table> <table runat="server" id="userPersonalTable" cellpadding="0" cellspacing="0" border="0" style="vertical-align:middle" width="70px"> <tr align="Center" style="height:25px"> <td> <input type="image" src="../Images/logout.gif" onclick="Logout();return false;" alt="Logout" style="display:inline-table;vertical-align:middle"   /> </td> <td> <input type="image" src="../Images/search.gif" alt="Search" style="display:inline-table;vertical-align:middle" onclick="OpenGadget('http://demosite.conduit.com/Toolbar/QuickSearch.htm', 340, 220);return false;"   /> </td> </tr> </table> </form> </body> </html>

'Date Me' HTML App (personal data component) .aspx.cs code

using System; public partial class PersonalData : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { String widthScript = null; if (Context.User != null) { SetPresonalData(Context.User.Identity.IsAuthenticated, out widthScript); } else // The user is not logged in { SetPresonalData(false, out widthScript); } // Register the sturtup script if (!Page.ClientScript.IsStartupScriptRegistered("width")) { Page.ClientScript.RegisterStartupScript(this.GetType(), "width", widthScript); } } private void SetPresonalData(Boolean authenticated, out String script) { userLoginTable.Visible = !authenticated; userPersonalTable.Visible = authenticated; // Set a script to change the component width script = authenticated ? "<script language='javascript'>ChangeComponentWidth(\"70\");</script>" : "<script language='javascript'>ChangeComponentWidth(\"35\");</script>"; } }