Blog posts by Hieu Nguyen Trung2017-02-23T05:54:21.7900000Z/blogs/hieu-nguyen-trung/Optimizely WorldCreate data feeds for EPiServer Forms/blogs/hieu-nguyen-trung/dates/2017/2/create-data-feeds-for-episerver-forms/2017-02-23T05:54:21.7900000Z<p>When working with <strong>EPiServer.Forms</strong>, you may wonder how to bind custom dynamic data source to Selection element instead of manually input items one by one.</p>
<p><img src="/link/11358e1437724295b7510f65b55f1e37.aspx" alt="Image chrome_2017-02-23_11-26-28.png" /></p>
<p>You could first do some search and found a great blog here <a href="https://www.epinova.no/en/blog/custom-data-feeds-in-episerver.forms/">https://www.epinova.no/en/blog/custom-data-feeds-in-episerver.forms/</a> , but it's been quite out of date since EPiServer.Forms had many updates since then, for example the IExternalSystemFieldMapping interface is no longer existed.</p>
<p>So, I write this blog for any one who comes with the same idea in mind and wants to know how EPiServer.Forms can be extended and works in various scenarios.</p>
<h2></h2>
<h2>1. Create new data feed class</h2>
<p>Create new class and implement <strong>EPiServer.Forms.Core.Feed.Internal.IFeed</strong> and <strong>EPiServer.Forms.Core.IUIEntityInEditView</strong>.</p>
<p>The <strong>IFeed</strong> interface has <strong>LoadItems</strong> method that you can write your own code to get data for selection block.</p>
<p>But to enable displaying the feed on <strong>EditView</strong>, you need to implement <span><strong>IUIEntityInEditView</strong> as well.</span></p>
<pre class="language-csharp"><code> [ServiceConfiguration(ServiceType = typeof(IFeed))]
public class CustomFeed : IFeed, IUIEntityInEditView
{
public IEnumerable<IFeedItem> LoadItems()
{
var feedItems = new List<IFeedItem>();
feedItems.Add(new FeedItem { Key = "Custom data 1", Value = "1" });
feedItems.Add(new FeedItem { Key = "Custom data 2", Value = "2" });
feedItems.Add(new FeedItem { Key = "Custom data 3", Value = "3" });
return feedItems;
}
public string ID
{
get { return "EDA3BFDF-3EB3-4932-A484-C244FAC55851"; }
}
public string Description
{
get { return "Custom data source"; }
set { }
}
public string ExtraConfiguration { get; }
public string EditViewFriendlyTitle
{
get { return Description; }
}
public bool AvailableInEditView
{
get { return true; }
}
}</code></pre>
<h2></h2>
<h2>2. Have a feed provider</h2>
<p>To know which feed will be displayed, the <strong>IFeedProvider</strong> must be implemented.</p>
<pre class="language-csharp"><code> public class FeedProvider : IFeedProvider
{
public IEnumerable<IFeed> GetFeeds()
{
return ServiceLocator.Current.GetAllInstances<IFeed>();
}
}</code></pre>
<h2></h2>
<h2>3. Build your project and check in EditView</h2>
<p><img src="/link/f9e41809f93b49b2b6aa04d10c14769f.aspx" alt="Image chrome_2017-02-23_11-46-27.png" /></p>
<p><img src="/link/6468acbf2e0f4f038d8b4349712b0a90.aspx" alt="Image chrome_2017-02-23_11-47-48.png" /></p>
<p>Current <strong>EPiServer.Forms</strong> used in this blog is <strong>v4.4.1</strong></p>