bit part Products
MTAppjQuery P7

MTAppShowListEntries

テキスト欄を PowerCMS/MT のアセット選択ダイアログで扱えるフィールドにし、選択アセットの情報（id/ファイル名/URL/サムネ）を JSON 保存する jQuery プラグイン。P7 最適化版。

フィールドに保存されている記事／ウェブページの ID を Data API で取得し、タイトルの一覧としてフィールドの上に表示する jQuery プラグインです。MTAppListing を適用したフィールド（ID をカンマ区切りで保存するフィールド）と併用します。保存された ID そのものは変更せず、人間が読める形（タイトル）で見せるための表示用メソッドです。

MTAppListing の selectedView オプション（本体機能）でも同等の表示ができます。新規に作る場合は selectedView の利用を推奨します（Data API 非依存・独自 JSON でも動作）。本メソッドは既存資産との互換のために提供しています。

構文

$(selector).MTAppShowListEntries(options);
$(selector).trigger('showListEntries'); // 描画するにはこのイベントを発火する

$.fn プラグイン（$(selector).MTAppShowListEntries(...)）です。対象要素（this）を返すのでチェーンできます。適用しただけでは描画されず、showListEntries イベントを trigger したときに一覧を生成します。

パラメータ

options {Object} — 以下のプロパティを持ちます。

プロパティ型既定値説明
apiObjectnull必須。Data API オブジェクト（MT.DataAPI のインスタンス）。null なら何もしません
siteIdnumber0必須。対象サイト（ブログ）ID。0 なら何もしません
modelstringentry取得対象。entry（記事）／ page（ウェブページ）
paramsObjectnulllistEntries / listPages に渡す追加パラメータ（includeIds / limit / fields は自動設定）
canEditAllPostsbooleantruetrue で各タイトルに編集画面へのリンクを付与
debugbooleanfalse対象フィールドは既定で非表示。true で表示したまま動作

戻り値

{jQuery} — 対象要素（チェーン可能）。

使用例

// MTAppListing を適用したフィールドに、保存済み記事のタイトル一覧を表示する
const api = new MT.DataAPI({ baseUrl: '/cms/mt/mt-data-api.cgi', clientId: 'MyClient' });
$('#customfield_related')
    .MTAppShowListEntries({ api: api, siteId: 1, model: 'entry', canEditAllPosts: true })
    .trigger('showListEntries');

「DataAPI SDK を利用」が有効な場合は、プラグインが現在ログイン中のユーザーで認証済みにする mtappVars.DataAPI をそのまま api に渡せます（再ログイン不要）。

user.js での記述例

user.js（「デザイン → user.js を編集」）に書く場合は、mtappVars.screen_id で画面を判定して呼び出します。

(function ($) {
    if (typeof mtappVars !== 'object') return;
    if (mtappVars.screen_id === 'edit-entry') {
        $('#customfield_related')
            .MTAppShowListEntries({ api: api, siteId: 1, model: 'entry', canEditAllPosts: true })
            .trigger('showListEntries');
    }
})(jQuery);

生成される HTML

フィールドの直前にタイトル一覧（<ul>）を挿入します。対象フィールドは既定で非表示です。

<div class="mtapplisting-item-list">
    <div class="mtapplisting-item-list-content">
        <ul>
            <li>
                <span class="title"><a href="…編集画面…" target="_blank">タイトル</a></span>
                <span class="view-link"><a href="…パーマリンク…" target="_blank"><img alt="記事を見る" src="…"></a></span>
            </li>
        </ul>
    </div>
    <img class="mtapplisting-item-list-loading" src="…" alt="" style="display:none;">
</div>
<input type="text" id="customfield_related" style="display:none">

補足

  • 描画には showListEntries イベントの trigger が必要です。フィールドの値（MTAppListing が保存した ID）が変わった後に再度 trigger すると一覧を更新できます。
  • 取得は Data API の listEntries / listPages を includeIds で行い、保存されている ID の順序どおりに並べます。API に存在しない ID（削除済みなど）はスキップします。
  • タイトルやパーマリンクはテキスト／属性として安全に設定するため、タイトルにタグ文字列が含まれても HTML として解釈されません（HTML インジェクションを起こしません）。
  • canEditAllPosts: false のときは編集画面へのリンクを付けず、タイトルはテキストのみになります（閲覧リンクは付きます）。
  • 保存されている ID の値そのものは変更しません（表示専用）。

関連

  • MTAppListing — ダイアログで項目を選んで ID を保存する。本メソッドと対で使う（selectedView オプションで同等の表示が本体機能として可能）。
  • MTAppAssetFields — アセット（画像・ファイル）を選択ダイアログで選ぶ。