Skip to Content

Planet Drupal

Syndicate content - aggregated feeds in category Planet Drupal
Updated: 23 hours 22 min ago

Phase2: AngularJS Meet Open Atrium

10 November 2014 - 7:52am

The recent 2.23 version of Open Atrium contains a cool new interactive site builder and navigator application (see it in action). This application was written using the AngularJS framework.  The combination of Drupal, jQuery, and AngularJS proved to be powerful, but wasn’t without some pitfalls.

Using AngularJS in Drupal

The basics of using Angular within Drupal is pretty straight-forward.  Simply reference the external AngularJS scripts using the drupal_add_js() function, then add your custom javascript app code, then use a tpl template to generate the markup including the normal Angular tags.  For example, here is the Drupal module code, javascript and template for a simple Angular app:

// Implements hook_menu() function myapp_menu() { $items['myapp'] = array( 'page callback' => 'myapp_menu_callback', 'access callback' => TRUE, ); return $items; } // The menu callback to display the page function myapp_menu_callback() { drupal_add_js(''); $base = drupal_get_path('module', 'myapp'); // data you want to pass to the app drupal_add_js(array( 'myapp' => array( 'title' => t('Hello World'), ), ), 'setting'); drupal_add_js($base . '/myapp.js'); drupal_add_css($base . '/myapp.css'); return theme('myapp', array()); } // Implements hook_theme(). function myapp_theme() { return array( 'myapp' => array( 'template' => 'myapp', ), ); }

(function ($) { var app = angular.module("myApp", []); app.controller("myAppController", function($scope) { $scope.settings = Drupal.settings.myapp; $scope.count = 1; $scope.updateCount = function(value) { $scope.count = $scope.count + value; } $scope.myClass = function() { return "myclass-" + $scope.count; } }) }(jQuery));

<div class="myapp" ng-app="myApp" ng-controller="myAppController"> <h3 ng-class="myClass()">{{settings.title}}</h3> <p> <a class="btn btn-default" ng-click="updateCount(1)">Click</a> to increment {{count}} </p> </div>

Now, obviously we aren’t using the full Angular framework here.  We aren’t using any directives, nor are we really using Angular as a MVC framework.  But it gives you the idea of how easy it is to get started playing with basic Angular functionality.

Angular plus jQuery

Developing javascript applications in Angular requires a different mindset from normal Drupal and jQuery development.  In jQuery you are often manipulating the DOM directly, whereas Angular is a full framework that allows data to be bound and manipulated on page elements.  Trying to combine both is often a source of frustration unless you understand more about how Angular works behind the scenes. Specifically, Angular has it’s own execution loop causing a mix of Angular and jQuery code to not seem to execute in a straightforward order.  For example, in the above code, we set the class of the H3 based on the current “count” variable.  What if we modified the updateCount function to try and set a css property for this class:

$scope.updateCount = function(value) { $scope.count = $scope.count + value; $('.' + $scope.myClass()).css('color', 'red'); }

If you click the button you’ll notice that the css color does NOT change to red! The problem is that Angular is executing the query function call BEFORE it actually updates the page.  You need to delay the jQuery so it executes after the current Angular event loop is finished.  If you change the code to:

$scope.updateCount = function(value) { $scope.count = $scope.count + value; setTimeout( function() { $('.' + $scope.myClass()).css('color', 'red'); }, 1); }

then it will work.  The timeout value can be anything greater than zero.  It just needs to be something to take the jQuery execution outside the Angular loop. Now, that was a horrid example!  You would never actually manipulate the css and class properties like this in a real application.  But it was a simple way to demonstrate some of the possible pitfalls waiting to trap you when mixing jQuery with Angular.

Drupal Behaviors

