Further edits

This commit is contained in:
c v t
2019-09-05 09:26:07 +02:00
parent f1d93b1719
commit 1ad7a4368d
@@ -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!