<p>I thought I would report back with the good, the bad, and the ugly.</p>

<p><strong>The good</strong> It is very possible (and quite easy) to create a field type button element, and include your own custom javascript as is explained in the <a href="http://buildwithcraft.com/docs/plugins/field-types" rel="nofollow">fieldtype plugin documentation</a>. Setting the <code>defineContentAttributes</code> to return false will prevent columns from being created in the database. And <code>name</code>, <code>value</code> variables are not even needed in this case in <code>templates-&gt;render</code> array. Here is the basic MyPlugin_CustomButtonFieldType.php:</p>

<pre><code>class MyPlugin_CustomButtonFieldType extends BaseFieldType
{
    public function getName()
    {
        return Craft::t('Custom Button');
    }
    public function defineContentAttribute()
    {
        return false;
    }
    public function getInputHtml($name, $value)
    {
        craft()-&gt;templates-&gt;includeJsResource('myplugin/js/custombutton.js');
        return craft()-&gt;templates-&gt;render('muplugin/fieldtypes/CustomButton/input', array(
        ));
    }
}
</code></pre>

<p>And in the fieldtype template file (for a default CP craft looking button):</p>

<pre><code>&lt;input id="custombtn" type="submit" class="btn submit" value="{{ 'Do Something'|t }}" &gt;
</code></pre>

<p>So far so good. Imagine the possibilities!</p>

<p><strong>The Bad</strong> It is basically impossible (as far as I can tell) to over-write the default actions (i.e. <code>action/saveEntry</code>) via javascript as it is often dynamically inserted into the DOM via javascript depending on if you're using the <code>command+s</code> save shortcut or the save button sub-nav, etc. So replacing the default controller action, doesn't look like an option.</p>

<p>Update: It does look like you can prevent the default form submission, though. And then perhaps write your own <code>.click()</code> listener.</p>

<pre><code>$('#entry-form').submit(function(event) {
    event.preventDefault();
    return false;
}
$('input.save').click(function()){...}
</code></pre>

<p><strong>The Ugly</strong> It is possible to prevent fields from getting saved to the database (i.e. credit cards, and cvc codes) by simply removing the 'name' attributes from the fields, using something like:</p>

<pre><code>jQuery(function($) {
     // prevent the form from saving credit card and cvc codes
     $('input[name*="creditCardNumber"]').removeAttr('name');
     $('input[name*="cvc"]').removeAttr('name');
}
</code></pre>

<p>But it's pretty much a hack job and not very pretty. </p>

<p>So, custom field types with buttons and javascript look like a very easy and very powerful way to customize the CMS. And so far it seems pretty easy to send data via javascript to remote services, retrieve tokens, forward the token via ajax to a custom controller to get processed, saved and result returned.</p>

<p>Messing with the default actions on the other hand, not such a good idea.</p>

CC BY-SA 3.0
2014-10-10T02:25:07.063Z
2014-10-10T15:56:38.470Z
2014-10-10T15:56:38.470Z
Douglas McDonald
<p>I'm trying to figure out how to integrate Stripe into the CMS more natively, and a thought occurred to me. Would it be possible to create a fieldtype that was just a button (i.e. no data being stored) with its own javascript?</p>

<p>This would potentially allow you to add a lot of customization and functionality just by adding the button fieldtype to the field layout (rather than having a global javascript file throughout the CP) — like silently submitting data to an external service, handling the response, dynamically rewriting the CP form submit action temporarily to point to a custom controller, etc.</p>

<p>Bad idea? Or worth investigating?</p>

<plugin-development><custom-fieldtype>
How do you create a custom button field type (with js includes) for customizing the CP?
# How do you create a custom button field type (with js includes) for customizing the CP?

(Asked by: username_0 on 2014-10-09)

I'm trying to figure out how to integrate Stripe into the CMS more natively, and a thought occurred to me. Would it be possible to create a fieldtype that was just a button (i.e. no data being stored) with its own javascript?

This would potentially allow you to add a lot of customization and functionality just by adding the button fieldtype to the field layout (rather than having a global javascript file throughout the CP) — like silently submitting data to an external service, handling the response, dynamically rewriting the CP form submit action temporarily to point to a custom controller, etc.

Bad idea? Or worth investigating?

**Tags:** plugin-development, custom-fieldtype


---

## 1 answers

### Answer by username_0 on 2014-10-10. Score: 2 | Accepted answer

I thought I would report back with the good, the bad, and the ugly.
The good It is very possible (and quite easy) to create a field type button element, and include your own custom javascript as is explained in the fieldtype plugin documentation. Setting the defineContentAttributes to return false will prevent columns from being created in the database. And name, value variables are not even needed in this case in templates->render array. Here is the basic MyPlugin_CustomButtonFieldType.php:
class MyPlugin_CustomButtonFieldType extends BaseFieldType
{
    public function getName()
    {
        return Craft::t('Custom Button');
    }
    public function defineContentAttribute()
    {
        return false;
    }
    public function getInputHtml($name, $value)
    {
        craft()->templates->includeJsResource('myplugin/js/custombutton.js');
        return craft()->templates->render('muplugin/fieldtypes/CustomButton/input', array(
        ));
    }
}

And in the fieldtype template file (for a default CP craft looking button):


So far so good. Imagine the possibilities!
The Bad It is basically impossible (as far as I can tell) to over-write the default actions (i.e. action/saveEntry) via javascript as it is often dynamically inserted into the DOM via javascript depending on if you're using the command+s save shortcut or the save button sub-nav, etc. So replacing the default controller action, doesn't look like an option.
Update: It does look like you can prevent the default form submission, though. And then perhaps write your own .click() listener.
$('#entry-form').submit(function(event) {
    event.preventDefault();
    return false;
}
$('input.save').click(function()){...}

The Ugly It is possible to prevent fields from getting saved to the database (i.e. credit cards, and cvc codes) by simply removing the 'name' attributes from the fields, using something like:
jQuery(function($) {
     // prevent the form from saving credit card and cvc codes
     $('input[name*="creditCardNumber"]').removeAttr('name');
     $('input[name*="cvc"]').removeAttr('name');
}

But it's pretty much a hack job and not very pretty. 
So, custom field types with buttons and javascript look like a very easy and very powerful way to customize the CMS. And so far it seems pretty easy to send data via javascript to remote services, retrieve tokens, forward the token via ajax to a custom controller to get processed, saved and result returned.
Messing with the default actions on the other hand, not such a good idea.


---

