AEM サイト一覧画面に View as Published アイコンの追加

やりたいこと

AEMのページ編集画面では、 Page Infomation メニューの View as Published 「公開済みとして表示」項目があります。

f:id:www0532:20210819215956p:plain

クリックすると、ページは「wcmmode=disabled」との URL パラメーターが追加され、新しいタブで開かれます。

f:id:www0532:20210819220356p:plain

「wcmmode=disabled」を使用したページの表示は、 Javascriptなどのクライアントライブラリをロードされ、Author サーバーで公開済みのページの様子を確認できるため、デバッグ／開発に便利です。

これから、AEM サイト一覧画面をカスタマイズし、 View as Published アイコンを追加する方法を紹介します。

実装方法

AEMのCRXDE Lite画面を開きます。

/libs/wcm/core/content/sites/jcr:content/actions/selection

上記パスを入力し、「Overlay Node」ボタンを押下します。

f:id:www0532:20210820120825p:plain

ダイアログの入力値をそのままに、「OK」ボタンをクリックします。

f:id:www0532:20210820121111p:plain

それで、以下のノードがapps配下にコピーされます。

/apps/wcm/core/content/sites/jcr:content/actions/selection

f:id:www0532:20210820121354p:plain

右クリックし、メニューから「Create Node」をクリックします。

f:id:www0532:20210820121855p:plain

selectionの配下に、下記のノードを作成します。

+ view
  - sling:resourceType = "granite/ui/components/coral/foundation/collection/action"
  - jcr:primaryType = "nt:unstructured"
  - granite:rel = "cq-siteadmin-admin-actions-edit-activator"
  - action = "cq.wcm.open"
  - activeSelectionCount = "single"
  - icon = "browse"
  - target = ".cq-siteadmin-admin-childpages"
  - text = "View as Published"
  - variant = "actionBar"
    + data
        - jcr:primaryType = "nt:unstructured"
        - href.uritemplate.abs = "\{+item}.html?wcmmode=disabled"