Add a flipview to the item page of hub template

Question

Hi. I want to add a flipview in the item page of the hub template.

Just for the purpose of explanation I’m only showing sample codes.

In the hub.html, I have one section like this:

<div class="section1" data-win-control="WinJS.UI.HubSection" data-win-res="{ winControl: {'header': 'Section1'} }"
                     data-win-options="{ isHeaderStatic: true }">
                    <div class="itemTemplate" data-win-control="WinJS.Binding.Template">
                        <img src="#" data-win-bind="src: backgroundImage; alt: title" />
                        <div class="itemTitle-white" data-win-bind="textContent: title"></div>
                        <div class="itemText-white" data-win-bind="textContent: description"></div>
                    </div>
                    <div class="itemslist win-selectionstylefilled" data-win-control="WinJS.UI.ListView" data-win-options="{
                        layout: {type: WinJS.UI.GridLayout},
                        selectionMode: 'none',
                        itemTemplate: select('.section1 .itemTemplate'),
                        itemDataSource: select('.pagecontrol').winControl.section1DataSource,
                        oniteminvoked: select('.pagecontrol').winControl.section1ItemNavigate
                    }">
                    </div>
</div>

In the data.js, I’m using the default data template itself. So, the data for section1 would be like this in the generateSampleData function:

var dataPictures1 = [
                                { type: "item", picture: "../images/gallery/folder1/picture-1.jpg" },
                                { type: "item", picture: "../images/gallery/folder1/picture-2.jpg" },
                                { type: "item", picture: "../images/gallery/folder1/picture-3.jpg" }                                
];

var homePictures1 = new WinJS.Binding.List(dataPictures1);

var dataPictures2 = [
                                { type: "item", picture: "../images/gallery/folder1/picture-1.jpg" },
                                { type: "item", picture: "../images/gallery/folder1/picture-2.jpg" },
                                { type: "item", picture: "../images/gallery/folder1/picture-3.jpg" }
];

var homePictures2 = new WinJS.Binding.List(dataPictures2);

var dataPictures3 = [
                                { type: "item", picture: "../images/gallery/folder1/picture-1.jpg" },
                                { type: "item", picture: "../images/gallery/folder1/picture-2.jpg" },
                                { type: "item", picture: "../images/gallery/folder1/picture-3.jpg" }
];

var homePictures3 = new WinJS.Binding.List(dataPictures3);

var sampleItems = [
            { group: sampleGroups[0], title: "title1", description: homeDescription1, content: homeContent1, backgroundImage: "../images/homePage/image_1.png", picture: homePictures1 },
            { group: sampleGroups[0], title: "title2", description: homeDescription2, content: homeContent2, backgroundImage: "../images/homePage/image_2.png", picture: homePictures2 },
            { group: sampleGroups[0], title: "title3", description: homeDescription3, content: homeContent3, backgroundImage: "../images/homePage/image_3.png", picture: homePictures3 }
];

Now, in the item.html:

        <section class="content" aria-label="Main content" role="main">

            <!-- TODO: Content goes here. -->
            <span class="item-text"></span>
            <div id="ItemTemplate" data-win-control="WinJS.Binding.Template">
                <div>
                    <img src="#" data-win-bind="src: picture; alt: title" />
                </div>
            </div>

            <div id="basicFlipView"
                 data-win-control="WinJS.UI.FlipView"
                 data-win-options="{ 
                    itemDataSource : select('.pagecontrol').winControl.section1DataSource,
                    itemTemplate : ItemTemplate 
                 }">

            </div> 

            
        </section>

Here is the item.js file:

(function () {
    "use strict";

    // Get the groups used by the data-bound sections of the Hub.

    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;

            // TODO: Initialize the page here.
            element.querySelector(".content .item-text").textContent = item.content;

            var itemPicture = item.picture;
            return itemPicture;

        },

        section1DataSource: itemPicture.dataSource

    });

    
})();

