編集可能な固定コンポーネント

編集可能なReactコンポーネントは、「固定」することも、SPAビューにハードコードすることもできます。 これにより、開発者は、SPAエディター互換のコンポーネントをSPAビューに配置し、ユーザーはAEM SPA Editorでコンポーネントのコンテンツを作成できます。

固定コンポーネント

この章では、Home.js内のハードコードされたテキストである、ホームビューのタイトル「Current Adventures」を、固定で編集可能なタイトルコンポーネントに置き換えます。 固定コンポーネントは、タイトルの配置を保証しますが、タイトルのテキストをオーサリングし、開発サイクル外で変更することもできます。

WKNDアプリの更新

固定コンポーネントをホームビューに追加するには:

  • AEM Reactコアコンポーネントのタイトルコンポーネントを読み込み、プロジェクトのタイトルのリソースタイプに登録します。
  • 編集可能なタイトルコンポーネントをSPAホームビューに配置する

AEM Reactコアコンポーネントのタイトルコンポーネントでの読み込み

SPA Homeビューで、ハードコードされたテキスト<h2>Current Adventures</h2>をAEM React Core Componentsのタイトルコンポーネントに置き換えます。 タイトルコンポーネントを使用する前に、次の作業を行う必要があります。

  1. @adobe/aem-core-components-react-baseからタイトルコンポーネントをインポートします。
  2. withMappableを使用して登録し、開発者がSPAに配置できるようにします。
  3. また、MapToに登録して、後でコンテナコンポーネントで使用できるようにします。

次の手順を実行します。

  1. IDEの~/Code/wknd-app/aem-guides-wknd-graphql/react-appにあるリモートSPAプロジェクトを開きます。

  2. react-app/src/components/aem/AEMTitle.jsにReactコンポーネントを作成する

  3. AEMTitle.jsに次のコードを追加します。

    // Import the withMappable API provided by the AEM SPA Editor JS SDK
    import { withMappable, MapTo } from '@adobe/aem-react-editable-components';
    
    // Import the AEM React Core Components' Title component implementation and it's Empty Function 
    import { TitleV2, TitleV2IsEmptyFn } from "@adobe/aem-core-components-react-base";
    
    // The sling:resourceType for which this Core Component is registered with in AEM
    const RESOURCE_TYPE = "wknd-app/components/title";
    
    // Create an EditConfig to allow the AEM SPA Editor to properly render the component in the Editor's context
    const EditConfig = {    
        emptyLabel: "Title",  // The component placeholder in AEM SPA Editor
        isEmpty: TitleV2IsEmptyFn, // The function to determine if this component has been authored
        resourceType: RESOURCE_TYPE // The sling:resourceType this component is mapped to
    };
    
    // MapTo allows the AEM SPA Editor JS SDK to dynamically render components added to SPA Editor Containers
    MapTo(RESOURCE_TYPE)(TitleV2, EditConfig);
    
    // withMappable allows the component to be hardcoded into the SPA; <AEMTitle .../>
    const AEMTitle = withMappable(TitleV2, EditConfig);
    
    export default AEMTitle;
    

実装の詳細については、コードのコメントを参照してください。

AEMTitle.jsファイルは次のようになります。

AEMTitle.js

React AEMTitleコンポーネントの使用

AEM Reactコアコンポーネントのタイトルコンポーネントがに登録され、Reactアプリ内で使用できるようになったので、ホームビューのハードコードされたタイトルテキストを置き換えます。

  1. 編集 react-app/src/App.js

  2. 下部のHome()で、ハードコードされたタイトルを新しいAEMTitleコンポーネントに置き換えます。

    <h2>Current Adventures</h2>
    

    以下に置き換えます。

    <AEMTitle
        pagePath='/content/wknd-app/us/en/home' 
        itemPath='root/title'/>
    

    Apps.jsを次のコードで更新します。

    ...
    import { AEMTitle } from './components/aem/AEMTitle';
    ...
    function Home() {
        return (
            <div className="Home">
    
                <AEMTitle
                    pagePath='/content/wknd-app/us/en/home' 
                    itemPath='root/title'/>
    
                <Adventures />
            </div>
        );
    }
    

Apps.jsファイルは次のようになります。

App.js

AEMでのタイトルコンポーネントのオーサリング

  1. AEMオーサーにログインします。

  2. サイト/WKNDアプリ​に移動します。

  3. ホーム」をタップし、上部のアクションバーから「編集」を選択します

  4. ページエディターの右上にある編集モードセレクターで「編集」を選択します。

  5. WKNDロゴの下のデフォルトのタイトルテキストの上、およびアドベンチャーリストの上にマウスポインターを置き、青い編集の概要が表示されるまで表示されます

  6. をタップしてコンポーネントのアクションバーを表示し、レンチ​をタップして編集します。

    タイトルコンポーネントのアクションバー

  7. タイトルコンポーネントのオーサリング:

    • タイトル:WKND冒険

    • 種類/サイズ:H2

      タイトルコンポーネントダイアログ

  8. 完了​をタップして保存します。

  9. AEM SPA Editorでの変更のプレビュー

  10. http://localhost:3000上でローカルで実行されているWKNDアプリを更新し、作成したタイトルの変更がすぐに反映されることを確認します。

    SPAのタイトルコンポーネント

おめでとうございます。

WKNDアプリに編集可能な固定コンポーネントが追加されました。 次の方法がわかりました。

  • SPAでのAEM Reactコアコンポーネントの読み込みと再利用
  • 固定で編集可能なコンポーネントをSPAに追加する
  • AEMでの固定コンポーネントのオーサリング
  • 作成したコンテンツをリモートSPAで参照する

次の手順

次の手順は、作成者がSPAにコンポーネントを追加し、編集可能なコンポーネントをSPAに追加できるように、AEM ResponsiveGridコンテナコンポーネント🔗を追加することです。

このページ