<p>I finally figured this out. I was actually close. </p>

<p>Here's the HTML that I use</p>

<pre><code>&lt;div class="hud-wrapper hidden"&gt;
    &lt;div id="generate-pdf-form" class="form meta"&gt;
        &lt;form&gt;

            {% import "_includes/forms" as forms %}

            {{ forms.lightswitchField({
                 class: 'docraptorize-prod-lightswitch',
                 name: 'prod-pdf',
                 on: true
            }) }}   

            &lt;input type="submit" class="btn submit" value="{{ "Go!"|t }}"&gt;
        &lt;/form&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and this is the corresponding JS</p>

<pre><code>var $btn = $('#generate-pdf-hud'),
$form = $('#generate-pdf-form');

$btn.on('click',function(){
    var hud = new Garnish.HUD($btn, $form, {
        orientations: ['top', 'bottom', 'right', 'left']
    });
   return false;
});
</code></pre>

CC BY-SA 3.0
2017-04-28T20:45:02.830Z
2017-04-28T20:45:02.830Z
Andreas
<p>I've written a custom plugin and added a custom button to the right panel of an entry page</p>

<p><a href="https://i.sstatic.net/WWGfM.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/WWGfM.png" alt="Click on the red button should trigger a Garnish Hud"></a></p>

<p>Now I'm trying to show a Garnish Hud if I click the red button (like the one when you re-index assets) </p>

<p><a href="https://i.sstatic.net/cTOdc.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/cTOdc.png" alt="I want to re-create this tooltip hud"></a></p>

<p>The content of the hud would be two radio buttons and a button which triggers a controller function. It should also show the progress bar and the success icon after the button was clicked (so basically the same behaviour as the assets indexing thing)</p>

<p>I put this code in my plugin specific js file</p>

<pre><code>var hud = new Garnish.HUD($('#generate-pdf'), 'test', {
        orientations: ['top', 'bottom', 'right', 'left'],
        hudClass: 'hud toolhud',
    });
</code></pre>

<p>But this shows the hud after page load and the trigger (that's the button with the id #generate-pdf) doesn't work at all.</p>

<p>Can anyone point me in the right direction? </p>

<plugin-development><garnish><hud>
How do I show a Garnish hud in the CP
# How do I show a Garnish hud in the CP

(Asked by: username_0 on 2017-04-28)

I've written a custom plugin and added a custom button to the right panel of an entry page

Now I'm trying to show a Garnish Hud if I click the red button (like the one when you re-index assets) 

The content of the hud would be two radio buttons and a button which triggers a controller function. It should also show the progress bar and the success icon after the button was clicked (so basically the same behaviour as the assets indexing thing)
I put this code in my plugin specific js file
var hud = new Garnish.HUD($('#generate-pdf'), 'test', {
        orientations: ['top', 'bottom', 'right', 'left'],
        hudClass: 'hud toolhud',
    });

But this shows the hud after page load and the trigger (that's the button with the id #generate-pdf) doesn't work at all.
Can anyone point me in the right direction?

**Tags:** plugin-development, garnish, hud


---

## 1 answers

### Answer by username_0 on 2017-04-28. Score: 4 | Accepted answer

I finally figured this out. I was actually close. 
Here's the HTML that I use

    
        

            {% import "_includes/forms" as forms %}

            {{ forms.lightswitchField({
                 class: 'docraptorize-prod-lightswitch',
                 name: 'prod-pdf',
                 on: true
            }) }}   

            
        
    


and this is the corresponding JS
var $btn = $('#generate-pdf-hud'),
$form = $('#generate-pdf-form');

$btn.on('click',function(){
    var hud = new Garnish.HUD($btn, $form, {
        orientations: ['top', 'bottom', 'right', 'left']
    });
   return false;
});


---

