locked
Live Tile Notifications for Large,Wide,Medium

    Question

  • Hi,

    Need to show data on 3 kinds of tiles. The data set will be consisting of 2 columns.. 1. title 2. description.

    I have choosen

    tileSquare310x310SmallImagesAndTextList03- Large -which will show 3 titles in a single notification(i.e if I have 10 notifications a set of 3,3,3,1 will be shown in 4 flips).

    tileSquare150x150Text04- medium- which will show title in a single notification(i.e 5 for 5 a set of 1 each)

    tileWide310x150Text09-wide- which shows combination of title and description in one set, and 5 for 5 items.

    Here is the code I have written...

    function BindLiveTile(LiveTileData) {
    
    
    
            try {
    
                var notifications = Windows.UI.Notifications;
                var tileNotification;
    
                var datacount = LiveTileData.length;
                var imgurlindex = 0;
                var textindex = 0;
                var notificationsCountBigTile = Math.ceil(LiveTileData.length / 3);
    
                Windows.UI.Notifications.TileUpdateManager.createTileUpdaterForApplication().clear();
                var bagdeInfo = LiveTileData.length;
                notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueue(true);
                //notifications.TileUpdateManager.createTileUpdaterForApplication().enableNotificationQueueForWide310x150(true);
                var liveTileDataCount = LiveTileData.length > 5 ? 5 : LiveTileData.length;
                for (var notificationCount = 0; notificationCount < liveTileDataCount; notificationCount++) {
                    var squaretileXml = notifications.TileUpdateManager.getTemplateContent(ITShowCaseMetro.Constants.squareTileTemplate);
                    var squaretileImageAttributes = squaretileXml.getElementsByTagName("image");
                    var text;
    
                    var widetileXml = notifications.TileUpdateManager.getTemplateContent(ITShowCaseMetro.Constants.wideTileTemplate);
                    var widetileImageAttributes = widetileXml.getElementsByTagName("image");
    
                    // Iterate over all the image input fields and set image attributes.
                    for (var imageAttribute = 1; imageAttribute < squaretileImageAttributes.length + 1; imageAttribute++) {
                        text = LiveTileData[notificationCount].ImageUrl;
                        if (text !== "") {
                            squaretileImageAttributes[imageAttribute - 1].setAttribute("src", text);
    
                        }
                    }
    
    
                    for (var imageAttribute = 1; imageAttribute < widetileImageAttributes.length + 1; imageAttribute++) {
                        text = LiveTileData[notificationCount].ImageUrl;
                        if (text !== "") {
                            widetileImageAttributes[imageAttribute - 1].setAttribute("src", text);
                        }
                    }
                    var squaretileTextAttributes = squaretileXml.getElementsByTagName("text");
                    var widetileTextAttributes = widetileXml.getElementsByTagName("text");
    
                    // Iterate over all the text input fields and set text attributes.
                    for (var textAttribute = 1; textAttribute < squaretileTextAttributes.length + 1; textAttribute++) {
                        text = LiveTileData[notificationCount].AssetTitle;
                        squaretileTextAttributes[textAttribute - 1].appendChild(squaretileXml.createTextNode(text));
    
                    }
    
                    for (var textAttribute = 1; textAttribute < widetileTextAttributes.length + 1; textAttribute++) {
                        text = textAttribute % 2 == 0 ? LiveTileData[notificationCount].AssetDescription : LiveTileData[notificationCount].AssetTitle;
                        widetileTextAttributes[textAttribute - 1].appendChild(widetileXml.createTextNode(text));
                    }
    
    
                    //creating a bigSquareTileData.
    
                    if (notificationCount < notificationsCountBigTile) {
                        var squareBigtileXml = notifications.TileUpdateManager.getTemplateContent(ITShowCaseMetro.Constants.squareBigTileTemplate);
                        var squareBigtileImageAttributes = squareBigtileXml.getElementsByTagName("image");
                        var squareBigtiletextAttributes = squareBigtileXml.getElementsByTagName("text");
                        var text;
                        for (var imageAttribute = 1; imageAttribute < squareBigtileImageAttributes.length + 1; imageAttribute++) {
    
                            if (imgurlindex < datacount) {
                                text = LiveTileData[imgurlindex].ImageUrl;
                                if (text !== "") {
                                    squareBigtileImageAttributes[imageAttribute - 1].setAttribute("src", text);
    
                                }
                                imgurlindex + 1;
                            }
                        }
    
                        for (var textAttribute = 1; textAttribute < squareBigtiletextAttributes.length + 1; textAttribute++) {
                            if (textindex < LiveTileData.length) {
                                text = textAttribute % 2 == 0 ? LiveTileData[textindex].AssetDescription : LiveTileData[textindex].AssetTitle;
                                textindex = textAttribute % 2 == 0 ? textindex + 1 : textindex;
                                squareBigtiletextAttributes[textAttribute - 1].appendChild(squareBigtileXml.createTextNode(text));
                            }
    
                        }
    
                        var node = widetileXml.importNode(squaretileXml.getElementsByTagName("binding").item(0), true);
                        widetileXml.getElementsByTagName("visual").item(0).appendChild(node);
    
                        node = squareBigtileXml.importNode(widetileXml.getElementsByTagName("binding").item(0), true);
                        squareBigtileXml.getElementsByTagName("visual").item(0).appendChild(node);
                        tileNotification = new notifications.TileNotification(squareBigtileXml);
                        notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
                    }
    
                    else
                    {
    
                    }
    
                    //tileNotification = new notifications.TileNotification(widetileXml);
                    //notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
    
                    //tileNotification = new notifications.TileNotification(squaretileXml);
                    //notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);
    
                   
    
                }
    
    
    
    
    
    
                var badgeType = notifications.BadgeTemplateType.badgeNumber;
                var badgeXml = notifications.BadgeUpdateManager.getTemplateContent(badgeType);
    
                var badgeAttributes = badgeXml.getElementsByTagName("badge");
                badgeAttributes[0].setAttribute("value", bagdeInfo);
    
    
                var badgeNotification = new notifications.BadgeNotification(badgeXml);
                notifications.BadgeUpdateManager.createBadgeUpdaterForApplication().update(badgeNotification);
            }
            catch (exception) {
    
    
                var exception = exception;
            }
        }
    The tiles are constructing fine...

    I could see wide and large tile data, but not data on medium tile.

    Below is how tiles are combined..

    attach medium to wide and then attach wide to large and send it as notification...

     var node = widetileXml.importNode(squaretileXml.getElementsByTagName("binding").item(0), true);
                        widetileXml.getElementsByTagName("visual").item(0).appendChild(node);
    
                        node = squareBigtileXml.importNode(widetileXml.getElementsByTagName("binding").item(0), true);
                        squareBigtileXml.getElementsByTagName("visual").item(0).appendChild(node);
                        tileNotification = new notifications.TileNotification(squareBigtileXml);
                        notifications.TileUpdateManager.createTileUpdaterForApplication().update(tileNotification);

    Could some one help me out where am I going wrong.. could not figure out...



    Thanks & Regards Tejaswi Chandrapatla


    • Edited by Teja510 Friday, November 22, 2013 1:11 PM
    Friday, November 22, 2013 1:10 PM

Answers

  • Resolved by adding Square 150X150 directly to square 310X310 instead of wide 310X150.

    Thanks & Regards Tejaswi Chandrapatla

    • Marked as answer by Teja510 Tuesday, November 26, 2013 12:56 PM
    Monday, November 25, 2013 5:41 AM

All replies