Labs

How to use $form['#attached'] with a JavaScript setting in Drupal 7 Form API

Alli Price — Mon, 21 May 2012 16:18:20 +0000

"You're entering a realm which is ...unusual, maybe it's magic. That contains some kind of monster, the second one... Prepare to enter, The Scary Door."

If none of that makes any sense, watch the video at the end of the post. This is a little how I felt wrangling with #form attachments.

A pre-cursor, you can use drupal_add_js() to add JavaScript to your forms, but if your form gets submitted and has errors, the regenerated form will be missing your JavaScript added via drupal_add_js(), which is why we have #attached.

We all know and love drupal_add_js(), however I myself am not totally grounded with Form attachments. Throwing in a local or external file is easy enough, as is inline, though I had trouble with settings.

A fun point in my fumblings was the ridiculous thought of attempting to use an Array as an index for an Array.... Thought better of it (this isn't actually possible anyway).

After traversing drupal_render(), and then drupal_process_attached() I found this:

// In some cases, the first parameter ($data) is an array. Arrays can't be
// passed as keys in PHP, so we have to get $data from the value array.

Ah, and so just use an index then, much more sensible! Here's how you use form attached with a JavaScript setting array.

$form['#attached']['js'][] = array(
  'data' => array(
    'xx_system' => array(
        'xx_code' => variable_get('xx_code', 'xx'),
        'xx_key' => variable_get('xx_key', 'xx'),
      ),
    ),
  'type' => 'setting',
);

How to use $form['#attached'] with a JavaScript setting in Drupal 7 Form API

By Alli Price | 21st May 2012

Views templates in a features module

John Ennew — Mon, 16 Apr 2012 09:51:32 +0000

You might find it desirable to place views template files into a module rather than the site theme. If the module is a feature which contains a view and is something that you might want to use on another site, then it makes sense to group the view and it's templates in the same module. The following article describes how to tell views that your module contains views template files and how to tell features that you want to tell views that the module contains views template files.

If your module includes a views-templates directory, you can inform views that the folder contains views templates by using the hook_views_api function:

/**
 * Implements hook_views_api().
 * We are specifying this here ourself as we want to include a views
 * template directory.
 */
function mymodule_views_api() {
  return array(
    "version" => "3.0",
    'template path' => drupal_get_path('module', 'mymodule') . '/views-templates',
  );
}

However, if you are using the features module to export the view itself you can't change hook_views_api as it is auto generated by features and is placed in the mymodule.features.inc file. If you edit it then any changes will be removed next time you update the features module. However, it is possible with a little tinkering to get all the benefits of features and still be able to specify the hook_views_api function yourself. If you implement the following hook_features_export_alter function in your features module .module file then you can tell features not to include the hook_views_api. This means you can include it yourself in you module file as above.

/**
 * Implements hook_features_export_alter().
 *
 * Alter the final export array just prior to the rendering of
 * defaults.
 * FORBID the hook_views_api, we are going to add that ourself.
 *
 * @param array &$export
 *   By reference. An array of all components to be exported with a given
 *   feature.
 * @param array $module_name
 *   The name of the feature module to be generated.
 */
function mymodule_features_export_alter(&$export, $module_name) {
  if ($module_name == 'mymodule' && !empty($export['features']['ctools']['views:views_default:3.0'])) {
    unset($export['features']['ctools']['views:views_default:3.0']);
  }
}

If your module file now has the hook_views_api and hook_features_export_alter functions you can remove hook_views_api from the mymodule.features.inc file and flush your caches. Next time you update the features module it will not include the hook_views_api and any views templates you put in the views-templates directory of your module will get included.

Views templates in a features module

By John Ennew | 16th April 2012

Drupal Commerce: Getting the price of a product as a nicely formatted string (programatically)

John Ennew — Mon, 16 Apr 2012 08:32:48 +0000

We are enjoying using the Drupal Commerce Framework. Here are a few programming tips.

Easy bit - How to load a commerce product with product_id of 10

$product = commerce_product_load(10);

If you have a commerce product - you can get its price information using entity api's excellent wrapper.

$price = entity_metadata_wrapper('commerce_product', $product)->commerce_price->value();

$price is an array containing the amount (in minor units e.g. 7600 for £76) and currency_code (e.g. 'GBP')

Finally, if you want to get the price as a nice string for output in something custom you can then use:

$price_display = commerce_currency_format($price['amount'], $price['currency_code'], $product);

Which will return "£76.00"

Drupal Commerce: Getting the price of a product as a nicely formatted string (programatically)

By John Ennew | 16th April 2012

Display Suite - Getting even more control of your fields

dv-admin — Fri, 23 Mar 2012 12:31:13 +0000

When you want even more control over an outputted field, you can still put a theme function in template.php file. With the devel module enabled, set the display mode for a field to expert then add the following to template.php, clear your cache and then load a page with the field on it.

/**
 * Implements hook_field__expert__FIELD_ID().
 */
function mytheme_field__expert__myfield(&$variables) {
  // Inspect the contents of $variables.
  krumo($variables);
 
  // Pass back to the display suite theme function for final theming.
  return theme_ds_field_expert($variables);
}

In this manner you can inspect the variables in $variables, make changes to them then let display suite format the output as before.

A good item to inspect is $variables['element']['#view_mode'] which will give you the current view mode the field is being rendered in. If you have a view list of teasers for instance, this will say teaser, allowing you to then modify the field just on that one display, leaving the output on the main node page alone. Below we see an example of just outputting one image of an unlimited image field in teaser mode.

/**
 * Implements hook_field__expert__FIELD_ID().
 */
function mytheme_field__expert__field_images(&$variables) {
    if ($variables['element']['#view_mode'] == 'teaser') {
      // In teaser mode, only output the first image.
      $item = $variables['items'][0];
      $variables['items'] = array(0 => $item);
    }
  return theme_ds_field_expert($variables);
}

Display Suite - Getting even more control of your fields

By John Ennew | 23rd March 2012

Module: Extended path aliases (path to success!)

dv-admin — Thu, 22 Mar 2012 09:19:09 +0000

(Corny title, we know :) ) It's not often that we'd do a post on a single module, but today is that day...

