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
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!
Using [`civix`](https://github.com/totten/civix), we set up a new CiviCRM extension for our code:
civix generate:module mailing
(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.
## 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:
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:
CRM.alert(ts('There is already a mailing with this name; sending this one will crash CiviCRM!'));
} else {
$scope.isValid = true;
}
}, function(error) {
// oops
console.log(error);
});
validating = false;
}
};
});
})(angular, CRM.$);
(saved as `js/disallow-duplicate-names.js`)
## Conclusion
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:
(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!
