公式マニュアルに載っていない $p の関数
ブラウザ側のスクリプトで使う $p には、公式マニュアルの スクリプト に載っているもの以外にも多くの関数・プロパティがあります。大部分はプリザンター自身の画面を動かすための内部用ですが、スクリプトから使うと便利なものもあります。
内部用の関数です
マニュアルに載っていない関数は、バージョンアップで予告なく変わったり無くなったりします。使うときはバージョンアップのたびに動作を確かめてください。
全体の数
Implem.PleasanterFrontend/wwwroot/src/scripts/ の JS / TS で $p.名前 = の形で定義しているものを数えると、1.5.1.0 で 354 個、1.5.8.1 で 370 個です。1.5.1.0 の時点で、マニュアルに載っているのはそのうち 85 個でした。
マニュアルに載っていないものを用途で分けると次のとおりです(件数は 1.5.1.0 のもの)。
| 分類 | 件数 | 内容 | スクリプトから |
|---|---|---|---|
| 内部のイベント呼び出し | 10 | $p.before_send() など、$p.events に登録した処理を呼ぶ | 使わない($p.events に登録する) |
| 通信の補助 | 6 | $p.multiUpload・$p.addUrlParameter など | ほぼ不要 |
| フォーム・データ | 8 | $p.setMustData・$p.outsideDialog・複数選択の内部処理など | ほぼ不要 |
| ローディング・スクロール | 8 | $p.loading・$p.loaded・$p.saveScroll・$p.paging など | 一部使える |
| 一覧の操作 | 7 | $p.editOnGrid・$p.newOnGrid・$p.copyRow など | 一部使える |
| サイト設定のダイアログ | 56 | $p.openGridColumnDialog などテーブルの管理画面のダイアログと、ダッシュボードのパーツのサイト選択の確認 | 使えない(管理画面専用) |
| 権限・アクセス制御 | 23 | 権限のダイアログ、項目・ビュー・プロセスなどのアクセス制御 | 使えない(管理画面専用) |
| ダッシュボード・カレンダー・ガントなど | 18 | 各ビューの描画・移動 | ほぼ不要 |
| レコードの操作 | 8 | $p.new・$p.copy・$p.search・$p.bulkUpdate・$p.import・$p.export など、ボタンから呼ばれる処理 | 一部使える |
| メール・インポート・エクスポート・多言語ラベル・テンプレート | 26 | 各ダイアログの表示と実行 | ほぼ不要 |
| 項目の並べ替え・グループ | 13 | 管理画面での項目の移動、グループのメンバーの追加・削除 | 使えない(管理画面専用) |
| 画像・動画・添付ファイル | 13 | 画像の削除、カメラ撮影、動画 | ほぼ不要 |
| UI の制御 | 9 | $p.apply・$p.focusMainForm・$p.pageObserve・サイドメニューなど | 一部使える |
| その他のユーティリティ | 9 | $p.throttle・$p.debounce・$p.action など | 一部使える |
| その他の画面部品 | 39 | ナビゲーション、数値・日付の範囲指定ダイアログ、関連項目の連動、バスケット、プロセスの実行、パスワードの生成など | ほぼ不要 |
| 内部の状態を持つプロパティ | 10 | $p.disableAutPostback・$p.searchWord・$p.scrollX など | 参照は可 |
スクリプトから使えるもの
以下は 1.5.8.1 のソースで動作を確かめたものです。
$p.action()
Hidden 要素 #Action の値(index・edit・new など)を返します(siteinfo.js#L9-L11)。$p.controller()・$p.tableName() と同じファイルにあります。値の意味は スクリプトで使えるシステム変数 を参照してください。
if ($p.action() === 'edit') {
// 編集画面だけで動かす
}$p.throttle(action, interval) / $p.debounce(action, interval)
| 関数 | 動作 |
|---|---|
$p.throttle | 前回の実行から interval ミリ秒たっていれば action を実行し、たっていなければ何もしない |
$p.debounce | 前回の予約を取り消し、interval ミリ秒後に action を実行する |
どちらもすべての呼び出しで 1 つの状態(lastTime・timer)を共有しています(_form.js#L126-L144)。関数ごとにタイマーが分かれるわけではないので、別々の処理で使うと互いに取り消し合います。本体も、自動ポストバックの文字列項目で Enter を押したときの送信に $p.debounce(…, 500) を使っています(_controllevents.js#L49-L57)。スクリプトで $p.debounce を使うと、この送信を取り消してしまうことがあります。独立したデバウンスが要るなら、自分で setTimeout を持つほうが安全です。
// 独立したデバウンス
var timer;
$(document).on('input', '#Results_ClassA', function () {
clearTimeout(timer);
timer = setTimeout(function () { /* 処理 */ }, 300);
});$p.loading($control) / $p.loaded()
$p.loading は画面全体のローディング表示(#LoaderContainer)を出します。$control にボタン要素を渡すと、そのボタンを無効にして loading クラスを付け、アイコンをテーマの loading.gif に替えます。$p.loaded はローディング表示を消し、loading クラスの付いたボタンをすべて元に戻します(loading.js)。
var $button = $('#MyButton');
$p.loading($button);
fetch('/api/…')
.finally(function () { $p.loaded(); });本体の通信の処理も終わったときに $p.loaded() を呼ぶので(_ajax.js#L150 など)、自分の処理の途中で本体の通信が終わると、表示が先に消えることがあります。
$p.confirmReload()
$p.formChanged が true(入力が変わっている)のときだけ、離脱の確認(表示文字列 ConfirmUnload)を confirm で出し、その結果を返します。変わっていなければ true を返します(confirm.js)。スクリプトで画面を移動させる前に呼ぶと、標準の「前」「次」ボタンと同じ確認になります。
if ($p.confirmReload()) {
$p.transition('/items/123/index');
}$p.apply()
.menu・.tab-container・.button-icon・select[multiple] などのうち、まだ applied クラスが付いていない要素に jQuery UI(メニュー・タブ・ボタン・複数選択)を適用します(jqueryui.js#L4-L60)。サーバーからの応答を画面に反映したあとにも本体が呼んでいます(_dispatch.js#L22)。スクリプトで data-icon 付きのボタンを足したあとに呼ぶと、標準のボタンと同じ見た目になります(画面のアイコン)。
$p.focusMainForm()
「全般」タブ(#FieldSetGeneral)の中で、表示されている最初の入力項目にフォーカスを移します。検索付きのドロップダウンが最初に来るときは、検索ダイアログがすぐ開かないように「全般」タブの見出しにフォーカスします(focus.js)。
$p.copyDirectUrlToClipboard(url)
引数の url をクリップボードにコピーし、完了のメッセージ(表示文字列 DirectUrlCopied)を alert で出します(clipboard.js)。現在のレコードの URL を自分で取るわけではなく、パンくずリストのリンクコピーのボタンがサーバーで組み立てた URL を渡しています(HtmlBreadcrumb.cs#L378)。コピーには document.execCommand('copy') を使います。
$p.search(searchWord, redirect, offset)
全文検索(items/search?text=…)を行います。redirect が真なら検索結果の画面へ移動し、偽なら Ajax で結果を取得して URL の履歴を書き換えます。同じ語と offset で続けて呼んでも 2 回目は何もしません(item.js#L56-L69)。
$p.search('見積', true); // 検索結果の画面へ移動$p.editOnGrid($control, val)
一覧の編集モードを切り替えます。val が 1 で編集モードに入り、0 で抜けます。0 のときは先に $p.confirmReload() で確認します(grid.js#L31-L37)。$control の data-action などを使って $p.send するので、標準の「一覧で編集」ボタン(#EditOnGridCommand)を渡します。
$p.saveScroll() / $p.loadScroll() / $p.clearScroll()
ページのスクロール位置を $p.scrollX・$p.scrollY に保存し、window.scroll で戻します(scroll.js#L1-L13)。
$p.disableAutPostback
true にすると、自動ポストバック(control-auto-postback の項目の変更で送信する処理)と関連項目の連動を止めます(_controllevents.js#L60-L61、relatingcolumns.js#L50)。スクリプトで複数の項目にまとめて値を入れるときに、1 つごとに送信されるのを防げます。名前は AutoPostback ではなく AutPostback(o が無い)です。
$p.disableAutPostback = true;
$p.set($p.getControl('ClassA'), 'A');
$p.set($p.getControl('ClassB'), 'B');
$p.disableAutPostback = false;$p.validateImageUploadFileSize(blob)
1.5.8.1 のソースにある関数です。Hidden 要素 #ImageUploadFileSizeLimit(BinaryStorage.json の ImageUploadFileSizeLimit、MB)より大きいファイルなら TooLargeFile のエラーを出して false を返します。上限が無ければ true です(util.js#L39-L49)。Markdown エディタとリッチテキストエディタが画像をアップロードする前に呼んでいます。
使えそうに見えて使えないもの
| 関数 | 実際の動作 |
|---|---|
$p.showQr() | 二要素認証(TOTP)の設定画面で、#TotpQRCode の URL から QR コードを #qrCode に描くだけ。任意の文字列の QR コードは作れない(qr.js) |
$p.openEditorDialog(id) | 引数の id を使わず、空の #EditorDialog を開くだけ。中身は一覧の「モーダルで開く」の処理が別に読み込む(grid.js#L15-L29) |
$p.paging(selector) | 一覧などの無限スクロールで、末尾まで来たら次のページを読み込む内部処理。ダイアログが開いていると何もしない |
$p.outsideDialog($control) | ダイアログが開いていて、accesskey を持つ $control がそのダイアログの外にあれば true。$p.send などがショートカットキーの誤動作を防ぐために使う(ショートカットキー) |
$p.applicationPath() のような関数はありません。アプリケーションのパスは Hidden 要素 #ApplicationPath から取ります。