Optimizely フォーム選択要素のカスタム フィード オプションの作成

Optimizely Forms は、登録、求人応募、アンケートなどに使用されるフォームを作成するための多目的ツールです。これらのフォームには、テキスト ボックス、選択リスト、日付ピッカー、範囲スライダーなど、さまざまな要素を含めることができます。選択要素に関しては、Optimizely には、フィードとも呼ばれる選択肢を手動で挿入できる組み込みの手動選択オプションが用意されています。

ただし、これらの選択肢を動的に入力したいシナリオもあります。各オプションを手動で入力するのではなく、ハードコードされたリストから、または API 経由で入力できます。このブログ投稿では、Optimizely Forms の選択要素にカスタム フィード オプションを作成し、特定のニーズに合わせて選択項目を動的に生成する方法について説明します。

まず、Optimizely Formsの選択要素にカスタムフィードオプションを作成するには、 アイフィード そして IUEntityInEditView インターフェース。このカスタム フィード クラスは、選択要素に表示される選択項目を動的に生成する役割を担います。

この実装では、 アイテムをロード メソッドはリスト項目の提供を担当します。簡単にするために、一連の企業を含む静的リストを使用します。ただし、これは API 呼び出しやニーズに合った他のデータ ソースに簡単に置き換えることができます。

ここでは、 識別子 フィードクラスのプロパティはフィードの一意の識別子として機能し、 説明 フィールドに設定したプロパティは、Optimizely Forms UI でこのフィードの表示名として表示されます。

カスタムフィードがOptimizely Formsに認識されるようにするには、フィードサービスタイプとして登録する必要があります。 サービス構成 クラス定義内の属性。

[ServiceConfiguration(ServiceType = typeof(IFeed))]
public class CompanyFeed : IFeed, IUIEntityInEditView
{
    // Unique identifier for the feed
    public string ID => "13b098f3-f960-4465-9cfd-77db88486921";

    // Display name for the feed
    public string Description { get; set; } = "Company List";

    // Extra configuration options (optional)
    public string ExtraConfiguration { get; }

    // Friendly title for the edit view
    public string EditViewFriendlyTitle => Description;

    // Indicates if the feed is available in the edit view
    public bool AvailableInEditView => true;

    // Method to load the feed items
    public IEnumerable LoadItems()
    {
        var feedItems = new List();

        // Populate the feed items using the static method GetCompanyList
        foreach (var company in GetCompanyList())
        {
            feedItems.Add(new FeedItem
            {
                Key = company.Item2,
                Value = company.Item1
            });
        }

        return feedItems;
    }

    // Static method to get the company list
    public static List> GetCompanyList()
    {
        return new List>
            {
                new("1", "Company A"),
                new("2", "Company B"),
                new("3", "Company C"),
            };
    }
}

次に、利用可能なフィードを管理および取得するためのフィードプロバイダーを作成します。 フォームフィードプロバイダー クラスは、 アイフィード インターフェース。これにより、Optimizely Forms は登録されたフィードを認識して利用できるようになります。

public class FormFeedProvider : IFeedProvider
{
    public IEnumerable GetFeeds() => ServiceLocator.Current.GetAllInstances();
}

カスタム フィード オプションの準備ができたので、Optimizely Forms 管理 UI で使用できます。次の手順に従います。

1. Optimizely 管理 UI に移動します。
2. 新しいフォームを作成するか、既存のフォームを編集します。
3. フォームに選択要素を追加します。
4. 選択要素の選択項目構成では、カスタム フィード オプションが利用可能であることがわかります。

これらの手順に従うと、カスタム フィードを使用して選択要素に選択項目を動的に入力できるようになります。

2024年8月12日