What is the mechanism for tailoring an Angular form?

Question

I want to modify the behaviour of an Angular form.

The answer to question 4700 tells me 'how' to do it (add some JavaScript), but I'm interested in 'where' to do it.

If it was a PHP form I could use a hook. Should I use an extension?

Answer 1

I usually do it in an extension. This allows me to enable/disable changes at will.

1. Create an extension with Civix (eg com.example.myextension).
2. Inside the extension folder create (eg [ext_dir]/com.example.myextension/js/) folder.
3. Create your JS file in there (eg [ext_dir]/com.example.myextension/js/mychanges.js)

4. In the main extension file (eg [ext_dir]/com.example.myextension/myextension.php) add this hook. I think its called on all pages and forms -- may have to use pageRun or alterContent.

   function myextension_civicrm_alterTemplateFile($formName, &$form, $context, &$tplName) {
   
       $resource = CRM_Core_Resources::singleton();
   
       if ($formName=='theFormToEdit') {
           $resource->addScriptFile('com.example.myextension', 'js/mychanges.js');
       }
   }
   

5. Install and enable your extension.