I was working on my blog's native Drupal app, and decided to share my discoveries on how to create additional custom Views Json listing page and how to link it in your apps menu.
For the content on this page I decided to list all articles from my blog whose location are set to Georgia, and give it name - Georgia Travel Guide. Georgia and Drupal is special for me, so this was just logically the most "urgent" task I wanted to achieve next while building my native Drupal app.
Read more: How to develop Native Drupal app using Drupalgap - Part 1: Custom Front Page Using views - Images and Date
DrupalGap app in Ripple Emulator
Creating Views Json
I have some specific fields for my content types, most probably they will differ from your setup, use with caution
- Create new view - I named it Sakartvelo (Name of Georgia in Georgian language)
- Path: sakartvelo
- Format: Json data document
- Fields: Title, Images, Nid, Post date, Total views
- Filter criteria: Location:Georgia
- Sort criteria: Total views desc
I wanted to add additional exposed filer to allow visitors change categories, but seems DrupalGap is net yet compatible with views selective filters.
Here is Json data output for my view
"nodes" : [
{
"node" : {
"title" : "Shopping in Georgia: Tbilisi Mall",
"field_images" : {
"src" : "http://www.reinisfischer.com/sites/default/files/styles/front/public/tbilisimalls.jpg?itok=8ehAyVDO",
"alt" : ""
},
"nid" : "936",
"date" : "12/14/2014 - 06:56",
"total" : "4,169"
}
},
Creating Custom Page (Module)
In apps/modules/custom create new directory - Georgia, place inside it a .js file georgia.js
/**
* Implements hook_menu().
*/
function georgia_menu() {
try {
var items = {};
items['georgia'] = {
title: 'Georgia Travel Guide',
page_callback: 'georgia_sakartvelo'
};
return items;
}
catch (error) { console.log('hook_menu failed - ' + error); }
}
/**
* The page callback to display the view my_module_article_images.
*/
function georgia_sakartvelo() {
try {
var content = {};
content['my_articles_list1'] = {
theme: 'view',
format: 'none',
path: 'sakartvelo', /* the path to the view in Drupal */
row_callback: 'georgia_sakartvelo_list_row',
empty_callback: 'georgia_sakartvelo_list_empty',
attributes: {
id: 'article_listing_items1'
}
};
return content;
}
catch (error) { console.log('georgia_sakartvelo - ' + error); }
}
/**
* The row callback to render a single row.
*/
function georgia_sakartvelo_list_row (view, row) {
try {
var image_html = theme('image', { path: row.field_images.src });
var title_html = '<div class="mobile-title"><div class="inside"><h2><span>' + row.title + '</span></h2></div></div>';
var total_html = '<div class="mobile-date">' + row.total + ' views</div>';
var link = l('<div class="mobile-wrap">' + image_html + title_html + total_html, 'node/' + row.nid) +'</div>';
return link;
}
catch (error) { console.log('georgia_sakartvelo_list_row - ' + error); }
}
/**
* Callback function for no results.
*/
function georgia_sakartvelo_list_empty(view) {
try {
return '<p>Sorry, no articles were found.</p>';
}
catch (error) { console.log('georgia_sakartvelo_list_empty - ' + error); }
}
Next add path to your module in settings.js file
Drupal.modules.custom['georgia'] = {};
How to add menu link in DrupalGap
DrupalGap menu
I just replaced existing links from Main Menu in settings.js file
// Main Menu
drupalgap.settings.menus['main_menu'] = {
options: menu_popup_get_default_options(),
links: [
{
title:'Georgia Travel Guide',
path: 'georgia',
options:{
attributes: {
'data-icon': 'star',
'class': 'ui-btn ui-btn-icon-right'
}
}
},
What's next?
Hopefully I will finish my development works on my native Drupal app anytime soon, from now the next big thing I'm planing to touch in DrupalGap is the way it renders taxonomy pages. I will keep you updated