When doing javascript the “Drupal way”, you typically create a behavior “attach” handler.  Drupal executes all of the behaviors when the page is updated, passing the context of what part of the page has changed.  For example, in an Ajax update, the DOM that was updated by Ajax is passed as the context to all attached behavior functions. Angular doesn’t know anything about these behaviors.  When Angular updates something on the page, the behaviors are never called.  If you need something updated from a Drupal behavior, you need to call Drupal.attachBehaviors() directly.

Angular with CTools modals

In the Open Atrium site map, we have buttons for adding a New Space or New Section.  These are links to the Open Atrium Wizard module which wraps the normal Drupal node/add form into a CTools modal popup and groups the fields into “steps” that can be shown within vertical tabs.  This is used to provide a simpler content creation wizard for new users who don’t need to see the full node/all form, and yet still allows all modules that hook into this form via form_alters to work as expected. The tricky part of this is that as you navigate through the sitemap, Angular is updating the URLs of these “New” links.  But CTools creates a Drupal Ajax object for each link with the “ctools-use-modal” class in it’s Drupal behavior javascript.  This causes the URL of the first link to be cached.  When Angular updates the page and changes the link URLs, this Ajax object cache is not updated. To solve this within the Open Atrium Sitemap app, an event is called when the page is updated, and we update the cached Ajax object directly via the Drupal.ajax array. This was a rather kludgy way to handle it.  Ultimately it would be better to create a true Angular “Directive” that encapsulates the CTools modal requirements in a way that is more reusable.


Angular can be a very useful framework for building highly interactive front-ends.  Using Drupal as the backend is relatively straight-forward.  Angular allowed us to create a very cool and intuitive interface for navigating and creating content quickly within Open Atrium far easier than it would have been in jQuery alone.  In fact, we began the interactive site map tool in jQuery and the code quickly became unmanageable.  Adding functionality such as drag/drop for rearranging your spaces and sections would have been a mess in jQuery.  In Angular it was very straight-forward. Once you understand how Angular works, you’ll be able to blend the best of Drupal + jQuery + Angular into very rich interfaces.  Programming in Angular is very different.  Learn more about Angular on the Phase2 blog!

Categories: Drupal Featured Case Studies: Doctors of BC

10 November 2014 - 7:11am
Completed Drupal site or project URL:

Doctors of BC was founded in 1900 as the British Columbia Medical Association, and has a long history of working for members, improving patient care, and influencing health care policy. As part of a rebranding process started in late 2012, Doctors of BC (formerly the British Columbia Medical Association), engaged Fuse to build a new Drupal based website in spring of 2014. The Doctors of BC had been running on Drupal 6 for years and the site served successfully as a key communications and transactional resource for Doctors of BC staff & members. However, with a new brand, a desire to better support mobile users and a need to replace an aging codebase it was time for a rebuild.

This was no ordinary corporate website project. The new Drupal 7 system was replacing not only an aging Drupal 6 site, but a legacy custom eCommerce system with sophisticated business logic, a complex permissions matrix and a host of integration points with internal systems. Oh... and it all needed to be responsive.

We worked alongside Cossette Communications on the project (UX & Design) and were given a tight four month timeframe to build out the project.

Key modules/theme/distribution used: CommercePanelsPanelizerMediaFeaturesFeedsMenu MinipanelsCKEditor - WYSIWYG HTML editorBeanBreakpointsPictureManual CropMenu Node ViewsMigrateDrupal-to-Drupal data migrationFlagFlag PageOmega
Categories: Drupal

Paul Rowell: Drupal images; why they suck and what you can do about it

10 November 2014 - 7:06am

It's a well-known frustration that the core image management within Drupal isn't great (to put it mildly). Compared to CMS' such as wordpress it falls very short, there are however a few modules you can install and configure to help manage images better within your site. 

Categories: Drupal

Drupal core announcements: Drupal core updates for November 8, 2014

8 November 2014 - 5:06pm

Co-authored by alimac, xjm, mparker17, and effulgentsia.

What's new with Drupal 8? DrupalCon Amsterdam and the Drupal 8 beta!

