Optimizely cms 12 contentarea〜adnanのコードネクサスで未発表のブロックステータスを表示する

この投稿では、私たちがこれをどのように解決したかを説明します CMS UIのコンテンツアイテムの装飾 したがって、編集者は、ページを離れることなく、各ブロック（ドラフト、スケジュール、承認待ちなど）のステータスを即座に確認できます。

問題

• Contentarea内のドラフトブロックは、公開されるまでページプレビューには表示されません。
• 編集者には兆候がありません すべてのプロパティが表示されます ブロックには未発表の変更があります。
• ステータス情報（ドラフト、承認待ち、拒否など）はCMSに保存されますが、編集者UIには表面化されていません。

解決策の概要

拡張しました 満足しているエディター カスタムDojoウィジェットと小さなAPIコントローラーを使用してください。

1. APIコントローラー （/api/blockstatus））

   • 最新情報を返します VersionStatus ブロック用。
   • 生の列挙値をマップします フレンドリーなラベル （例えば CheckedOut →「ドラフト（進行中）」）。
   • また戻ります 最後の節約日 そして 変更されました ホバーツールチップのユーザー。

2. 道場ウィジェット （poc/editors/ContentAreaWithStatus））

   • デフォルトをオーバーライドします ContentAreaEditor。
   • Batch APIを呼び出して、Contentareaのすべてのブロックのステータスを取得します。
   • 小さいものを追加します バッジ フレンドリーなラベルを備えた各ブロックアイテムの隣。
   • オプションでは、視認性のために柔らかい背景色で行全体を色付けします。
   • ホバーにツールチップを表示します。 「ドラフト（進行中）・2025年9月1日にジェーン・ドーが最後に編集した」。

3. 編集者

   • すべての人にグローバルに適用されます ContentArea プロパティ、いいえ [UIHint] 必須。
   • 編集者は、Contentareaが使用されている場所で常にステータスインジケータを表示することを保証します。

4. CSS（カラーバリアント）

     
   	  /* Base marker when a non-published status is present */
         .poc-unpublished-block {
             position: relative;
         }
   
         /* Badge base */
         .poc-indicator {
             margin-left: 6px;
             font-size: 11px;
             color: #fff;
             padding: 2px 6px;
             border-radius: 3px;
             font-weight: 500;
         }
         
         /* Badge colors */
         .poc-badge--yellow {background: #ffc107; color: #000;}
         /* Drafts */
         .poc-badge--orange {background: #fd7e14;}
         /* Awaiting approval */
         .poc-badge--red {background: #dc3545;} /* Rejected */
         .poc-badge--blue {background: #0d6efd;} /* Scheduled */
         .poc-badge--gray {background: #6c757d;} /* Archived/Not created */
   
         /* Optional row tint (used when TINT_ROW = true) */
         .poc-row--yellow {background: #fff8db;} /* soft yellow */
         .poc-row--orange {background: #fff0e0;} /* soft orange */
         .poc-row--red {background: #ffe6e9;} /* soft red */
         .poc-row--blue {background: #eaf2ff;} /* soft blue */
         .poc-row--gray {background: #f2f3f5;} /* soft gray */
   	

ステータスマッピング

Optimizelyをマッピングしました VersionStatus ユーザーフレンドリーなラベルと色への列挙：

• ドラフト（進行中） →黄色のバッジ
• ドラフト（パブリッシュを待っています） →黄色のバッジ
• 承認を待っています →オレンジバッジ
• 拒否された →赤いバッジ
• スケジュール →青いバッジ
• アーカイブ /作成されていない →灰色のバッジ
• 公開 →バッジなし（「クリーン」として扱われます）

このカラーコーディングにより、どのブロックが注意が必要かがすぐに明らかになります。

利点

• 編集者は一目で見られます どのブロックがドラフト、スケジュールされ、承認を待っています。
• 隠された驚きはありません プレビューでは、すべてのプロパティでステータスが直接表示されます。
• より良いワークフローの可視性：ツールチップは、誰が最後にブロックを編集したかを示します。
• パフォーマンスに優しい：シングルを使用します バッチAPI呼び出し コンテンツごと。
• グローバル：すべてのContentareasに自動的に適用されます。

結論

Contentareaエディターを小さなDojoウィジェットと軽量APIで拡張することにより、未発表のブロックステータスを作成しました 目に見える、色分けされた、編集者に優しい。この単純な改善により、混乱が減り、時間を節約し、編集者が公開する前により自信を与えます。