CiviCon is a get together of CiviCRM community around the world to discuss and share their experiences to make CiviCRM more awesome. It is also a great chance for people to network and get to know latest in CiviWorld 
Archive for the "Technology" Category
CiviCon San Francisco 2012
April 10th, 2012
{ No Comments }
how to add client side phone validation in CiviCRM
November 13th, 2011
{ No Comments }
Recently on CiviCRM irc and forum few people asked about adding client side validation for phone field. By default CiviCRM packages validate plugin, so this can be easily implemented with minor customization. Below is the example of validating US phone number on new contact form.
Index: templates/CRM/Contact/Form/Edit/Phone.tpl===================================================================— templates/CRM/Contact/Form/Edit/Phone.tpl (revision 37399)+++ templates/CRM/Contact/Form/Edit/Phone.tpl (working copy)@@ -39,10 +39,10 @@</tr>{/if}<tr id=”Phone_Block_{$blockId}”>- <td>{$form.phone.$blockId.phone.html} {ts}ext.{/ts} {$form.phone.$blockId.phone_ext.html|crmReplace:class:four} {$form.phone.$blockId.location_type_id.html}</td>+ <td>{$form.phone.$blockId.phone.html|crmReplace:class:”phoneUS”} {ts}ext.{/ts} {$form.phone.$blockId.phone_ext.html|crmReplace:class:four} {$form.phone.$blockId.location_type_id.html}</td><td colspan=”2″>{$form.phone.$blockId.phone_type_id.html}</td><td align=”center” id=”Phone-Primary-html” {if $blockId eq 1}class=”hiddenElement”{/if}>{$form.phone.$blockId.is_primary.1.html}</td>{if $blockId gt 1}<td><a href=”#” title=”{ts}Delete Phone Block{/ts}” onClick=”removeBlock(‘Phone’,'{$blockId}’); return false;”>{ts}delete{/ts}</a></td>{/if}-</tr>\ No newline at end of file+</tr>Index: packages/jquery/plugins/jquery.civicrm-validate.js===================================================================— packages/jquery/plugins/jquery.civicrm-validate.js (revision 37399)+++ packages/jquery/plugins/jquery.civicrm-validate.js (working copy)@@ -5,4 +5,13 @@* To define phone validation for your site:* jQuery.validator.addMethod(“crm_phone”, function(phone_number, element) { validation logic here }*/-+(function() {+ jQuery.validator.addMethod(“phoneUS”, function(phone_number, element) {+ phone_number = phone_number.replace(/\s+/g, “”);+ return this.optional(element) || phone_number.length > 9 &&+ phone_number.match(/^(1-?)?(\([2-9]\d{2}\)|[2-9]\d{2})-?[2-9]\d{2}-?\d{4}$/);+ }, “Please specify a valid phone number”);+ jQuery.validator.addMethod(“postalcode”, function(postalcode, element) {+ return this.optional(element) || postalcode.match(/(^\d{5}(-\d{4})?$)|(^[ABCEGHJKLMNPRSTVXYabceghjklmnpstvxy]{1}\d{1}[A-Za-z]{1} ?\d{1}[A-Za-z]{1}\d{1})$/);+ }, “Please specify a valid 5 digit zip code.”);+})();
I have tested this on CiviCRM v3.4 ( latest ). I hope this is helpful.
Originally posted on http://civicrm.org/blogs/kurund/how-implement-client-side-phone-validation
Drupal Camp Mumbai 2011 – Day 1
November 9th, 2011
{ No Comments }
I had an excellent time with fellow drupalars at Drupal Camp Mumbai held at IIT, Powai. It feels great to put faces to irc nicknames and meet the people for real. This always amazes me .
I was bit late hence missed drupal song ( which I heard was fun ) but reached in time for keynote by Dries Buytaert, original creator and project lead for the Drupal. Dries spoke about early days of drupal and how it has evolved into one of the successful open source project. He also emphasized on having a strong community and then shared his thoughts on drupal’s future.
Jacob Singh’s “How to have an open relationship with software (and still get paid) – Free software in material world“, mainly focussed on how each one of us can benefit by being part of drupal community and in the process grow as a individual/company within drupal community. I really liked his presentation, especially self portraits :)
“Drupal Entities Unleashed – Create your own information architecture with Drupal” by Mukesh Agarwal was a good introduction to entities in drupal. He started with basic concepts and then went on to code level details.
“Drupal, Migrating to Drupal was never so easy“ by Piyuesh Kumar & Dipen Chaudhary demonstrated migration of ROR website into drupal using migrate module. They covered various features of migrate module and it’s integration with drush. It was a great mix of code and actual migration process. This was followed by a good Q& A session.
This kind of summarizes my day at DCM and looking forward for tomorrow’s code sprint. If you guys missed today, don’t miss tomorrow, there are some kool sessions scheduled along with code sprint.
c ya tomorrow
setup mac os x (lion) as development machine ( macports: apache + mysql + php + subversion )
October 23rd, 2011
{ No Comments }
Here are the instructions to setup Mac OS X ( Lion ) for MAMP software development. Basically you will need apache, mysql, php, subversion and may be phpmyadmin. I am using macports which simplifies the installation process.
1. Install Xcode from apple’s Mac app store. It might take a while because mac app store is very slow/pathetic. ( so don’t blame your ISP )
In this time you can download other useful softwares. My recommendation:
IM: Adium
IRC: Colloguy,
Browser: Firefox (for development), Chrome (Browsing),
Flash Player
Skype
Textmate ( if don’t use vim or emacs )
2. Download macports from http://www.macports.org and follow the installation instructions.
3. Make sure port is updated to latest
sudo port selfupdate
4. Install the packages
sudo port install subversion apache2 mysql5-server php5 +pear +mysql5 php5-xdebug phpmyadmin
Similarly if you need any other software you can install it using macport. ( if it is available on macports )
5. Load ports so that services like apache and mysql start automatically event after restart.
sudo port load apache2
sudo port load mysql5
6. Go to your browser and type http://localhost it should display “It works”. If not then you can manually start apache and mysql.
sudo /opt/local/share/mysql5/mysql/mysql.server start
sudo /opt/local/apache2/bin/httpd -k start
Now you are all set, time to develop some kool stuff
migrate/copy mysql databases from one machine to another
October 22nd, 2011
{ No Comments }
I am currently on Mac OS X( Snow leopard ) and have installed mysql using macports. I wanted to copy my databases to another machine Mac OS X ( Lion ) to avoid creating new db’s from fresh. Here are the instructions for the same.
Important: Information about databases is stored in below folder
/opt/local/var/db/mysql5
So basically you need to copy this folder onto your new machine.
1. First backup existing mysql5 folder. ( this is assuming you have already installed mysql using macports )
2. Copy mysql folder to /opt/local/var/db/, for this you need be sudo user.
3. Change owner
chown -R _mysql:_mysql /opt/local/var/db/mysql5
4. Restart your computer ( I didn’t find the better way ) or may be try restarting mysql.
sudo /opt/local/share/mysql5/mysql/mysql.serve
5. When you copy databases, there is a good change that your INNODB engine might not work. So go to mysql terminal and fire
<mysql> show engines;
If it does not show INNODB or is disabled try following:
cd /opt/local/var/db/mysql5
mv ib_logfile0 ib_logfile0.bak
Basically move all ib_logfile* file to .bak files and then restart mysql server. Now go to mysql terminal and do show engines. INNODB should be enabled.
I think this instructions should work fine on any OS as long as you copy databases to correct location.
This saved me few hours and I hope it helps you too
Samsung ML2245 (Printer configuration) on Mac OS X 10.6 (Snow Leopard)
April 21st, 2011
{ No Comments }
Based on my previous blog, here are the instructions to configure Samsung ML2245 on Mac OS X 10.6 ( currently I am on 10.6.7 )
1. Install following drivers:
Note: First install samsung-gdi-1.816.2.dmg and follow #2 instructions. Check if your printer works. If not then install Footmatic-RIP and gplgs-8.71.dmg
You should also check http://www.openprinting.org/download/printdriver/macosx/ for latest version of above drivers.
2. Once you are done with driver installation, simply follow printer adding instructions:
http://support.apple.com/kb/HT1800?viewlocale=en_US
So now in your drivers list you will find Samsung ML2245
Hope this helps…
Share / Broadcast wireless network using your mac pro
February 27th, 2011
{ No Comments }
Imagine you have wifi enabled cell phone or any other device but you have only wired connection which means you cannot browse/download apps on your mobile. Well it takes just one step to setup your mac to broadcast wireless network that can be used by your other devices.
System Preferences >> Sharing >> check Internet Sharing and then apply
That’s it. Now you will be able to find your mac in available wireless networks.
jQuery plugin to change the row color on hover
January 31st, 2011
{ 6 Comments }
For my project CivCRM, I wrote a simple jquery plugin to change the row color on mouse hover. It is generic enough and can be used in any project. Here is the implementation.
1. Create a plugin file: jquery.crmrowhighlighter.js
(function($){ $.fn.crmrowhighlighter = function(){
if ($(‘.crm-row-highlighter-processed’).length == 0){
$(‘.selector tr’).hover(function(){
$(this).addClass(‘crm-row-highlight’);
},function(){
$(this).removeClass(‘crm-row-highlight’);
});
$(‘.selector’).addClass(‘crm-row-highlighter-processed’);
};
};
})(jQuery);
2. Create css file: my.css
.crm-row-highlight {
background-color: #FFFFCC !important;
}
Usage:
<script type=”text/javascript” src=”jquery.js”></script>
<script type=”text/javascript” src=”jquery.crmrowhighlighter.js”></script>
<style type=”text/css”>@import url(“my.css”);</style>
<table class=”selector”>
<tr> Row 1: Hover to change the color</tr>
<tr> Row 2: Hover to change the color</tr>
</table>
<script type=”text/javascript”>
$( function(){
$().crmrowhighlighter( );
});
</script>
Note: You need to have table’s class = “selector”
That’s it, now when you hover the row color will change. Hope this helps.
Integrating IMCE Drupal module with CiviCRM CKEditor
December 21st, 2010
{ 5 Comments }
CiviCRM comes with CKEditor as a default wysiwyg editor. One of the missing feature has been ability to upload /browse existing files on the server using CKEditor. So after some investigation I figured out you can easily integrate IMCE drupal module for this purpose.
Here are the steps:
1. Install IMCE module: http://drupal.org/project/imce
2. Modify packages/ckeditor/config.js
Index: config.js
===================================================================
— config.js (revision 31357)
+++ config.js (working copy)
@@ -9,6 +9,10 @@
// config.language = ‘fr’;
//config.uiColor = ‘#AADC6E’;
+ config.filebrowserBrowseUrl = ‘/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight’;
+ config.filebrowserImageBrowseUrl = ‘/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight’;
+ config.filebrowserFlashBrowseUrl = ‘/index.php?q=imce&app=ckeditor|url@txtUrl|width@txtWidth|height@txtHeight’;
+
// disable auto spell check
config.scayt_autoStartup = false;
3. Clear you browser cache
4. That’t it, now when you click on image icon you will get option to “Browse Server”, using which you can browse existing file or upload new files on the server.
By default you can browse / upload files only to files directory.
Sorry joomla people.. this will work only for drupal.
Easiest way to sort a select element using Jquery
September 9th, 2010
{ No Comments }
If you are using jquery sorting a select element is quite easy. Check the below code.
$(“#select-id”).html( $(“#select-id option”).sort(function (a, b) {
return a.text == b.text ? 0 : a.text < b.text ? -1 : 1;
}));