Extended path aliases:
http://drupal.org/project/path_alias_xt

"Extended path aliases finishes the job left incomplete by core's Path module", it aliases paths like node/23/edit or user/14/my-favourites. This has long been a niggle with Drupal but a point that has been ignored. As developers it's understood why this happens but to a basic user it could be confusing to see the URL change between viewing and editing. By simply installing this module aliases appear! Wonderful!

It has a release for Drupal 6 and Drupal 7.

A possible use cases would be that you have a community site where users can build up a profile. A user will have an aliased path (users/alli-price), and we've added on extra tabs with views, for example there's a view with the path user/%/favourites.

This will create an extra tab on the users profile, and will resolve it's URL to be user/(uid)/favourites. With path_alias_xt installed, this would now be users/alli-price/favourites.

This module is not only a win for filling a long standing void in core and URL aliases, but also ensures better consistency for outward facing URLs, being a win for SEO. Highly recommended!

Module: Extended path aliases (path to success!)

By Alli Price | 22nd March 2012

How to run Javascript, in Drupal's Admin Overlay, on load

dv-admin — Wed, 07 Mar 2012 15:58:02 +0000

This is just a small post, but also a cautionary tale. From the moment you start working with Drupal and JavaScript, you'll notice that the awesome jQuery library is thrown in for free. Not only that, but you've also got jQuery UI...

The first thing you learn when starting out with jQuery is:

$(document).ready(function(){
  // Your code here
});

In most cases, using this with Drupal will work out fine, but beyond casual theme layer JavaScript there's a better way.

As ever the experts have documented the right thing to do and if you've never seen this page, be sure to give it a thorough read through: http://drupal.org/node/756722

So, our problem. We've got some Javascript we'd like to run on page load, but also have it work within the admin Overlay.

To do this make use of behaviours and attach, as so:

(function ($) {
  Drupal.behaviors.exampleModule = {
    attach: function (context, settings) {
      // This code will run, on load, even in overlay!!!!!!
      $('.example', context).click(function () {
        $(this).next('ul').toggle('show');
      });
    }
  };
})(jQuery);

That's all that's needed!

How to run Javascript, in Drupal's Admin Overlay, on load

By Alli Price | 7th March 2012

Setting up a Linux server for group write

dv-admin — Thu, 01 Mar 2012 11:14:22 +0000

We work on projects on remote servers where a number of developers might log in and edit a file. This often results in the file permissions changing, so that they own it, which can cause problems.

A simple solution is for everyone to be a member of the same group, then make it so that, by default, it is that group which is set on a file when someone creates it. We also then want to set the group write flag by default, so that anyone can edit that file.

The steps involved in setting this up on a server are as follows.

– create a new group everyone will share (mygroup)

	groupadd mygroup

– create any new users (if required, this can be skipped if you have existing users)

	useradd -G mygroup -m myusername
	passwd myusername

– make the default group for a user to be mygroup so everyone in that group can access the files

	usermod -g mygroup myusername

