I am trying to embed a link to the case view, which should show an afform in a popup. Using the hook civicrm_alterContent I can embed the link using a simple .tpl file with the following content:

{crmScope extensionKey='my-test-extension'}
<a id="myCustomLink" class="crm-hover-button action-item popup" href={crmURL p="civicrm/my-searchKit#?id=`$caseId`"}><i class="fa fa-archive" aria-hidden="true"></i>&nbsp;{ts}My custom link{/ts}</a> 
<script type="text/javascript">
  CRM.$(function() {
    let myCustomLink = CRM.$('#myCustomLink').detach();

The custom link is properly added and a popup shows up showing the afform, however the rendering of the form does not work properly and url-filter do not work. The resulting popup looks as following enter image description here

An answer in this question does suggest, that this is supposed to work: Why won't CRM.loadForm render url containing civicrm/a/#?

1 Answer 1


I'm not sure the context exactly, but your code looks functional, although you're using a lot of deprecated javascript syntax (cj instead of CRM.$, var instead of let, hardcoded href instead of {crmUrl}, to be fair a lot of Civi's code still looks like this and hasn't been updated yet, so I can see where you got your inspiration from 😆).

Anyway, to your 2-part question:

  1. "rendering of the form does not work properly" - Based on your screenshot I think bootstrap.css isn't being loaded. You can fix this by calling Civi::resources()->addBundle('bootstrap3');.
  2. "url-filter do not work" - Well, in your code example I don't see you passing in any url filter, so I wouldn't expect it to work! Try changing your href to something like "admin.php?page=CiviCRM&q=civicrm/my-test-afform#?Individual1=123" or whatever filter you need. It should work.
  • You got me with the old javascript. Most of it was copied from an existing extension that did more or less what I wanted to achieve. While I might try to update the javascript I understand your answer such that this should have no functional effect. I edited my question to include a screenshot of the resulting popup. If the issue would be that the bootstrap theme css is not being loaded, what would be a way to go about it? Sep 26, 2023 at 16:49
  • Screenshot does look like missing bootstrap.css. Updated my answer.
    – Coleman
    Sep 26, 2023 at 17:51
  • Thanks for the new hints. Adding the bootstrap css to my call of civicrm_alterContent did resolve the rendering issues. However, the url filter do still not work. I edited my code along your suggestion for more modern javascript syntax and added the format of the url parameter I am using. If I open the generated link in a new tab, the SearchKit is displayed with the url parameter working. Nov 7, 2023 at 10:59
  • Filters are supposed to work in popups. What version of Civi are you using?
    – Coleman
    Nov 7, 2023 at 19:18
  • I am currently on 5.64.4 on a WordPress instanz, which is on version 6.3.2 Nov 9, 2023 at 8:47

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.