So, as you can see, I'm trying to access the pictures for the corresponding item that I've clicked on like this. But, I'm getting an error saying itemPicture is undefined.

Sorry I'm new to building windows store app and I don't know another way to access the picture datasource.

Please, don't tell me to separate each item and add a flipview to each one of them. This method would be too long as I got many listviews with many items in them.

Thanks in advance for any solution.

Answer 1

Hi bliks07,

Could you share us a reproducible demo for test purpose? I simply read your code and I got some confusing on this line: var item = Data.resolveItemReference(options.item);

Could you get a correct option passed to the target page?

--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. Thanks for the reply.

In fact when you create a new hub app in visual studio, the item.js file already has this line of code by default. As I said i'm new to building windows store app and I don't really know how this code works. But, all I know is that this is how it gets the corresponding data for the item you've clicked on in the hub page. 

For a better understanding here is the default data.js file where you'll find the resolveItemReference function:

(function () {
    "use strict";

    var list = new WinJS.Binding.List();
    var groupedItems = list.createGrouped(
        function groupKeySelector(item) { return item.group.key; },
        function groupDataSelector(item) { return item.group; }
    );

    // TODO: Replace the data with your real data.
    // You can add data from asynchronous sources whenever it becomes available.
    generateSampleData().forEach(function (item) {
        list.push(item);
    });

    WinJS.Namespace.define("Data", {
        items: groupedItems,
        groups: groupedItems.groups,
        getItemReference: getItemReference,
        getItemsFromGroup: getItemsFromGroup,
        resolveGroupReference: resolveGroupReference,
        resolveItemReference: resolveItemReference
    });

    // Get a reference for an item, using the group key and item title as a
    // unique reference to the item that can be easily serialized.
    function getItemReference(item) {
        return [item.group.key, item.title];
    }

    // This function returns a WinJS.Binding.List containing only the items
    // that belong to the provided group.
    function getItemsFromGroup(group) {
        return list.createFiltered(function (item) { return item.group.key === group.key; });
    }

    // Get the unique group corresponding to the provided group key.
    function resolveGroupReference(key) {
        return groupedItems.groups.getItemFromKey(key).data;
    }

    // Get a unique item from the provided string array, which should contain a
    // group key and an item title.
    function resolveItemReference(reference) {
        for (var i = 0; i < groupedItems.length; i++) {
            var item = groupedItems.getAt(i);
            if (item.group.key === reference[0] && item.title === reference[1]) {
                return item;
            }
        }
    }

    // Returns an array of sample data that can be added to the application's
    // data list. 
    function generateSampleData() {
        var itemContent = "Some texts";
        var itemDescription = "Some texts";
        var groupDescription = "Some texts";

        // These three strings encode placeholder images. You will want to set the
        // backgroundImage property in your real data to be URLs to images.
        var darkGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY3B0cPoPAANMAcOba1BlAAAAAElFTkSuQmCC";
        var lightGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY7h4+cp/AAhpA3h+ANDKAAAAAElFTkSuQmCC";
        var mediumGray = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY5g8dcZ/AAY/AsAlWFQ+AAAAAElFTkSuQmCC";

        // Each of these sample groups must have a unique key to be displayed
        // separately.
        var sampleGroups = [
            { key: "group1", title: "Group Title: 1", subtitle: "Group Subtitle: 1", backgroundImage: darkGray, description: groupDescription },
            { key: "group2", title: "Group Title: 2", subtitle: "Group Subtitle: 2", backgroundImage: lightGray, description: groupDescription },
            { key: "group3", title: "Group Title: 3", subtitle: "Group Subtitle: 3", backgroundImage: mediumGray, description: groupDescription },
            { key: "group4", title: "Group Title: 4", subtitle: "Group Subtitle: 4", backgroundImage: lightGray, description: groupDescription },
            { key: "group5", title: "Group Title: 5", subtitle: "Group Subtitle: 5", backgroundImage: mediumGray, description: groupDescription },
            { key: "group6", title: "Group Title: 6", subtitle: "Group Subtitle: 6", backgroundImage: darkGray, description: groupDescription }
        ];

        // Each of these sample items should have a reference to a particular
        // group.
        var sampleItems = [
            { group: sampleGroups[0], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[0], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[0], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
            { group: sampleGroups[0], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[0], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

            { group: sampleGroups[1], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[1], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
            { group: sampleGroups[1], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray },

            { group: sampleGroups[2], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
            { group: sampleGroups[2], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[2], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[2], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[2], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
            { group: sampleGroups[2], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[2], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

            { group: sampleGroups[3], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[3], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[3], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[3], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[3], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
            { group: sampleGroups[3], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: lightGray },

            { group: sampleGroups[4], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[4], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[4], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[4], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: mediumGray },

            { group: sampleGroups[5], title: "Item Title: 1", subtitle: "Item Subtitle: 1", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[5], title: "Item Title: 2", subtitle: "Item Subtitle: 2", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[5], title: "Item Title: 3", subtitle: "Item Subtitle: 3", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
            { group: sampleGroups[5], title: "Item Title: 4", subtitle: "Item Subtitle: 4", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[5], title: "Item Title: 5", subtitle: "Item Subtitle: 5", description: itemDescription, content: itemContent, backgroundImage: lightGray },
            { group: sampleGroups[5], title: "Item Title: 6", subtitle: "Item Subtitle: 6", description: itemDescription, content: itemContent, backgroundImage: mediumGray },
            { group: sampleGroups[5], title: "Item Title: 7", subtitle: "Item Subtitle: 7", description: itemDescription, content: itemContent, backgroundImage: darkGray },
            { group: sampleGroups[5], title: "Item Title: 8", subtitle: "Item Subtitle: 8", description: itemDescription, content: itemContent, backgroundImage: lightGray }
        ];

        return sampleItems;
    }
})();

I've just modified this data.js file and input my own data in it.

In the item.js file, as you can see, it's using the item.title and item.content and i'm trying to access the pictures the same way using item.picture but i'm getting an error.

Answer 3

Hi,

It's quite hard to figure out the full problem without getting a better picture about the whole code of yours. But the error about itemPicture is most probably due to the fact that itemPicture is not available where you try to set it to be the section1DataSource:

    // ...
    // assuming I understood the data model correctly...

    var itemPicture = item.picture;
    // ...now you have a WinJS.Binding.List in itemPicture

    // ..but it doesn't end up anywhere from here, and the itemPicture variable isn't visible outside this function 
    return itemPicture;
},

// ...therefore, itemPicture is here undefined and thus the error
section1DataSource: itemPicture.dataSource

In a plain Hub sample app the data is available via global Data property and it's made available in different way than in your code. You might want to check that and review your approach. It seems that you might be mixing things up a bit and trying to make the dataSource available too late.

Remember that, if you can't have the dataSource available on load time as in the sample, you can always set it afterwards (via use of, for instance, WinJS.UI.setOptions()). The sample is assuming all dataSources are available when component is being created.

One additional suggestion: you might want to consider renaming the 'picture' property in your sampleItems collection to 'pictures' or 'pictureList' to make it clearer in the code whether you have a list of pictures or a single picture path. You have also 'picture' property in each individual picture item, this confused at least me when trying to figure out your data model.

Answer 4

I'm sorry I made all this so complicated. Here is a simple demo that shows what I'm trying to do.

I just need to know what codes I should write in the item.js to make the pictures of each corresponding item in the data.js available in the flipview of the item.html.

Thanks.

Answer 5

Hello,

Submitted a PR for your Github repository, please find some explanations from commit messages there https://github.com/bliks07/WSA-issues/pull/1 . Hope this helps.

Answer 6

Thank you very much for your help. That's great!