– set the global umask by editing the global bashrc file, which makes all users set the group write flag on newly created files (this will need everyone to log out and in again); you need to open /etc/bashrc with your favourite editor, e.g.

	nano /etc/bashrc

normally the umask is set as 022 (which is read only for group and others); change to 002, which is read write for owner and group, then read only for others

# By default, we want this to get set.
# Even for non-interactive, non-login shells.
if [ $UID -gt 99 ] && [ "`id -gn`" = "`id -un`" ]; then
    umask 002
else
    umask 002
fi

Note that for the bashrc function to work, it has to be called from the user's local .bashrc file in their home directory. Most Linux distros do this by default, but it is possible for individuals to remove the include for the global bashrc, which will then mean that group write is not set on files they create. The part in the user's .bashrc file that includes the global bashrc looks like this:

# Source global definitions
if [ -f /etc/bashrc ]; then
. /etc/bashrc
fi

Now, for example, if your shared work is in /var/www/html you'll need to change the group owner on all files in that directory to the new mygroup

	chgrp -R mygroup /var/www/html

And you will also want to make sure every file is writable by the group

	chmod -R g+w /var/www/html

Setting up a Linux server for group write

By Luke Simmons | 1st March 2012

Trigger Drupal managed AJAX calls at any time with Drupal 7

dv-admin — Thu, 23 Feb 2012 12:22:57 +0000

In a previous article I described how to trigger a CTools AJAX callback at any time, not just on an onclick event or form submission. This will only work with Drupal 6. In Drupal 7, much of this functionality has now been brought into Drupal Core, which is great. Unfortunately, it also appears to have been changed considerably. In this article I give a demonstration on how to achieve the same functionality with Drupal 7.

In this example you will create your own custom module again, called 'mymodule'.

Here is the contents of the mymodule.info file:

	name = mymodule
	description = My Module
	core = 7.x
	scripts[] = js/mymodule.js

In your mymodule file, let's start by defining the hook_menu which will define the path the ajax request will be made to.

/**
 * Implements hook_menu().
 */
function mymodule_menu() {
  $items = array();
 
  $items['mymodule/refresh-elements'] = array(
    'title' => 'AJAX callback - refresh the elements on the page',
    'page callback' => 'mymodule_refresh',
    'page arguments' => array(1),
    'access arguments' => array('access content'),
    'type' => MENU_CALLBACK,
  );
 
  return $items;
}

If you are comparing this with the previous Drupal 6 tutorial with CTools you will see there is no need to define the %ctools_js item here. Next, we define the actual callback function which will do the processing and send the page change requests back to the browser. Add the following to mymodule.module file.

/**
 * Menu callback.
 */
function mymodule_refresh($action, $type) {
  if ($type != 'ajax') {
    // This is js only.
    return 'Oh well';
  }
 
  $commands = array();
  $commands[] = ajax_command_replace('.some-class', date('G:i:s'));
  $page = array('#type' => 'ajax', '#commands' => $commands);
  ajax_deliver($page);
}

The arguments to this function are each path element past the first one. If our site was stored at http://www.example.com then the hook_menu defines a path at http://www.example.com/mymodule/refresh-elements. When the mymodule_refresh function is called, the $action variable will be the string 'refresh-elements'. If a third element was added to the path, then the $type variable would get filled with this. http://www.example.com/mymodule/refresh-elements/ajax - $type will be the string 'ajax'. This will be the actual url we will use.

We also need to make use of the drupal.ajax library which we will include in the hook_init for this tutorial. Put this in the mymodule.module file.

/**
 * Implements hook_init().
 */
function mymodule_init() {
  drupal_add_library('system', 'drupal.ajax');
}

Now make a js folder in your mymodule folder and create a file called mymodule.js in it. This will contain our custom javascript. This file is going to be included on every page of the site when the module is enabled. We specified this in the info file by defining the javascript file with the scripts[]. The javascript file contents look like this:

(function($){
 
  /**
   * Add an extra function to the Drupal ajax object
   * which allows us to trigger an ajax response without
   * an element that triggers it.
   */
  Drupal.ajax.prototype.specifiedResponse = function() {
    var ajax = this;
 
    // Do not perform another ajax command if one is already in progress.
    if (ajax.ajaxing) {
      return false;
    }
 
    try {
      $.ajax(ajax.options);
    }
    catch (err) {
      alert('An error occurred while attempting to process ' + ajax.options.url);
      return false;
    }
 
    return false;
  };
 
  /**
   * Define a custom ajax action not associated with an element.
   */
  var custom_settings = {};
  custom_settings.url = '/mymodule/refresh-elements/ajax/';
  custom_settings.event = 'onload';
  custom_settings.keypress = false;
  custom_settings.prevent = false;
  Drupal.ajax['custom_ajax_action'] = new Drupal.ajax(null, $(document.body), custom_settings);
 
  /**
   * Define a point to trigger our custom actions. e.g. on page load.
   */
  $(document).ready(function() {
    Drupal.ajax['custom_ajax_action'].specifiedResponse();
  });
 
})(jQuery);

