RSS

Tag Archives: Tadit Kumar Dash

Skype Status on CRM Form

For the Impatient Guys…

…this is how it will look like…

Skype Online Status

Skype Online Status

Introduction

Let’s discuss the technique, by which we can easily integrate the Skype Status in our CRM Form.

We will show the Skype Status in Contact Form.

Mystery behind Skype Status

Skype Status in simply a combination of

  • Anchor to invoke the Skype Client
  • Image tag to render the Status Image

For Example -

<a href="skype:mfsi_taditd?chat">
    <img src="http://mystatus.skype.com/balloon/mfsi_taditd" 
         style="border: none;" width="150" height="60" 
         alt="My status" />
</a>

Here…

  • <a href="skype:mfsi_taditd?chat"

    Indicates that, it will invoke the Skype Client.

    Refer Figure- Skype Prompt Box below.

    After you click on “Skype” App in that dialog, it will open Skype dialog for user “mfsi_taditd” (Figure- Skype Client Invoked).
    The parameter “chat” implies that, it will open the dialog for chatting. The other option is call, which will directly call the user. More Info at Skype buttons

    Skype Prompt Box

    Skype Prompt Box

    Skype Client Invoked

    Skype Client Invoked

  • <img src="http://mystatus.skype.com/balloon/mfsi_taditd"

    loads the Skype Status Image of user.

How will we implement this in CRM Form?

We will simply generate an Anchor and Image tag combination dynamically according to the entered Skype Name and populate that inside a Div. Thus, it will render the Skype Status of user.

Let’s discuss this stepwise.

Step By Step

Step – 1: Add one Field for Skype Name (Single Line of Text) in Contact Entity and include that in form

Skype Name Field on Form

Skype Name Field on Form

Step-2: Add HTML WebResource to Show the Skype Status

Skype Status HTML WebResource

Skype Status HTML WebResource

Now, add one WebResource in Contact Form just below the Skype Name Field and select SkypeStatus.html as the WebResource file in that WebResource Properties Window. See the following image.

Include Skype Status HTML WebResource in Form

Include Skype Status HTML WebResource in Form


The HTML file will show the Skype Status Image dynamically according to the Skype Name entered in the Skype Name Field (Described at Step-1). The code of HTML page is described below.

<html>
    <head>
	<script type="text/javascript" src="../Scripts/showSkypeStatus.js" 
		    language="javascript">
	</script>
    </head>
    <body onload="showSkypeStatus(false)">
	    <div id="divSkypeAnchor">
	    </div>
    </body>
</html>

We can see that, it is executing javaScript function showSkypeStatus onload of body, which is present in javaScript file showSkypeStatus.js.

This function is responsible for creating and populating the Div (divSkypeAnchor) with the required Anchor and Image tag combination. We are going to explore more about it in the next Step.

Step-3: Add javaScript WebResource to Dynamically populate the Status

Show Skype Status JavaScript WebResource

Show Skype Status JavaScript WebResource

The function inside the above javaScript file is described below.

/// <summary>
/// This method dynamically populates the Skype Status Div.
/// </summary>
/// <param name="boolean">isXrm: true- Xrm Present, false- Xrm present on parent.</param>
function showSkypeStatus(isXrm){
    var page;
    var divSkypeAnchor;

    // If Xrm is present.
    if(isXrm){
        page = Xrm.Page;
        
        var skypeWebResource = document.getElementById("WebResource_SkypeStatus");
        var innerDoc = skypeWebResource.contentDocument 
			|| skypeWebResource.contentWindow.document;
        
	    // Get the Skype Div.
	    divSkypeAnchor = innerDoc.getElementById("divSkypeAnchor");
    }
    // If Xrm is obtained from parent page.
    else{
        page = parent.Xrm.Page;

	    // Get the Skype Div.
        divSkypeAnchor = document.getElementById("divSkypeAnchor");
    }
	
    if(page != null){
	    // Get the Skype Name (new_skypename) of the Contact from page.
        if(page.getAttribute("new_skypename").getValue() != null 
	    && page.getAttribute("new_skypename").getValue() != ""){
	        var skypeName = page.getAttribute("new_skypename").getValue();
			
		    // Create the Anchor and Image combination using the "skypeName"
	        var skypeAnchor = "<a href='skype:" + skypeName + "?chat'>";
		    skypeAnchor += "      <img src='http://mystatus.skype.com/balloon/" + skypeName + "' ";
		    skypeAnchor += "          style='border: none;' width='150' height='60' ";
		    skypeAnchor += "          alt='Status of " + skypeName + "' title='Status of " + skypeName + "' />";
		    skypeAnchor += "   </a>";

	        // Assign the "skypeAnchor" to the Skype Div.
            divSkypeAnchor.innerHTML = skypeAnchor;
	    }
    }
}

Description of Code

In the function, the main aim is to assign the Anchor and Image tag combination along with the Skype Name to the Div (divSkypeAnchor).

Let’s divide the function to two parts.

