Further edits

This commit is contained in:
c v t 2019-09-05 09:26:07 +02:00
parent f1d93b1719
commit 1ad7a4368d

View File

@ -7,10 +7,19 @@ category: howto
date: 2019-08-30 date: 2019-08-30
--- ---
Some of our clients use [CiviCRM](https://civicrm.org/) which is a popular open source "constituent relationship management" platform. One of those clients regularly uses the "Mailing" features to send out emails to their supporters and we found out they're experiancing a bug where a user sends out a mailing with the same name (not subject line, just the internal identifier 🙄) as an existing mailing, it'll cause the CRM to Some of our clients use [CiviCRM](https://civicrm.org/), a popular open source
freeze up at a later time. "constituent relationship management" platform. One of those clients regularly
uses the "Mailing" features to send out emails to their supporters, and told us
that they're experiancing a bug: if a user sends out a mailing with the same
name (not subject line, just the internal identifier 🙄) as an existing one,
it'll cause the CRM to freeze up elsewhere.
As an added challenge, the mailings feature of CiviCRM [now use AngularJS](https://docs.civicrm.org/dev/en/latest/framework/angular/) following a recent rebuild by the developers, and there aren't many tutorials or examples out there of workarounds to this issue. Luckily, the CiviCRM developer community was super-helpful, and we managed to sort out some in-form validation to prevent duplicate mailing names for our client and now for you, too! As an added challenge, the mailing features of CiviCRM [now use
AngularJS](https://docs.civicrm.org/dev/en/latest/framework/angular/) following
a recent rebuild by the developers, and there aren't many tutorials or examples
out there to customise it. Luckily, the CiviCRM developer community was
super-helpful, and we managed to sort out some in-form validation to prevent
duplicate mailing names for our client… and now for you, too!
## Create a new extension ## Create a new extension
@ -18,13 +27,19 @@ Using [`civix`](https://github.com/totten/civix), we set up a new CiviCRM extens
civix generate:module mailing civix generate:module mailing
(We called our extension `mailing`, because our creative director was occupied with an Art at the time) (We called our extension `mailing`, because our creative director was occupied
with an Art at the time)
Our client sensibly keeps their custom CiviCRM extensions in `git`, at this stage we initialised a repository, added the boilerplate template code, and pushed. Our client sensibly keeps their custom CiviCRM extensions in `git`, so at this
stage we initialised a repository, added the boilerplate template code, and
pushed.
## Set up the AngularJS hook ## Set up the AngularJS hook
A function called `mailing_civicrm_alterAngular()` will get executed whenever an AngularJS page loads, and you can use a `ChangeSet` to edit an AngularJS template and, because AngularJS templates specify form logic, also change the validation behaviour. Our hook function looks like this: A function called `mailing_civicrm_alterAngular()` will get executed whenever
an AngularJS page loads, and you can use a `ChangeSet` to edit an AngularJS
template. Because AngularJS templates specify form logic, this also lets you
change the validation behaviour. Our hook function looks like this:
function mailing_civicrm_alterAngular($angular) { function mailing_civicrm_alterAngular($angular) {
$changeSet = \Civi\Angular\ChangeSet::create('mailing_name_unique') $changeSet = \Civi\Angular\ChangeSet::create('mailing_name_unique')
@ -41,11 +56,15 @@ A function called `mailing_civicrm_alterAngular()` will get executed whenever a
} }
Setting `crm-ui-validate` to `validateName` directly fired the event _way_ too many times, so instead `validateName` is only called when focus leaves the field, `ng-blur`, which then sets the `isValid` variable that's checked by `crm-ui-validate`. Setting `crm-ui-validate` to `validateName` directly fired the event _way_ too
many times, so instead `validateName` is only called when focus leaves the
field, `ng-blur`, which then sets the `isValid` variable that's checked by
`crm-ui-validate`.
## Create the `validateName` function ## Create the `validateName` function
Then, the code which queries the CiviCRM API to check for mailings with duplicate names: Then, the code which queries the CiviCRM API to check for mailings with
duplicate names:
var validating = false; var validating = false;
@ -90,10 +109,14 @@ Activate the extension, e.g. with `cv`
$ cv en mailing $ cv en mailing
Now, open a mailing and try to give it the same name as an existing one you should see the field border turn red, and you'll be prevented from continuing or sending the mailing: Now, open a mailing and try to give it the same name as an existing one you
should see the field border turn red, and you'll be prevented from continuing or
sending the mailing:
![](/assets/images/civicrm_validation.png) ![](/assets/images/civicrm_validation.png)
(As a bonus, the extension also sends a notification to the user using `CRM.alert` to explain the error) (As a bonus, the extension also sends a notification to the user using
`CRM.alert` to explain the error)
It does seem like a red border sometimes hangs around the field label even after the value is valid again.. but apart from that, the feature is working great! It does seem like a red border sometimes hangs around the field label even after
the value is valid again… but apart from that, the feature is working great!