Injecting JavaScript to Customize Control Panel Forms

The Webvanta control panel automatically creates forms for you to edit whatever database structure you define. This automation makes it painless to add database fields and to create whatever structure you need.

Sometimes, however, you may want more control over these form. For example, you might want to make certain fields in a custom item type editing form invisible to content editors.

You can modify control panel forms by injecting JavaScript of your choice into the control panel. Just We create a configuration setting called:

admin.custom.control_panel.head_markup

And set the value to whatever code you want injected into the head section of the control panel pages.

Typically, you'll want to use this setting to invoke a JavaScript file, such as:

<script type="text/javascript" src="/js/admin-customization.js"></script>

Both jQuery and the WebvantaAdmin tools are available to you in this JavaScript. The following example shows how to hide a field:

$(document).ready(function() { 
    $(".formclass #myfieldid").hide(); 
});

Where "formclass" is the unique class that identifies the CIT, and "myfieldid" is the name of the field that this code is intended to hide.

To find these class names and IDs, use Chrome Developer Tools, Firebug, or equivalent to inspect the control-panel form.