コンテンツにスキップ
「プリザンター入門」発売中！

フォームにボタンを追加したい

回答

スクリプトを使うと、ボタンを追加できます。

概要

任意の項目の後ろや、コマンドボタンエリアにボタンを追加するには、スクリプトを使用してください。

操作方法

  1. 対象のテーブルを開いてください。
  2. ナビゲーションメニューの「管理」をクリックしてください。
  3. テーブルの管理をクリックしてください。
  4. 「エディタ」タブをクリックしてください。
  5. 「エディタの設定」で「分類A」を有効化してください。
  6. スクリプトタブをクリックしてください。
  7. 「新規作成」ボタンをクリックしてください。
  8. 「タイトル」に任意のタイトルを入力し、「スクリプト」に下記のスクリプトを入力します。
  9. 「出力先」は以下を参考に設定してください。
  10. 「変更」ボタンをクリックしてください。
  11. コマンドボタンエリアの「更新」ボタンをクリックしてください。
  12. 任意のレコードを開くか、レコードを新規作成してください。

サンプルコード

「出力先」　「新規作成」または「編集」（または両方）
1
2
3
4
5
$p.events.on_editor_load = function () {
    const field = $('#' + $p.getField('ClassA')[0].id);
    const btn = '<button type="button" style="float: left;">ボタン</button>';
    field.after(btn);
};

ボタンデザインはHTMLのbuttonタグ標準で追加します。

分類Aの後ろにHTMLのbuttonタグ標準デザインのボタンを追加

「出力先」　「新規作成」または「編集」（または両方）
1
2
3
4
5
$p.events.on_editor_load = function () {
  const btn = $('<button id="NewButton">ボタン</button>')
    .button({ icon: 'ui-icon-gear' }); // (1)!
  $('#MainCommands').append(btn);
};
  1. ボタンのアイコンは'ui-icon-○○'の形式で設定します。指定文字列は以下のページを参照してください。
    Icons | jQuery UI API Documentation

ボタンデザインはプリザンター準拠で追加します。

コマンドボタンエリアにプリザンター準拠デザインのボタンを追加

「出力先」を変更したい場合

「出力先」を「一覧」に設定したい場合は、イベント発火スクリプトを$p.events.on_grid_loadに変更してください。「カレンダー」や「クロス集計」を設定したい場合も、同様にイベント発火スクリプトを設定した画面のものに変更してください。

関連情報