Export (0) Print
Expand All

Customizing the UserInfo Control

Ff748538.note(en-us,MSDN.10).gifNote:
Current information about Live Connect is now available in the Windows Live Developer Center. The information in the following sections is provided for legacy purposes only.

You can customize the appearance and behavior of the Windows Live Messenger Connect UI controls by modifying the templates for those controls. This topic shows how the templates are constructed and explains how to make some basic modifications.

The UI for the UserInfo control can be customized by adding a <span> tag as a child element to the <wl:userinfo> element, with two attributes: an id attribute with a value of "userInfoTemplate", and a class attribute with a value of "sys-template". This UI markup can include Microsoft Ajax binding converter syntax to bind properties of Document Object Model (DOM) elements to properties in a ProfileCollection object. The following example demonstrates customization to:

  • Prevent the thumbnail image from appearing.
  • Display a text frame that contains the user's first name.
  • Add another text frame to show the user's location.
<wl:UserInfo>
<span id='userInfoTemplate' class='sys-template'>
    <div class='LiveConnectProfileTextFrame'>
        <div class='LiveConnectProfileName' 
            sys:innertext=""{binding aboutYouProfile.firstName,convert={{new Function('a'\, 'return a?a:String.Empty;')}} }"">
        </div>
        <div class='LiveConnectProfileStatus' 
            sys:innertext=""{binding statusProfile.statusText,convert={{new Function('a'\, 'return a?a:String.Empty;')}} }"">
        </div>
        <div class='LiveConnectUserInfoTextFrame'>
            Your location is: 
            <span id='UserInfoLocation' class='LiveConnectUserInfoName'
            sys:innertext='{binding aboutYouProfile.location}'>
        </div>
    </div>
</span>
</wl:UserInfo>

The following example demonstrates how to customize the UserInfo control on a webpage.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:wl="http://apis.live.net/js/2010">
<head id="Head1" runat="server">

    <script type="text/javascript" src=" https://js.live.net/4.0/loader.js"></script>

    <script type="text/javascript">
        function appLoaded(applicationLoadCompletedEventArgs) {
            // app loaded
        }
        function signin() {
            Microsoft.Live.App.signIn(signInComplete);
        }
        function signInComplete(signInCompletedEventArgs) {
            if (signInCompletedEventArgs.get_resultCode() !== Microsoft.Live.AsyncResultCode.Success) {
                alert("sign-in failed: " + signInCompletedEventArgs.get_error());
                return;
            }
            else {
                // success code
            }
        }
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        Enriched with Windows Live Data!</h2>
        <input type="button" onclick="signin()" value="Sign In" />
        <br />
        <hr />
        <wl:UserInfo>
        <span id='userInfoTemplate' class='sys-template'>
            <div class='LiveConnectProfileTextFrame'>
                <div class='LiveConnectProfileName' 
                    sys:innertext=""{binding aboutYouProfile.firstName,convert={{new Function('a'\, 'return a?a:String.Empty;')}} }"">
                </div>
                <div class='LiveConnectProfileStatus' 
                    sys:innertext=""{binding statusProfile.statusText,convert={{new Function('a'\, 'return a?a:String.Empty;')}} }"">
                </div>
                <div class='LiveConnectUserInfoTextFrame'>
                    Your location is: 
                    <span id='UserInfoLocation' class='LiveConnectUserInfoName'
                    sys:innertext='{binding aboutYouProfile.location}'>
                </div>
            </div>
        </span>
        </wl:UserInfo>
        <wl:app
            channel-url="http://<Your-Domain>/channel.html"
            callback-url="http://<Your-Domain>/OAuthWrapCallback.axd"
            client-id="<Your-Client-ID>"
            scope="wl_Contacts.View,wl_Profiles.View"
            onload="appOnload">
        </wl:app>
    </div>
    </form>
</body>
</html>

Show:
© 2014 Microsoft