locked
How can I insert 'link' in the item detail page by json? (CotosoCookbook app)

    Question

  • Hi. i am customizing the ContosoCookbook html / js sample app.

    this sample app show text data by json from the 'Recipes.txt' file.  

    but i want to show some 'link' not only text... how can i do that?

    "url" : "http://...." - this is not working.

    Please, let me know.. 

     attachment : itemdetail.html

    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8" />
        <title>itemDetailPage</title>
        
        <!-- WinJS references -->
        <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
        <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
        <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
        <link href="/css/default.css" rel="stylesheet" />
        <link href="/pages/itemDetail/itemDetail.css" rel="stylesheet" />
        <script src="/js/data.js"></script>
        <script src="/pages/itemDetail/itemDetail.js"></script>
    </head>
    <body>
        <!-- The content that will be loaded and displayed. -->
        <div class="itemdetailpage fragment">
            <header aria-label="Header content" role="banner">
                <button class="win-backbutton" aria-label="Back" disabled></button>
                <h1 class="titlearea win-type-ellipsis">
                    <span class="pagetitle"></span>
                </h1>
            </header>
            <div class="content" aria-label="Main content" role="main">
                <article>
                    <div>
                        <header>
                            <h2 class="item-title"></h2>
                        </header>
                        <img class="item-image" src="#" />
                        <h2>Preparation time: <span class="item-subtitle"></span> minutes
                       </h2>
                        <div id="timer">
                            <span class="timer-time">00:00</span>
                            <button class="timer-button">
                                Start
                            </button>
                        </div>
                    </div>
                    <div class="ingredients">
                        <h2>Ingredients</h2>
                        <div class="item-ingredients"></div>
                    </div>
                    <div class="directions">
                        <h2>Directions</h2>
                        <h2 class="item-directions"><button id="purchase" class="purchase-button"></button></h2>
                    </div>
                </article>
            </div>
        </div>
        <div id="appbar" data-win-control="WinJS.UI.AppBar">
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'brag', label:'Brag', icon:'emoji2', section:'selection', type:'flyout', flyout:'bragFlyout'}"></button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'pin', label:'Pin', icon:'pin', section: 'selection'}"></button>
            <button data-win-control="WinJS.UI.AppBarCommand" data-win-options="{id:'remind', label:'Reminder', icon:'clock', section: 'selection'}"></button>
        </div>
        <div id="bragFlyout" data-win-control="WinJS.UI.Menu">
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'photo', label:'Photo'}"></button>
            <button data-win-control="WinJS.UI.MenuCommand" data-win-options="{id:'video', label:'Video' }"></button>             
        </div>
    </body>
    </html>

    attachment : itemdetail.js

    (function () {
        "use strict";
        var ui = WinJS.UI;
        var utils = WinJS.Utilities;
        var storage = Windows.Storage;
        var dtm = Windows.ApplicationModel.DataTransfer.DataTransferManager;
        var capture = Windows.Media.Capture;
        var start = Windows.UI.StartScreen;
        var notify = Windows.UI.Notifications;
        var popups = Windows.UI.Popups;
        var _photo;
        var _video;
        var item; // Current recipe
        ui.Pages.define("/pages/itemDetail/itemDetail.html", {
            // This function is called whenever a user navigates to this page. It
            // populates the page elements with the app's data.
            ready: function (element, options) {
                item = options && options.item ? Data.resolveItemReference(options.item) : Data.items.getAt(0);
                element.querySelector(".titlearea .pagetitle").textContent = item.group.title;
                element.querySelector("article .item-title").textContent = item.title;
                element.querySelector("article .item-subtitle").textContent = item.preptime;
                element.querySelector("article .item-image").src = item.backgroundImage;
                element.querySelector("article .item-image").alt = item.shortTitle;
                // Display ingredients list
                var ingredients = element.querySelector("article .item-ingredients");
                for (var i = 0; i < item.ingredients.length; i++) {
                    var ingredient = document.createElement("h2");
                    ingredient.textContent = item.ingredients[i];
                    ingredient.className = "ingredient";
                    ingredients.appendChild(ingredient);
                }
                // Display cooking directions
                var app = Windows.ApplicationModel.Store.CurrentAppSimulator;
                var license = app.licenseInformation;
                if (license.productLicenses.ItalianRecipes.isActive || item.group.key !== "Italian") {
                    // Display cooking directions
                    element.querySelector("article .item-directions").textContent = item.directions;
                }
                else {
                    // Show the purchase price on the purchase button
                    var button = document.querySelector("#purchase");
                    app.loadListingInformationAsync().then(function (listing) {
                        var price = listing.productListings.ItalianRecipes.formattedPrice;
                        button.textContent = "Purchase Italian Recipes for " + price;
                    });
                    // Handle licensechanged events
                    app.licenseInformation.onlicensechanged = function () {
                        if (license.productLicenses.ItalianRecipes.isActive) {
                            // Replace purchase button with cooking directions
                            var directions = element.querySelector("article .item-directions");
                            if (directions !== null) {
                                directions.textContent = item.directions;
                            }
                        }
                    };
                    // Handle clicks of the purchase button
                    button.onclick = function () {
                        app.requestProductPurchaseAsync("ItalianRecipes", false);
                    };
                }
                element.querySelector(".content").focus();
                // Register for datarequested events for sharing
                dtm.getForCurrentView().addEventListener("datarequested", this.onDataRequested);
                // Handle click events from the Photo command
                document.getElementById("photo").addEventListener("click", function (e) {
                    var camera = new capture.CameraCaptureUI();
                    // Capture a photo and display the share UI
                    camera.captureFileAsync(capture.CameraCaptureUIMode.photo).then(function (file) {
                        if (file != null) {
                            _photo = file;
                            dtm.showShareUI();
                        }
                    });
                });
                
                // Handle click events from the Video command
                document.getElementById("video").addEventListener("click", function (e) {
                    var camera = new capture.CameraCaptureUI();
                    camera.videoSettings.format = capture.CameraCaptureUIVideoFormat.wmv;
                    // Capture a video and display the share UI
                    camera.captureFileAsync(capture.CameraCaptureUIMode.video).then(function (file) {
                        if (file != null) {
                            _video = file;
                            dtm.showShareUI();
                        }
                    });
                });
                // Handle click events from the Pin command
                document.getElementById("pin").addEventListener("click", function (e) {
                    var uri = new Windows.Foundation.Uri("ms-appx:///" + item.tileImage);
                    var tile = new start.SecondaryTile(
                        item.key,                                    // Tile ID
                        item.shortTitle,                             // Tile short name
                        item.title,                                  // Tile display name
                        JSON.stringify(Data.getItemReference(item)), // Activation argument
                        start.TileOptions.showNameOnLogo,            // Tile options
                        uri                                          // Tile logo URI
                    );
                    tile.requestCreateAsync();
                });
                // Handle click events from the Reminder command
                document.getElementById("remind").addEventListener("click", function (e) {
                    // Create a toast notifier
                    var notifier = notify.ToastNotificationManager.createToastNotifier();
                    // Make sure notifications are enabled
                    if (notifier.setting != notify.NotificationSetting.enabled) {
                        var dialog = new popups.MessageDialog("Notifications are currently disabled");
                        dialog.showAsync();
                        return;
                    }
                    // Get a toast template and insert a text node containing a message
                    var template = notify.ToastNotificationManager.getTemplateContent(notify.ToastTemplateType.toastText01);
                    var element = template.getElementsByTagName("text")[0];
                    element.appendChild(template.createTextNode("Reminder!"));
                    // Schedule the toast to appear 30 seconds from now
                    var date = new Date(new Date().getTime() + 5000);
                    var stn = notify.ScheduledToastNotification(template, date);
                    notifier.addToSchedule(stn);
                });
            },
            onDataRequested: function (e) {
                var request = e.request;
                request.data.properties.title = item.title;
                if (_photo != null) {
                    request.data.properties.description = "Recipe photo";
                    var reference = storage.Streams.RandomAccessStreamReference.createFromFile(_photo);
                    request.data.properties.Thumbnail = reference;
                    request.data.setBitmap(reference);
                    _photo = null;
                }
                else if (_video != null)
                {
                    request.data.properties.description = "Recipe video";
                    request.data.setStorageItems([_video]);
                    _video = null;
                }
                else {
                    request.data.properties.description = "Recipe ingredients and directions";
                    // Share recipe text
                    var recipe = "\r\nINGREDIENTS\r\n" + item.ingredients.join("\r\n");
                    recipe += ("\r\n\r\nDIRECTIONS\r\n" + item.directions);
                    request.data.setText(recipe);
                    // Share recipe image
                    var uri = item.backgroundImage;
                    if (item.backgroundImage.indexOf("http://") != 0)
                        uri = "ms-appx:///" + uri;
                    uri = new Windows.Foundation.Uri(uri);
                    var reference = storage.Streams.RandomAccessStreamReference.createFromUri(uri);
                    request.data.properties.thumbnail = reference;
                    request.data.setBitmap(reference);
                }
            },
            unload: function () {
                WinJS.Navigation.removeEventListener("datarequested", this.onDataRequested);
            }
        });
    })();


    • Edited by 박대웅 Thursday, January 10, 2013 9:36 PM
    Thursday, January 10, 2013 9:32 PM

Answers

  • Hi,

    You can parse the json value as follow:

    var myJSONObject=JSON.parse(str); 

    And then you can get the link value like: myJSONObject.link

    Roy
    MSDN Community Support | Feedback to us
    Develop and promote your apps in Windows Store
    Please remember to mark the replies as answers if they help and unmark them if they provide no help.

    • Marked as answer by Song Tian Wednesday, January 16, 2013 9:34 AM
    Friday, January 11, 2013 7:27 AM

All replies