Optimizely CMS12 に管理者モード アドオンを追加する方法 |バルトシュ・セクラ

このテーマに関しては多くの投稿がありましたが、Optimizely によって作成され、すでに利用可能になっている定型文を使用しているものはありません。たとえば、ShellResources などをレンダリングしたり、ShellCoreLightTheme をレンダリングしたり、XSRF トークンを処理したり、Web コンポーネントを手動で登録したりする必要はありません。という共有ビューを使用すると、これらすべてがすでに利用可能になります。

CommonLayout.cshtml

これは CMS DLL にコンパイルされます。

前回の投稿で 便利な Optimizely CMS Web コンポーネント CMS12 に同梱されている Web コンポーネントの使用方法について説明しました。

今回は、新しいメニュー エントリが表示されるように MenuProvider を追加する方法、コントローラーを使用して新しい MVC ビューを追加する方法、および Optimizely CMS によって既に提供されているボイラープレートを再利用する方法の全体を説明します。

非常に単純な NewsArticle ジェネレーターの例を続けてみましょう。 UI は非常に基本的なもので、いくつかの入力とボタンがあるだけです。

新しいメニュー プロバイダーを追加して、Optimizely のナビゲーションが新しいメニュー エントリをレンダリングできるようにしましょう。

[MenuProvider]
public class NewGeneratorAdminMenuProvider : IMenuProvider
{
    public IEnumerable GetMenuItems()
    {
        var urlMenuItem1 = new UrlMenuItem("Generate content", MenuPaths.Global + "/cms/admin/newsGenerator",
            "/NewsGeneratorPlugin/Index")
        {
            IsAvailable = context => true,
            SortIndex = 100,
        };

        return new List(1)
        {
            urlMenuItem1
        };
    }
}

その後、新しいメニューエントリが表示されます。

空のビューを追加しましょう 
Views/NewsGeneratorPlugin
  Index.cshtml という名前を付けます。
@using EPiServer.Shell.Navigation

@{
    Layout = "/CmsUIViews/Views/Shared/CommonLayout.cshtml";
}

@section header {
    html,
    body {
        height: 100%;
    }

}

@section mainContent
{
    

        
class="container">
            add-on
        
    
}

ご覧のとおり、HTML、head、body タグ、およびナビゲーションをレンダリングする Optimizely の共有ビューを再利用しています。また、基本的なスタイルシートをレンダリングし、以前のブログ投稿で説明した Web コンポーネントを登録します。
サイトを再構築すると、次のようになります。





ご覧のとおり、コンテンツ全体を次の div にラップする必要があります。


so that it's positioned correctly.
Now we can use the web components, please find the full source of the simple content generator:
@using EPiServer.Shell.Navigation

@{
    Layout = "/CmsUIViews/Views/Shared/CommonLayout.cshtml";
}

@section header {
            html,
        body {
            height: 100%;
        }

        body {
            background-color: #fff;
        }

        .container {
            padding: 16px;
            border-top: 1px solid #D6D6D6;
            margin-left: 0;
            margin-right: 0;
            width: 600px !important;
        }

        .container h1 {
            margin-bottom: 32px;
        }

        .formField {
            display: flex;
            justify-content: space-between;
            margin-bottom: 20px;
        }

    
}

@section mainContent
{
    

        
class="container">
            
            

                
"result">
                
class="formField">
                    "caption" text="Root id">
                    "content-tree">
                
                
class="formField">
                    "caption" text="Count">
                    "count-input" value="10">
                
                
class="formField">
                    "caption" text="Truncate parent">
                    "truncate-checkbox">
                
                
class="formField">
                    "caption" text="Generate images">
                    "truncate-generate-images">
                
                
class="formField">
                    "caption" text="Also create notification">
                    "truncate-create-notification">
                
                "generate" buttonStyle="highlight" text="Generate">
            
        
    
    >
        const data = {
            count: 10
        };

        document.getElementById("content-tree").addEventListener("onNodeSelected", (event) => {
            data.root = event.detail.contentLink;
        });

        document.getElementById("count-input").addEventListener("onChange", (event) => {
            data.count = event.detail;
        });

        document.getElementById("truncate-checkbox").addEventListener("onChange", (event) => {
            data.truncateParent = event.detail;
        });

        document.getElementById("truncate-generate-images").addEventListener("onChange", (event) => {
            data.generateImages = event.detail;
        });

        document.getElementById("truncate-create-notification").addEventListener("onChange", (event) => {
            data.createNotification = event.detail;
        });

        document.getElementById("generate").addEventListener("onClick", () => {
            var result = document.getElementById("result");
            result.innerHTML = "Command in progress...";

            var formData = new FormData();
            Object.keys(data).forEach(key => {
                formData.append(key, data[key]);
            });

            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    result.innerHTML = xhr.responseText;
                }
            }
            xhr.open("post", "/NewsGeneratorPlugin/Generate");
            xhr.setRequestHeader("Accept", "application/json");
            xhr.send(formData);
        });
    
}

これは非常にシンプルですが、見栄えが良くなくても十分な管理ツールや、今回の場合は QA 中に使用できるコンテンツ ジェネレーターなどの一部の開発者専用ツールに最適です。
すでにアドオンをお持ちで、CommonLayout.cshtml に切り替えずに Web コンポーネントだけを使用したい場合は、次のように明示的に登録する必要があります。
@Html.Raw(Html.RegisterOptimizelyWebComponents())