Set details for each item - App Grade

Question

I started an application grid, and now wanted to pin down one html page for each item.

The application comes with a default page "itemDetail.html", but what I write on this page, will appear on all items.

How can I pin down some information on this page, for each item, or create an html page for each item?

Answer 1

Hi Josue,

I'm not quite sure what you mean here, provide me some information please.

I think you might be ask if you can bind address in iframe as girdview item, the answer is absolutely yes, you could use itemTemplate property to bind a HTML address for iframe.

But still I'm confused with your question, maybe a better explanation is preferred.

Best Regards,

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 2

Hi James,

I'll try to explain better...

I am creating a project "Grid Application". In the file "data.js" is the main information of groups and items. 

Whenever you click the item, it opens the file "itemDetail.html". I was wondering how can I create a html file for each item.

I do not know how to do is, for each item, open a different html file.


If you create a new project "Grid Application", and observe these file, you will better understand what I'm trying to do.



I appreciate help. Thank you.

Answer 3

Hi Josue,

Ok, thanks for you explanation, I'm more clear now. You do not want to navigate to the same itemDetail page, but instead you want to navigate to your own page.

Take a look at the line 70 from groupDetail.js, this is the place where the navigation defines, you could see that all the item click navigates to the itemDetail Page:

        _itemInvoked: function (args) {
            var item = this._items.getAt(args.detail.itemIndex);
            WinJS.Navigation.navigate("/pages/itemDetail/itemDetail.html", { item: Data.getItemReference(item) });
        }

You could write some code here, you already get the itemIndex from args (or you could get the link address from item parameter), and of course you could determine which address you want navigate to.

--James

---

<THE CONTENT IS PROVIDED "AS IS" WITHOUT WARRANTY OF ANY KIND, WHETHER EXPRESS OR IMPLIED>
Thanks
MSDN Community Support

Please remember to "Mark as Answer" the responses that resolved your issue. It is a common way to recognize those who have helped you, and makes it easier for other visitors to find the resolution later.

Answer 4

Hi Josue,

In reading your question, it sounds like you are thinking about separate HTML pages for each item only because what you write on the page "will appear on all items". If you mean HTML, yes that's true, and you should check Jamles' answer for more info. However, you can set different information in the JavaScript code that is specific to each item.

Here's an example from a Hub template sample (items.html is roughly equivalent to itemDetail.html in the Grid).

You will want to get a description that is particular to the item (item.description in this code) from your data (data.js) and set it to the .itemdescription element on the HTML page... that's true for Grid and Hub templates.

Example code:

WinJS.UI.Pages.define("/pages/item/item.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) {
        var item = Data.resolveItemReference(options.item);

        element.querySelector(".titlearea .pagetitle").textContent = item.title;
        element.querySelector(".itemauthor").textContent = "Photo taken by: " + item.subtitle;
        element.querySelector(".itempublished").textContent = "Date published: " + item.published;
        element.querySelector(".itemdescription").textContent = "Item description: " + item.description;

    }
});

Answer 5

Hi Mike,

Is this really what I want to do. Thank you.

But this example code is to put that file? In "data.js"?

Thanks

Answer 6

The code above would go in itemDetail.js in the Grid template (you would need to update the name in WinJS.UI.Pages.define to reference itemDetail.html instead of item.html, in above code).

By default, templates like Grid and Hub use data.js for the data model. Any code you have to retrieve data should be in data.js (if you don't change the data model). In data.js, you need to make sure you store all info particular to the each item in whatever data object you use. You will need to rewrite code in data.js to obtain your own data. For example, the default sample data includes an array for groups and an array for items. If you use array-based data (like the sample data), you just want to make sure the array items have a title, subtitle, & description property, along with values for each property, for the above code to work. I think if you examine the sample arrays in data.js, this will become clear. You will need to replace the arrays with your own data.

Answer 7

Got it.
What if I do not want her to open a page "itemDetail.html"!?

I want that clicking on an item, it opens a web page. How do?

View image: http://postimg.org/image/t56dx8edp/