Part-1: Getting the Skype Div (divSkypeAnchor) and Page

The Contact Form is the Parent Form and the Div present inside the WebResource, is rendered as Child iFrame.
As the Skype Div (divSkypeAnchor) is present inside the iFrame, if we will access it using document object, then the document should refer to the iFrame (WebResource) and not the Parent Contact Form.
If we use

document.getElementById("divSkypeAnchor")

, then document should be the WebResource (iFrame).

As this function will be called both on Form Load and Skype Field onChange Events, we need to make sure that document refers to the Child iFrame in both cases. The argument isXrm is used to recognize whether the request comes from the HTML WebResource (Form Load Event) or the Parent Page (Skype Field onChange Events).

Let’s discuss the way, by which, we will assign value to Skype Div (divSkypeAnchor) during these events.

  • Form Load

    On Form Load, it will load the HTML WebResource and on the WebResource load, we have called the method like below. More about the WebResource at Step-2.

        <body onload="showSkypeStatus(false)">
    

    As the function is called inside the HTML WebResource, so we can directly get the Div (divSkypeAnchor) from document (as it refers to the iFrame document).

        // If Xrm is obtained from parent page.
        else{
            page = parent.Xrm.Page;
    
    	    // Get the Skype Div.
            divSkypeAnchor = document.getElementById("divSkypeAnchor");
        }
    
  • Skype Field onChange

    The main issue here is, we can’t get the Skype Div (divSkypeAnchor) directly from the document (as it will refer to the Parent Contact page). This is because the event executes on Skype Name Field onChange of Parent Contact Page.
    To indicate that the request is going from Contact Form, we are passing isXrm as true. More at Step-4.
    So, “if” part executes and we are getting the WebResource by…

    document.getElementById("WebResource_SkypeStatus")

    Then innerDoc is obtained by

    var innerDoc = skypeWebResource.contentDocument 
                    || skypeWebResource.contentWindow.document;

    , which refers to the iFrame Document.

    Now problem is solved. Using the innerDoc, we can now get the Div (divSkypeAnchor).

        // If Xrm is present.
        if(isXrm){
            page = Xrm.Page;
    
            var skypeWebResource = document.getElementById("WebResource_SkypeStatus");
            var innerDoc = skypeWebResource.contentDocument 
                            || skypeWebResource.contentWindow.document;
    
    	    // Get the Skype Div.
    	    divSkypeAnchor = innerDoc.getElementById("divSkypeAnchor");
        }
    

Part-2: Assigning value to the Skype Div (divSkypeAnchor)

    if(page != null){
	    // Get the Skype Name (new_skypename) of the Contact from page.
        if(page.getAttribute("new_skypename").getValue() != null
	    && page.getAttribute("new_skypename").getValue() != ""){
	        var skypeName = page.getAttribute("new_skypename").getValue();

		    // Create the Anchor and Image combination using the "skypeName"
	        var skypeAnchor = "<a href='skype:" + skypeName + "?chat'>";
		    skypeAnchor += "      <img src='http://mystatus.skype.com/balloon/" + skypeName + "' ";
		    skypeAnchor += "           style='border: none;' width='150' height='60' ";
		    skypeAnchor += "           alt='Status of " + skypeName + "' title='Status of " + skypeName + "' />";
		    skypeAnchor += "   </a>";

		    // Assign the "skypeAnchor" to the Skype Div.
            divSkypeAnchor.innerHTML = skypeAnchor;
	    }
    }

First we are getting the value of Skype Name field using the page variable

var skypeName = page.getAttribute("new_skypename").getValue();

This page variable is determined by isXrm parameter as we discussed in Part-1.
Using the skypeName, the skypeAnchor (Described at Mystery behind Skype Status) is created and assigned to divSkypeAnchor in the next line.

Step-4: Register onChange Event for Skype Name Field

Go to Contact Form Properties. Add showSkypeStatus.js in Form Libraries Section and Skype Name onChange Handler in Event Handlers Section.

Contact Form Properties

Contact Form Properties

The Event Handler Properties is shown below. Note that function here is showSkypeStatus and parameter passed is true for isXrm. (Described at here).

Skype Name onChange Handler Properties

Skype Name onChange Handler Properties

Gallery

Are you Away or Busy? Check how it shows the Status on the Contact Form.

Skype Away Status

Skype Away Status

Skype Busy Status

Skype Busy Status

Downloads

HTML WebResourceSkypeStatus.html
javaScript WebResourceshowSkypeStatus.js

What you feel?

If you find this Blog as helpful, then please Like and Share among your Friends and Colleagues and add some Comments. It really means a lot. That will also help to fine-tune my technical skills.

Hope you enjoyed reading the Blog.

By Tadit Kumar Dash
Software Engineer @Team DynamicsCRM.
Mindfire Solutions

 
3 Comments

Posted by on September 10, 2013 in WebResources

 

Tags: , , , , , , , , , , , , , , , , , , ,

 
Follow

Get every new post delivered to your Inbox.

%d bloggers like this: