FAQ: Adding a button to a form
## Answer
Add a button in "「Script」".
---
## Overview
Use "「Script」" to add a button after Category A or to the command button area.
## Method of Operation
1. Open the target table and open "「Table Management」" from the "Management" menu.
2. Add Category A in the Editor tab.
1. Open the Script tab, click the "Create New" button, enter any title in "「Title」", and enter the following script in "「Script」".
1. Set "Output Destination" appropriately.
1. Click the "Change" button to close the dialog.
1. Click the "Update" button at the bottom of the screen.
1. Open any record or create a new one.
## Sample Code
### 1. Add a button after Category A. The button design is the standard html button tag.
Set "Destination" to "New" or "Edit" (or both).
##### JavaScript
```
$p.events.on_editor_load = function () {
$('#' + $p.getField('ClassA')[0].id).after('<button type="button" style="float: left;">Button</button>');
};
```
### 2. Add a button to the command button area. The button design conforms to Pleasanter.
Set "Output Destination" to "New" or "Edit" (or both).
##### JavaScript
```
$p.events.on_editor_load = function () {
$('#MainCommands').append($('<button id=\"NewButton\">Button</button>').button({ icon: 'ui-icon-gear' }));
};
```
*If you set "Output Destination" to "List", change the event firing script to `$p.events.on_grid_load`. If you set "Calendar" or "Crosstab", change the event firing script to that of the screen on which it is set.
*Set the button icon in the "ui-icon-○○" format. For the specified string, see the following page.
[Icons \| jQuery UI API Documentation](https://api.jqueryui.com/theming/icons/)
## Related Information
<div id="ManualList">
<article class="s-blog_list_unit"><h2>
<h2>The specified information was not found.</h2>
<p><a href="/ja/manual">Return to top</a></p>
</article>
</div><input id="SearchTextHidden" type="hidden" value="" />