It's been more than a month since the last Drupal Core Update, and so much has happened! Around 2300 people travelled to the historic city of Amsterdam, Netherlands for DrupalCon Amsterdam, where after 5 days of sprinting, Drupal 8.0 entered beta! Beta 3 will be released on Wednesday, November 12.

Photo credit: Paul Johnson

Be sure to review the allowed beta changes policy to understand which core issues are still priorities for Drupal 8.0, and which will need to wait for Drupal 8.1 or Drupal 9.

Highly critical security fix released for Drupal 7 and 8

On October 15th, SA-CORE-2014-005, a highly critcial security fix necessary for all Drupal 7 and 8 sites was revealed and Drupal 7.32 and Drupal 8.0.0-beta2 were released to address the issue. A week later, on October 29th, the Drupal security team issued a public service announcement warning of automated attacks against Drupal sites that haven't been patched for SA-CORE-2014-005.

To help website administrators choose the best possible path for dealing with affected Drupal sites, Bevan Rudge has developed a detailed flowchart of actions to take, specific to different scenarios. One tool that can be useful is Drupalgeddon, a Drush command that can help detect some of the exploits. It is important to understand that some attacks may not leave any trace. If possible, restore your Drupal site from backup made before October 15, 2014.

In A Lesson In Security, Anthony Ferrara deconstructed the vulnerability and its resolution as well as Drupal Security Team's response. For some discussion of Drupal Security Team's practices and the media response, check out Bryan Ruby's post: Drupal Security: Not Shocking but Responsible.

D8 critical office hours with chx

Core contributor chx has started a weekly critical issue office hours on Fridays at 12:00p PST. If you are interested in really digging into a tough problem and helping resolve a stagnating release blocker, or if you are stuck on a critical currently, join #drupal-contribute IRC channel during the office hours. See chx's report of the first critical office hours for an idea of what we've done so far!

Where's Drupal 8 at in terms of release?

DrupalCon Amsterdam and the beta release have brought lots of new momentum to the critical issue queue, with many issues both identified and resolved. Of the 130 critical issues currently blocking Drupal 8's release, 1 in 3 are new since the initial beta release, and 58% have activity within the past two weeks!

Where can I help? Top criticals to hit this week

Each week, we check with core maintainers and contributors for the "extra critical" criticals that are blocking other work. These issues are often tough problems with a long history. If you're familiar with the problem-space of one of these issues and have the time to dig in, help drive it forward by reviewing, improving, and testing its patch, and by making sure the issue's summary is up to date and any API changes are documented with a draft change record.

More ways to help

As always, if you're new to contributing to core, check out Core contribution mentoring hours. Twice per week, you can log into IRC and helpful Drupal core mentors will get you set up with answers to any of your questions, plus provide some useful issues to work on.

You can also help by sponsoring independent Drupal core development.

Notable Commits