To make this work we define an ajax action and then execute the action.

In the definition, the items you will need to change for your own purposes will be the custom_settings.url for your own module and path. The other settings will be left alone. If you want to do more than one ajax request, duplicate the bits from var custom_settings = {}; to Drupal.ajax['custom_ajax_action'] ... changing each url for each action and also changing 'custom_ajax_action' string so it is unique for each action.

To trigger the action you need to run Drupal.ajax['custom_ajax_action'].specifiedResponse(); at the right time in your own javascript code. Above I have run it at page load.

Now, to see this work, crete a node add add something with a class of some-class and watch it be replaced with the current time.

	<p class="some-class">Initial text</p>

For some general information about using javascript in Drupal 7, check out: http://drupal.org/node/756722. For general tutorial on Drupal 7's ajax features then checkout this page: http://api.drupal.org/api/drupal/includes%21ajax.inc/group/ajax/7

Trigger Drupal managed AJAX calls at any time with Drupal 7

By John Ennew | 23rd February 2012

Accessing field data in code for Drupal 7

dv-admin — Tue, 31 Jan 2012 16:44:48 +0000

This blog post is about the possible ways to access field data attached to an entity in code.

After loading an entity, such as a node, any fields are attached to the node object as arrays. For example, below is part of a loaded node object:

object(stdClass)#217 (29) {
  ["vid"]=>
  string(1) "1"
  ["uid"]=>
  string(1) "1"
  ["title"]=>
  string(24) "My example node"
  ["body"]=>
  array(1) {
    ["und"]=>
    array(1) {
      [0]=>
      array(5) {
        ["value"]=>
        string(38) "Here is some example text"
        ["summary"]=>
        string(0) ""
        ["format"]=>
        string(13) "filtered_html"
        ["safe_value"]=>
        string(46) "<p>Here is some example text</p>"
        ["safe_summary"]=>
        string(0) ""
      }
    }
  }
}

Here we see the body field as an array attached to the node. To read the value of the data stored in the body text we might access it directly via it's "und" language element:

  $body_text = $node->body['und'][0]['value'];

Or, more correctly:

  $body_text = $node->body[LANGUAGE_NONE][0]['value'];

However, this approach does not work in all cases as the 'und' key will change if the locale module is enabled. For English language sites this will be 'en'. In multi language sites there may be a number of different keys. We need a way of identifying the language the current user has selected and always read that key.

One approach is the field_get_items() function. This returns just the array of values for the user's configured language.

  $body_values = field_get_items('node', $node, 'body');
  $body_text = $body_values[0]['value'];

This works fine and gets round the language problem but it doesn't provide very clean code. Imagine if you needed to read more than one field, you would need to run this for each field...

  $body_values = field_get_items('node', $node, 'body');
  $body_text = $body_values[0]['value'];
  $some_taxonomy_values = field_get_items('node', $node, 'field_taxonomy_a');
  $some_taxonomy_term = taxonomy_term_load($some_taxonomy_values[0]['tid']);

There is another method provided by the entity api module called entity_metadata_wrapper. This returns an object of type EntityMetadataWrapper. This docs for this make it look complicated but that's because it is very powerful and lets you traverse all entity types in a variety of ways. For our purposes here though we need only know the general pattern for accessing entity fields.

Now, in one line we can get the value of the body text field on a node.

  $body_text = entity_metadata_wrapper('node', $node)->body->value();

Another example allows us to load a full taxonomy_term entity from a term reference field on the node in one line. This doesn't just return the term tid but the fully loaded term object.

  $some_taxonomy_term = entity_metadata_wrapper('node', $node)->field_taxonomy_a->value();

Indeed this would work for any node referenced by a entityreference field on a node

  $other_node = entity_metadata_wrapper('node', $node)->field_some_entityref->value();

Looping through multiple fields via entity_metadata_wrapper

When you access a field via the metadata wrapper, it is an object which is returned and this object extends the PHP iterator interfaces which allows looping over the elements of multiple fields.

  $wrapper = entity_metadata_wrapper('node', $node); 
  foreach ($wrapper->field_taxonomy_a->value() as $taxonomy) {
    // $taxonomy is a fully loaded taxonomy entity.   
  }

