CiviCRM: Using jQuery to show/hide fields

UPDATE: I gave a lightning talk on this subject at CiviCon London, here are the slides: https://docs.google.com/present/view?id=dcz2xdg_137g8jrj6vs

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
civicrm/admin/setting/preferences/display?reset=1

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:
sites/all/modules/civicrm/templates/CRM/Contact/Form/Search/Advanced.tpl
… 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:
public_html/civicrm_custom_templates/
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:
civicrm_custom_templates/CRM/Contact/Form/Search/
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>
</div>

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 *}

{/if}
{literal}

/*
 * Modified by Michael Lenahan, June 2011
 */
cj('#toggleFieldVisibility').click(function (event) {
  event.preventDefault();
  toggleFieldVisibility();
});
function toggleFieldVisibility() {
  cj('#uf_group_id').parent().toggle();
  cj('#component_mode').parent().toggle();
  // Contact Types, Groups, Tags removed in the front-end:
  // civicrm/admin/setting/preferences/display?reset=1
  cj('#operator').parent().parent().toggle();
  // Remove row: CMS User, Preferred Language
  cj('#CIVICRM_QFID_1_2').parent().parent().toggle();
  // Remove row: Privacy, Preferred Communication
  cj('#privacy\\[do_not_phone\\]').parent().parent().toggle();
  // Remove Contact Source cell
  cj('#contact_source').parent().toggle();
}
/*
 * End modification
 */

cj(function() {
    cj().crmaccordions();

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

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

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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: