Connecting Fuel UX Datagrid to the Flickr API
Fuel UX (GitHub: ExactTarget / fuelux, License: MIT) extends the revolutionary Twitter Bootstrap with some additional JavaScript controls. One of these controls is the Datagrid, and today I’m going to show you how to add the Datagrid to a page and connect it to a third party API.
Step One: Basic Fuel UX Page
There are a couple of resources I recommend for getting started with a basic Fuel UX page:
- Fuel UX a library that extends Twitter Bootstrap by Eric Jones
- Fuel UX - Getting Started on ExactTarget’s CODE@ Dev Center
Once you have Fuel UX on your page, you’re ready to add the Datagrid!
Step Two: Adding the Datagrid
Just like in Bootstrap, you can add most Fuel UX controls to a page by simply adding some markup and they will be instantiated automatically.
View the markup for this example
Since the Datagrid needs to be connected to some data to be useful, we will need a little JavaScript to instantiate the control.
$('#MyGrid').datagrid({
dataSource: new FlickrDataSource({
// Column definitions for Datagrid
columns: [{
property: 'image',
label: 'Image',
sortable: false
},{
property: 'title',
label: 'Title',
sortable: false
}],
// Create IMG tag for each returned image
formatter: function (items) {
$.each(items, function (index, item) {
item.image = '<img src="' + flickrUrl(item) + '"></a>';
});
}
})
});
Step Three: Provide the Data Source
To connect the Datagrid to some data, we just need a data source to act as an adapter. The data source’s responsibilities are:
- Provide column info
- Provide data when requested by the Datagrid
For this example, I created a simple datasource to communicate with the Flickr API.
View the data source for this example
Conclusion
I hope this tutorial is helpful in getting your own use of the Datagrid off the ground, and in using Fuel UX in general. The Fuel UX contributors and I are excited to have you on board! Next steps:
- See this demo in action
- View Fuel UX on GitHub
- Find me on Twitter and let me know what you think!
