In part two of the Book information example we turned our solution into a dynamic website. This gives us more flexibility to customize the user experience. This time we'll look at how we can bring our own data to the solution using structured data.

‚≠źPlease note that structured data is currently only available to Enterprise bags.

First, let setup our bag metadata in the bag overview page of the project page. We add the 'name', 'subtitle', 'description' and 'thumbnail' columns we had before and enter the data:

Next we have to alter the logic of our app to get the data from the bag metadata rather then from the book.json file. Our solution now looks as follows:

let app = new Vue({ 
    el: '#app',
    data: {
        isLoading: true,
        content: undefined
    },
    async mounted() {
        let viewId = await Bridge.View.getId();
        let view = new Zaza.View(viewId);
        
        this.content = await view.getMetadata();
        this.isLoading = false;
    }
});

That's all there is to it! We're back at the same result, however this time the data is stored as metadata to the bags:

Did this answer your question?