2016-06-13追記:
ツールチップを追加しました。
フォームの親要素の取得に使用している関数を、parents()をclosest()に変更しました。

2016-07-03追記:
「css」メソッドの改行を詰めていないのは、詰めると「{}(波カッコ)」がa-blog cmsの変数として評価されてしまうのを防ぐためです。通常は波カッコの前に都度「\(半角バックスラッシュ)」を入れるとエスケープされますが、ここではできないようです。



a-blog cmsのエントリー作成時に、先頭に表示される基本の入力項目は、以下のテンプレートを参照しています。

/themes/system/admin/entry/edit.html

基本項目をカスタマイズしたい場合、「/admin/entry/edit.html」を製作中のテーマに複製すればよいのですが、このテンプレートは影響範囲が広く、今後のバージョンアップなどを考えると、ちょっとした変更での複製は避けたいところです。

jQueryで動的にフォームを書き換える方法をご紹介します。

基本形

作成中のテーマに、以下のファイルを作成します。すでにfield_foot.htmlを作成している場合は、そのファイルをテキストエディタで開いてください。
head要素ではなく、field_foot.htmlに記述する理由は、のちほど補足します。

/admin/entry/field_foot.html

ファイルの先頭に以下のコードを記述してください。
スクリプトの先頭で、フォームとカテゴリー情報を前もって取得しています。a-blog cmsは、ページの表示が完了してから処理したい場合、「$(function()」ではなく「ACMS.Ready(function()」となることに注意してください。

<script>
ACMS.Ready(function() {
	var f = $('form#entryForm');
	var current_rccd = '%{RCCD}';
	var current_ccd = '%{CCD}';
	var current_cname = '%{CATEGORY_NAME}';
	var current_eid = '%{EID}';

// ここにスクリプトを書きます

});
</script>

投稿時の初期ステータスを「公開」にする


a-blog cmsは管理画面から「新規エントリー作成時のステータス」を設定できないため、必ず「下書き」が選択されます。これを「公開」に変更します。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。


// デフォルトのステータスを「公開」にする
$('select[name="status"]', f).val('open');

タグ欄を非表示にする

タグ欄を非表示にします。CSSの「nth-child」でもできそうに思えますが、バージョンアップ後も変更される可能性が少ない「name属性の値」から直上のtr要素を解析した方が確実です。
もしもフォームがtable要素ではなくなったとしても、parentsの引数を変更するだけで修正できます。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。

// タグ欄を非表示にする
$('input[name="tag"]', f).closest('tr')
	.css({
		display: 'none'
	});

カテゴリーを変更不可にする


通常はプルダウンとなっているカテゴリーを、変更できないようにします。カテゴリーによって入力項目を変更することがあるa-blog cmsでは、かなり便利なカスタマイズです。


td要素の内容を、「display:none」を指定したdiv要素でラップしてから、現在のカテゴリー名を赤文字で表示します。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。


// カテゴリーを変更不可にする
if(current_cname == '') {
	current_label = "指定なし";
} else {
	current_label = current_cname;
}
$('select[name="category_id"]', f).closest('td')
	.wrapInner('<div style="display: none;"></div>')
	.append('<span class="acms-admin-text-danger">' + current_label + '</span>');

特定カテゴリーのときだけタイトル欄を変える


タイトル欄を、異なる目的で利用することがあります。例えば「スタッフ紹介」などのコンテンツでは、「氏名」として扱うことが多いです。
その場合はやはり、ラベルを変更したり、氏名の書き方を統一するよう促したいものです。

入力項目の「直上のtd要素」の「兄弟のth要素」を解析できれば、ラベルを変更できます。


「// ここにスクリプトを書きます」を以下のコードに書き換えてください。
カテゴリーのコード名が「staff」のときだけ見出しが「氏名」となり、入力欄が短くなり、プレースホルダーが表示されます。


// 特定カテゴリーのときだけタイトル欄を変える
if(current_ccd == 'staff') {
	$('input[name="title"]', f)
		.css({
			maxWidth: '10em'
		})
		.attr('placeholder', '山田 太郎')
		.closest('td')
		.siblings('th')
			.text('氏名');
}

ツールチップを追加する

投稿画面にも、管理メニューと同様にツールチップを追加することができます。詳細設定の「インデキシング」は名前だけでは機能がわかりにくいので、説明文を付与してみます。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。

// インデキシングの後に説明文を追加する
$('input[name="indexing"]', f).closest('tr').find('th').append('<i class="acms-admin-icon-tooltip js-acms-tooltip acms-admin-margin-left-mini" data-acms-tooltip="チェックを外すと、このエントリーは一覧ページに表示されない「隠しページ」となります。"></i>');

「acms-admin-margin-left-mini」は管理画面用フレームワークの隠しクラスです。左が5px空きます。また、ツールチップは、JavaScriptで追加した要素でも自動的に生成されます。

新規作成時のタイトルを自動入力する



エントリータイトルの入力は必須となっていますが、作成するコンテンツによっては、タイトルが重要でないことがあります。その場合に、カテゴリーと投稿日時をもとに、タイトルを自動で入力します。

エントリーの新規作成時は「エントリーIDが未定=%{EID}が空」となっていることを利用しています。テスト投稿の時だけ有効にすると、いちいち「あああ」などと書かなくていいので楽です。

「// ここにスクリプトを書きます」を以下のコードに書き換えてください。

// 新規作成時のタイトルを自動入力する
if(current_cname == '') {
	current_label = '';
} else {
	current_label = current_cname + ':';
}
if(current_eid == ''){
	var now = new Date();
	var timestamp = '';
	timestamp =
		now.getFullYear()
		+ '-' + ('0' + (now.getMonth() + 1)).slice(-2)
		+ '-' + ('0' + now.getDate()).slice(-2)
		+ ' ' + ('0' + now.getHours()).slice(-2)
		+ ':' + ('0' + now.getMinutes()).slice(-2)
		+ ':' + ('0' + now.getSeconds()).slice(-2);

	$('input[name="title"]', f).val(current_label + timestamp);
}

補足

なぜfield_foot.htmlにスクリプトを書くのか

a-blog cmsでは、カスタムフィールドを追加する場合は、必ず「field.html」か「field_foot.html」を編集します。
「field.html」は基本設定の直後、「field_foot.html」はユニット編集の終了後に呼び出されます。

どちらに書いても動作には問題ありませんが、「field_foot.html」は入力項目のHTMLよりも後に呼び出され、かつ、a-blog cmsの初期テーマでは使用されていないため、このようなスクリプトの追加に向いています。

head要素のテンプレートに書くと、編集画面のときだけ有効にする条件分岐が必要となります。また、入力項目のテンプレートから離れているので、どこをカスタマイズして表示を変更したのか、あとでわかりにくくなってしまいます。
このため当記事では、処理的な正しさより可読性を優先しています。

どうしても気になる場合は、どのテンプレートを編集する必要があるかを、コメントとして残しておくようにしましょう。

<!-- BEGIN_MODULE sample:veil -->
=============================================
jQueryによるフォーム項目修正
/include/head/js.html を参照
=============================================
<!-- END_MODULE sample:veil -->

<!-- BEGIN adminEntryEdit -->
<div class="acms-box-medium">
	<!--#include file="/admin/entry/edit.html"-->
	<!--#include file="/admin/entry/add.html"-->
</div>
<!-- END adminEntryEdit -->