Note that a field might be setup to have either 1 or multiple values. The type of value returned by the function $wrapper->field_taxonomy_a->value() will change depending on each of these cases. In the case that it can only have 1 value, then that value is returned. If it can have multiple values, an array is returned. For the empty cases, where no term is selected, a multiple field will return an empty array, a single value field will return NULL.

Modifying an entity through entity_metadata_wrapper

The wrapper object doesn't just make it easy to read data from an entity, it also provides a standard way of modifying an entity. In the simple case, suppose you would like to change the title of a node.

	$wrapper = entity_metadata_wrapper('node', $node);
	$wrapper->title = 'My new title';
	$wrapper-save();

This doesn't add much to the usual node_save procedure but the process is now the same for all entities, no need for different function names for different entity types. However, it becomes more powerful when editing fields. For example, to change the body text ...

	$wrapper = entity_metadata_wrapper('node', $node);
	$wrapper->body = array(
	  'value' => 'My new body text value',
	  'format' => 'filtered_html',
    );
	$wrapper-save();

Accessing field data in code for Drupal 7

By John Ennew | 31st January 2012

How to centre align text or content vertically with CSS

dv-admin — Thu, 19 Jan 2012 09:54:15 +0000

The above has long been a slightly confusing point since the dawn of the semantic web, when designers and developers moved away from using table elements. If you Google the above, you'll get a mixture of answers, ranging from absolute positioning to negative margins and use of line height. Yet, the simplest answer lies in the past.

For a variable amount of text that you want to centre vertically and horizontally, you can use display: table-cell and vertical-align: middle.

Example 1: centred text in a div of a specific height and width:

<div class="wrapper">
  Drupal ipsum dolor sit modula webmaster hook panels block panels html5 field alter overlay!!
</div>

<style type="text/css">
  .wrapper {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    border: 1px dotted #656565;
  }
</style>

Drupal ipsum dolor sit modula webmaster hook panels block panels html5 field alter overlay!!

If you want to get creative with your styling, an easy example would be to start with some padding by simply throwing in another div!

Example 2: centred text in a div of specific width and height, with some padding inside:

<div class="wrapper">
  <div class="inner">
    Behaviors term contact semaphore html push router bundle captcha scheduler article semaphore install group modal taxonomy html5 trigger permission. Freeze uninstall cron contrib core dashboard behaviors. Vocabulary sites entity module features webform javascript panels color.
  </div>
</div>

<style type="text/css">
  .wrapper {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    border: 1px dotted #656565;
  }
 
  .inner {
    padding: 10px;
  }
</style>

Behaviors term contact semaphore html push router bundle captcha scheduler article semaphore install group modal taxonomy html5 trigger permission. Freeze uninstall cron contrib core dashboard behaviors. Vocabulary sites entity module features webform javascript panels color.

Example 3: centred text in a div of specific width and height, with some padding inside, floated left!:

<div class="content">
  <div class="floatme">
    <div class="wrapper">
      <div class="inner">
        Jquery context form book ctools block layout. Registry cron bug issue entity roadmap. I18n semaphore roadmap javascript group devel dashboard link session. Cron.
      </div>
    </div>
  </div>
  <div class="floatme">
    <div class="wrapper">
      <div class="inner">
        Te usus et claritas sollemnes quod. Commodo futurum ad demonstraverunt id per. Claritatem iusto eleifend nihil luptatum zzril.
      </div>
    </div>
  </div>
</div>

<style type="text/css">
  .content {
    overflow: hidden;
  }
 
  .floatme {
    float: left;
  }
 
  .wrapper {
    display: table-cell;
    width: 200px;
    height: 150px;
    text-align: center;
    vertical-align: middle;
    border: 1px dotted #656565;
  }
 
  .inner {
    padding: 10px;
  }
</style>

Jquery context form book ctools block layout. Registry cron bug issue entity roadmap. I18n semaphore roadmap javascript group devel dashboard link session. Cron.

Te usus et claritas sollemnes quod. Commodo futurum ad demonstraverunt id per. Claritatem iusto eleifend nihil luptatum zzril.

Before jumping in, be aware of the following issues:

Should you want to float the wrapper element or use any position but static, it won't work on the wrapper element – you will need a wrapper outside of it. This does lead to heavier mark-up, but, for the sake of vertically centred text, no matter how many lines of text are within the element, it's still a win. See example three.
IE

You can see this used to great effect on the recently updated Kent County Cricket Club website carousel; should you have any questions, you can post them in comments below.

How to centre align text or content vertically with CSS

By Alli Price | 19th January 2012