Answers.Body: <p>I'm not sure the context exactly, but your code looks functional, although you're using a lot of deprecated javascript syntax (<code>cj</code> instead of <code>CRM.$</code>, <code>var</code> instead of <code>let</code>, hardcoded href instead of <code>{crmUrl}</code>, 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 ).</p>
  <p>Anyway, to your 2-part question:</p>
  <ol>
  <li>&quot;rendering of the form does not work properly&quot; - Based on your screenshot I think bootstrap.css isn't being loaded. You can fix this by calling <code>Civi::resources()-&gt;addBundle('bootstrap3');</code>.</li>
  <li>&quot;url-filter do not work&quot; - 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 <code>&quot;admin.php?page=CiviCRM&amp;q=civicrm/my-test-afform#?Individual1=123&quot;</code> or whatever filter you need. It should work.</li>
  </ol>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-09-26T16:49:42.600Z
Answers.Text: 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?
Answers.UserDisplayName: Simon Hermann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-09-26T17:51:56.860Z
Answers.Text: Screenshot does look like missing bootstrap.css. Updated my answer.
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-11-07T10:59:31.167Z
Answers.Text: 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.
Answers.UserDisplayName: Simon Hermann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-11-07T19:18:58.030Z
Answers.Text: Filters are supposed to work in popups. What version of Civi are you using?
Answers.UserDisplayName: Coleman
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-11-09T08:47:01.890Z
Answers.Text: I am currently on 5.64.4 on a WordPress instanz, which is on version 6.3.2
Answers.UserDisplayName: Simon Hermann
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2023-09-26T15:37:54.703Z
Answers.LastActivityDate: 2023-09-26T17:53:07.820Z
Answers.LastEditDate: 2023-09-26T17:53:07.820Z
Answers.UserDisplayName: Coleman
Body: <p>I am trying to embed a link to the case view, which should show an afform in a popup.
  Using the hook <code>civicrm_alterContent</code> I can embed the link using a simple .tpl file with the following content:</p>
  <pre><code>{crmScope extensionKey='my-test-extension'}
  &lt;a id=&quot;myCustomLink&quot; class=&quot;crm-hover-button action-item popup&quot; href={crmURL p=&quot;civicrm/my-searchKit#?id=`$caseId`&quot;}&gt;&lt;i class=&quot;fa fa-archive&quot; aria-hidden=&quot;true&quot;&gt;&lt;/i&gt;&amp;nbsp;{ts}My custom link{/ts}&lt;/a&gt; 
  &lt;script type=&quot;text/javascript&quot;&gt;
    {literal}
    CRM.$(function() {
      let myCustomLink = CRM.$('#myCustomLink').detach();
      CRM.$('div.case-control-panel').children('div').eq(1).children('p').first().append(myCustomLink);
    });
    {/literal}
  &lt;/script&gt;
  {/crmScope}
  </code></pre>
  <p>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
  <a href="https://i.sstatic.net/OdESX.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/OdESX.png" alt="enter image description here" /></a></p>
  <p>An answer in this question does suggest, that this is supposed to work: <a href="https://civicrm.stackexchange.com/questions/27631/why-wont-crm-loadform-render-url-containing-civicrm-a/45425#45425">Why won&#39;t CRM.loadForm render url containing civicrm/a/#?</a></p>
  
Tags: <formbuilder>
Title: Show Afform in a popup
ThreadText: # Show Afform in a popup
  
  (Asked by: username_0 on 2023-09-26)
  
  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'}
   {ts}My custom link{/ts} 
  
  {/crmScope}
  
  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
  
  An answer in this question does suggest, that this is supposed to work: Why won't CRM.loadForm render url containing civicrm/a/#?
  
  **Tags:** formbuilder
  
  
  ---
  
  ## 1 answers
  
  ### Answer by username_1 on 2023-09-26. Score: 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.
  
  > **Comments:**
  > **username_0**: 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?  
  > **username_1**: Screenshot does look like missing bootstrap.css. Updated my answer.  
  > **username_0**: 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.  
  > **username_1**: Filters are supposed to work in popups. What version of Civi are you using?  
  > **username_0**: I am currently on 5.64.4 on a WordPress instanz, which is on version 6.3.2  
  
  ---
  
  