So much great work has gone into Drupal 8 in the past weeks that it's difficult to pick the best of git log --after=2014-09-18 --pretty=oneline (571 commits in total). The final beta blocker was resolved across several issues, as were many entity API, theme system, dependency management, usability, and accessibility improvements.

  • Issue #2271419 by alexpott, larowlan: Fixed Allow field types, widgets, formatters to specify config dependencies.
  • Issue #1879930 by fran seva, Gábor Hojtsy, martin107, markie, Schnitzel, alexpott, Sutharsan, mon_franco, YesCT, spearhead93, herom, Désiré: Fixed Language selectors are not showing localized to the page language.
  • Issue #1953770 by amateescu: Move the field-specific settings form elements at the top of the form.
  • Issue #2224581 by alexpott, larowlan, jhodgdon, mgifford: Delete forum data on uninstall.
  • Issue #2332935 by plach, alexpott, dawehner: Allow code to respond to entity/field schema changes.
  • Issue #2028053 by vegantriathlete, franxo, InternetDevels, thamas, rootwork, LewisNyman: Add typographic styles, components, and utility classes.
  • Issue #2226207 by lauriii, mgbellaire, Cottser, m1r1k, Mark Carver, LinL, rachel_norfolk, rteijeiro, skwashd, davidhernandez, euphoric_mv: Make 'template' the default output option for hook_theme().
  • Issue #2350779 by benjy: Update Migrate maintainers in MAINTAINERS.txt.
  • Issue #2292035 by DimitriV, mgifford | andrewmacpherson: Fixed CKEditor uses the automatically generated ID attribute for the body field in the ARIA label.
  • Issue #2324791 by Michael Hodge Jr, ParisLiakos: Remove watchdog().
  • Issue #2329501 by alexpott, mdrummond, davidhernandez | Cottser: Add to core, set Classy as base theme for Bartik and Seven.
  • Issue #2278353 by cilefen, dawehner, hussainweb, jibran, andyceo: Update to Symfony 2.5.
  • Issue #2304987 by Berdir, Wim Leers: Fixed Don't invalidate cache tags of referenced entities, use entity list cache tags correctly, add test coverage for entity list cache tags.
  • Issue #1869476 by rteijeiro, LewisNyman, lauriii, Wim Leers, mdrummond, swentel, hosef, cbiggins, larowlan, sun, EclipseGc, Gábor Hojtsy: Convert global menus (primary links, secondary links) into blocks.
  • Issue #2343759 by pwolanin, larowlan, dawehner, tim.plunkett, effulgentsia, xjm, Wim Leers: Provide an API function to replace url()/l() for external urls.
  • Issue #2002138 by yched, Jose Reyero, xjm, andypost, fago, msonnabaum, Berdir, dixon_: Use adapters for supporting typed data.
  • Issue #2338475 by herom: Remove hook_permission().
  • Issue #2232605 by alexpott, dawehner, martin107, Cottser, sun: Fixed Themes cannot be uninstalled.
Security fixes

Now that Drupal 8 is in beta, we're focusing on resolving disclosed security vulnerabilities in Drupal 8 so that site owners can safely build test sites. Here are the security fixes that have gone in over the past weeks:

  • Issue #1948418 by webflo, martin107, galooph, cilefen, gaurav.goyal, amitgoyal, dawehner, dstol: Fixed Address SA-CONTRIB-2013-035 for views in D8.
  • Issue #2357249 by Stefan Horst, greggles, larowlan, David_Rothstein, klausi: Fixed SA-CORE-2014-005 (SQL injection).
  • Issue #2304969 by pwolanin, cilefen, Berdir, Devin Carlson, klausi: Fixed Port private files access bypass from SA-CORE-2014-003.
  • Issue #2242749 by znerol, torotil, rszrama, larowlan, dawehner, penyaskito, tim.plunkett, sun, Damien Tournoud, David_Rothstein, effulgentsia: Fixed Port Form API security fix SA-CORE-2014-002 to Drupal 8.
  • Issue #2234277 by cilefen, hussainweb, Xano, netlooker, martin107: Composer update (includes security fixes).
  • Issue #2029855 by klausi, benjy, fgm, hussainweb, Cottser, pfrenssen, kim.pepper | moshe weitzman: Fixed Missing access control for user base fields.
  • Issue #2098419 by larowlan | fago: Fixed Missing default access for all comment fields.
Drupal 8 Around the Interwebs Drupal 8 in "Real Life" Whew! That's a wrap!

Do you follow Drupal Planet with devotion, or keep a close eye on the Drupal event calendar, or git pull origin 8.0.x every morning without fail before your coffee? We're looking for more contributors to help compile these posts. You could either take a few hours once every six weeks or so to put together a whole post, or help with one section more regularly. Read more about how you can volunteer to help with these posts!

Categories: Drupal

Bluespark Labs: BADCamp Drupal Higher Education Summit - Stories of rapid adaption and the challenges of standardization at scale

