CODEWITHSUNDEEP
templateswindows-8microsoft-metrowindows-store-appswinjs
rink.attendant.6
rink.attendant.6

Reputation: 46258

Multiple item templates in Grid App

I'm developing a Windows Store application based on the Grid application template. Upon creating a new project, there is some sample data generated for the application. There are only three pages in the app: home, grouped items, and item details.

I'm wondering whether it's possible to have different templates for item details, and if so, how.

For instance, I have a group containing a list of smartphones and another group containing a list of printers. In the smartphones item details template, I'd probably have fields such as "Memory card", "Speakerphone", and "Operating system", whereas in the printers item details template I'd have fields such as "Speed", "Accepted cartridges", and "Paper sizes".

How should I go about adding item detail templates and using the correct one depending on which item is viewed? I've looked at http://babaandthepigman.wordpress.com/2012/02/08/datatemplateselector-winrt/ but that seems to be for XAML applications only. I'm not using XAML/VB/C++/C#, but JavaScript and HTML5.

Upvotes: 0

Views: 765

Answers (1)

Jeremy Foster
Jeremy Foster

Reputation: 4773

To be clear the three pages in the grid project template are groupedItems (the "hub"), groupDetail (the "section"), and itemDetail (the "detail"). I actually wish they would have named those pages "hub", "section", and "detail".

If you're talking about having multiple item templates so that item tiles on the hub (groupedItems) page look different depending on the item type, then the easiest way is to provide the multiple item templates (WinJS.Binding.Template) in the HTML and then write a custom template selection function. It's not that difficult. You can see an example if you look at my codeSHOW app (codeshow.codeplex.com)... see the home.js page. The source is online, so you can see that page here.

If you're talking about having multiple detail (itemDetail) pages so that when a user clicks on a certain item from the hub, they might be taken to a whole page of information about a phone versus a printer, then that's simply a matter of having multiple pages and being intelligent about which page you navigate to. If the user clicks on a phone from the hub, then you navigate to /pages/phone/phone.html. If they click on a printer then you navigate to /pages/printer/printer.html.

Finally, if your entities (i.e. phones and printers) are similar enough, then you may want to keep a single page to represent them, and just make that page smart enough to modify its template for the right item. In that case, you can create two templates on the page (WinJS.Binding.Template again) and when the entity is passed in to the page (the 'options' part of ready(element,options)), you just inspect it and look at the entity type (i.e. phone or printer) and then render the data into the right template. The Binding and Templating and Fragments and Pages demos on codeSHOW may be helpful there.

If you want more help, you can schedule some 1 on 1 time with a Microsoft Developer Evangelist at usdpe.ohours.org. Have fun!

Upvotes: 1

Related Questions