Further edits
This commit is contained in:
parent
f1d93b1719
commit
1ad7a4368d
@ -7,10 +7,19 @@ category: howto
|
||||
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
|
||||
freeze up at a later time.
|
||||
Some of our clients use [CiviCRM](https://civicrm.org/), 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 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
|
||||
|
||||
@ -18,13 +27,19 @@ Using [`civix`](https://github.com/totten/civix), we set up a new CiviCRM extens
|
||||
|
||||
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
|
||||
|
||||
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) {
|
||||
$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
|
||||
|
||||
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;
|
||||
|
||||
@ -90,10 +109,14 @@ Activate the extension, e.g. with `cv`
|
||||
|
||||
$ 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)
|
||||
|
||||
(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!
|
||||
|
Reference in New Issue
Block a user