8 November 2014 - 10:08am

Attending the Higher Education Summit at the 2014 Bay Area Drupal Camp was a great experience. We work with several higher education institutions and are acutely aware of the very specific challenges these organizations face. The summit improved our understanding of the issues and helped them coalesce around a few key overarching concerns: standardization, adaption and scalability.

The summit got off to a great start before even starting because of the theme selected: “Storytellers and Geeks United for Higher Ed”. A clear indication of the importance of not solving just technological issues but solving communication issues with the help of technology. Everyone was in agreement that web people and communication people need to get together to figure out how to best tell their university’s story.

The opening panel session was the perfect illustration of the theme as it brought together technologists and communications partners (with the roles often blending into each other) from the universities of Arizona State, University of California, Davis and University of California, San Francisco. The big news for all was Arizona State’s bold move to enforce (albeit with a light touch) standardization from the top down. Arizona State has embarked on a very ambitious project aiming to provide a complete set of tools for departments to build their websites that spans not just the actual web page but hosting, analytics, sophisticated email and CRM systems (institution-wide Salesforce instance). All this will ultimately enable them to realize their vision of personalizing the experience for every user of the University. While it is still early days everyone seemed very excited about what AS is attempting to do and we are eagerly awaiting news about lessons learned.

A session by John Bickar of Stanford Web Services was inspiring and provided a great roadmap for any university about how to drive adoption of Drupal within the institution and support the needs of the community by providing both infrastructure and Drupal development tools in the form of pre-baked solutions and templates. As John indicated the forthcoming challenges for them will be those of success. They are seeing great adoption of their hosting solution and web development tools and need to ensure that they will be able to scale.

Finally, I found the discussions around development processes, estimation and the use of agile particularly interesting. It is clear that where such processes have been put in place it has yielded positive results. At a break-out session on the subject everyone agreed that while agile provides a great set of principles it is equally important that to adapt the practices to the specific needs of an organization. In other words don’t be afraid to try a few different things and see what works for you, but start getting a process in place!

Overall, it looks like the future of Drupal in Higher Education is brighter than ever. The problems are those of improving communication and dealing with the success that widespread adoption brings. Helping to standardize around common practices in how Drupal is deployed and how individual departments adapt so that they can meet both wider University needs as well as their specific requirements will be key. This will allow the University as a whole and groups within it to each tell the best version of their story.

Many thanks to everyone that worked hard to make this summit possible and we look forward to attending next year!

Tags: Higher EducationDrupalDrupal Planet
Categories: Drupal

Paul Booker: Sending Push Notifications to users with a given role using Private Messages

8 November 2014 - 9:27am
/** * Implements hook_privatemsg_message_insert. */ function push_notifications_privatemsg_message_insert( $message ) { if ( variable_get( 'push_notifications_privatemsg_integration', 0 ) ) { // Compose the payload. If the body is empty, just use the subject line. // Otherwise, combine subject and body. $payload = (empty($message->body)) ? $message->subject : $message->subject . ' ' . $message->body; $payload = 'From ' . $message->author->name . ': ' . $payload; // Compose an array of recipients. $recipients = array(); foreach ( $message->recipients as $recipient ) { if ( $recipient->type == "role" && $recipient->name != 'authenticated user' ) { $results = db_select('users_roles', 'ur') ->fields('ur', array('uid')) ->condition('ur.rid', $recipient->rid, '=') ->execute() ->fetchCol(); } elseif ( $recipient->type == "role" && $recipient->name == 'authenticated user' ) { $results = db_select('users', 'u') ->fields( 'u' ) ->execute() ->fetchCol(); } if ($recipient->type == "role") { foreach ($results as $result) { $recipients[] = $result; } } else{ $recipients[] = $recipient->uid; } } push_notifications_send_message( $recipients, $payload ); } } Tags: URL: Push Notification does not send Push when Private Message goes to Roles
Categories: Drupal

about seo