CiviCRM: Using jQuery to show/hide fields

UPDATE: I gave a lightning talk on this subject at CiviCon London, here are the slides:

My client requested amendments to remove some complexity from CiviCRM’s interface.

Out-of-the-box, changes can be made here:
Administer > Configure > Global Settings > Site Preferences

I de-selected all except: Custom Fields, Notes.

To meet my client’s requirements I amended the Advanced Search template.

To make amendments to the front-end of CiviCRM:
View Source of the page you want to amend, and do a search for .tpl to find the template the page is based on.
For example, in the source of the advanced search page, we find this:

<!-- .tpl file invoked: CRM/Contact/Form/Search/Advanced.tpl. Call via form.tpl if we have a form in the page. -->

Go to:
… this is the tpl file.
… don’t change it.
… we will shortly copy this file to a custom template folder and modify it.
Create a folder where you will create a copy of the file to modify. I did this:
Administer > Configure > Global Settings > Directories
Custom Templates = /home/myprojectname/public_html/civicrm_custom_templates/
Now, on the file system on your server, create the same folder structure beneath the custom templates folder:
Copy Advanced.tpl into this folder.
You can now edit this .tpl file and amend it as you wish.

First, I added a toggle field visibility link at the top of the page:

<div style=”text-align:right;”>
<a href=”#” id=”toggleFieldVisibility”>Toggle Field Visibility</a>

I added the following jQuery:

Note that we use cj instead of the dollar sign $ to denote jQuery.

I think this is because CiviCRM does not want to clash with any jQuery defined within Drupal or Joomla, so it creates its own jQuery instance denoted with cj instead.

       {* END Actions/Results section *}


 * Modified by Michael Lenahan, June 2011
cj('#toggleFieldVisibility').click(function (event) {
function toggleFieldVisibility() {
  // Contact Types, Groups, Tags removed in the front-end:
  // civicrm/admin/setting/preferences/display?reset=1
  // Remove row: CMS User, Preferred Language
  // Remove row: Privacy, Preferred Communication
  // Remove Contact Source cell
 * End modification

cj(function() {

     * Modified by Michael Lenahan, June 2011
    cj('.crm-custom-accordion').removeClass('crm-accordion-closed').addClass('crm-accordion-open') ;
    // toggle fields off by default
     * End modification

    if ( cj('#component_mode').val() != '7' ) {
      cj('#crm-display_relationship_type').hide( );
Posted in drupal

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: