Blog posts by Le Giang2018-04-05T17:40:03.0000000Zhttps://world.optimizely.com/blogs/le-giang/Optimizely WorldUpload media in the Select content dialog for TinyMCE 2.0.0<p>Hi there!</p>
<p>In the previous <a href="/link/cff3877f76f645e28fef4d727ee08954.aspx">post</a><a href="/blogs/le-giang/dates/2018/3/upload-option-in-the-select-content-dialog/),">,</a> I have implemented upload media function for Selection content dialog but it just works with CMS 10.x. I have updated the add-on to work with CMS 11 and TinyMCE 2.0.0.</p>
<p>I also make the <span>uploaded media selected automatically. You can find and download the nuget package by adding the nuget source: https://www.myget.org/F/episerver-util/api/v3/index.json.</span></p>
<p><em>Note</em>: After installing, you may face with the run time error "module not found", please kindly refer to this <a href="/link/37191124e57d46ca84c979429e37fac0.aspx">post</a> to fix it. Good luck!</p>
<p><span><video width="100%" height="auto" src="/link/6180de8d52ed455fa8160a9923e63c42.aspx" autoplay="autoplay" preload="none" controls="controls"><object width="0" height="240" data="https://world.episerver.com/epiui/EPiServer.Cms.TinyMce/1.0.0/ClientResources/tinymce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash"><param name="src" value="https://world.episerver.com/epiui/EPiServer.Cms.TinyMce/1.0.0/ClientResources/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/globalassets/tinycme_withupload.mp4&poster=/epiui/CMS/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /></object></video></span></p>2018-04-05T17:40:03.0000000ZBlog postImplement search provider for pages, blocks and media<p>Currently when I type to search in navigationtree, surprisingly there is no result returned even for pages, block or media. It seems that someone forgot to implement searching feature or it is being underplayed <img alt="smile" src="/Scripts/tinymce/plugins/emoticons/img/smiley-smile.gif" />.</p>
<p>In this post, I would like show you how to implement a search provider for pages, blocks and media and you can customize to fit your need.</p>
<p>For pages:</p>
<pre class="language-csharp"><code>[SearchProvider]
public class DefaultPageSearchProvider : ContentSearchProviderBase<IContent, ContentType>
{
public DefaultPageSearchProvider(LocalizationService localizationService, ISiteDefinitionResolver siteDefinitionResolver, IContentTypeRepository<ContentType> contentTypeRepository, EditUrlResolver editUrlResolver, ServiceAccessor<SiteDefinition> currentSiteDefinition, LanguageResolver languageResolver, UrlResolver urlResolver, TemplateResolver templateResolver, UIDescriptorRegistry uiDescriptorRegistry) : base(localizationService, siteDefinitionResolver, contentTypeRepository, editUrlResolver, currentSiteDefinition, languageResolver, urlResolver, templateResolver, uiDescriptorRegistry)
{
}
/// <summary>
///
/// </summary>
public override string Area
{
get
{
return "cms/pages";
}
}
/// <summary>
///
/// </summary>
public override string Category
{
get
{
return "pages";
}
}
protected override string IconCssClass
{
get
{
return "epi-iconObjectPage";
}
}
public override IEnumerable<SearchResult> Search(Query query)
{
var contentRepository = ServiceLocator.Current.GetInstance<IContentRepository>();
var pageQueryService = ServiceLocator.Current.GetInstance<IPageCriteriaQueryable>();
PropertyCriteriaCollection crits = new PropertyCriteriaCollection();
PropertyCriteria nameCriteria = new PropertyCriteria();
nameCriteria.Name = MetaDataProperties.PageName;
nameCriteria.Value = query.SearchQuery;
nameCriteria.Type = PropertyDataType.String;
nameCriteria.Required = true;
nameCriteria.Condition = CompareCondition.Contained;
crits.Add(nameCriteria);
//Add criteria so search is performed against all providers
crits.Add(new PropertyCriteria
{
Name = "EPI:MultipleSearch",
Value = "*"
});
PageDataCollection pages = null;
try
{
pages = pageQueryService.FindAllPagesWithCriteria(ContentReference.RootPage, crits, null, LanguageSelector.MasterLanguage());
}
catch (NotImplementedException)
{
// If the provider hasn't implemented FindAllPagesWithCriteria, call old FindPagesWithCriteria instead.
pages = pageQueryService.FindPagesWithCriteria(ContentReference.RootPage, crits, null, LanguageSelector.MasterLanguage());
}
return pages.Select(CreateSearchResult);
}
}</code></pre>
<p><strong>For blocks</strong></p>
<pre class="language-csharp"><code> [SearchProvider]
public class DefaultBlockSearchProvider : ContentSearchProviderBase<IContent, ContentType>
{
public DefaultBlockSearchProvider(LocalizationService localizationService, ISiteDefinitionResolver siteDefinitionResolver, IContentTypeRepository<ContentType> contentTypeRepository, EditUrlResolver editUrlResolver, ServiceAccessor<SiteDefinition> currentSiteDefinition, LanguageResolver languageResolver, UrlResolver urlResolver, TemplateResolver templateResolver, UIDescriptorRegistry uiDescriptorRegistry) : base(localizationService, siteDefinitionResolver, contentTypeRepository, editUrlResolver, currentSiteDefinition, languageResolver, urlResolver, templateResolver, uiDescriptorRegistry)
{
}
/// <summary>
///
/// </summary>
public override string Area
{
get
{
return "cms/blocks";
}
}
/// <summary>
///
/// </summary>
public override string Category
{
get
{
return "blocks";
}
}
protected override string IconCssClass
{
get
{
return "epi-objectIcon";
}
}
public override IEnumerable<SearchResult> Search(Query query)
{
ContentReference root = null;
if (query.SearchRoots != null && query.SearchRoots.Count() > 0)
{
root = new ContentReference(query.SearchRoots.First());
}
else
{
root = new ContentReference();
}
var contentRepository = ServiceLocator.Current.GetInstance<IContentRepository>();
var contentTypeRepository = ServiceLocator.Current.GetInstance<IContentTypeRepository>();
var contentProviderManager = ServiceLocator.Current.GetInstance<IContentProviderManager>();
var blockTypes = contentTypeRepository.List().Where(x => typeof(BlockData).IsAssignableFrom(x.ModelType));
var provider = contentProviderManager.GetProvider(root);
if (provider != null && provider.HasCapability(ContentProviderCapabilities.Search))
{
List<IContent> blocks = new List<IContent>();
foreach(var blockType in blockTypes)
{
blocks.AddRange(provider.ListContentOfContentType(blockType).Where(x => x.Name.IndexOf(query.SearchQuery, StringComparison.InvariantCultureIgnoreCase) >= 0).Select(x => contentRepository.Get<IContent>(x.ContentLink)));
}
return blocks.Select(CreateSearchResult);
}
return Enumerable.Empty<SearchResult>();
}
}</code></pre>
<p>For media:</p>
<pre class="language-csharp"><code>[SearchProvider]
public class DefaultMediaSearchProvider : ContentSearchProviderBase<IContent, ContentType>
{
public DefaultMediaSearchProvider(LocalizationService localizationService,
ISiteDefinitionResolver siteDefinitionResolver,
IContentTypeRepository<ContentType> contentTypeRepository,
EditUrlResolver editUrlResolver,
ServiceAccessor<SiteDefinition> currentSiteDefinition,
LanguageResolver languageResolver,
UrlResolver urlResolver,
TemplateResolver templateResolver,
UIDescriptorRegistry uiDescriptorRegistry) : base(localizationService,
siteDefinitionResolver,
contentTypeRepository,
editUrlResolver,
currentSiteDefinition,
languageResolver,
urlResolver,
templateResolver,
uiDescriptorRegistry)
{
}
/// <summary>
///
/// </summary>
public override string Area
{
get
{
return "CMS/files";
}
}
/// <summary>
///
/// </summary>
public override string Category
{
get
{
return "media";
}
}
protected override string IconCssClass
{
get
{
return "";
}
}
public override IEnumerable<SearchResult> Search(Query query)
{
ContentReference root = null;
if (query.SearchRoots != null && query.SearchRoots.Count() > 0)
{
root = new ContentReference(query.SearchRoots.First());
}
else
{
root = new ContentReference();
}
var contentRepository = ServiceLocator.Current.GetInstance<IContentRepository>();
var contentTypeRepository = ServiceLocator.Current.GetInstance<IContentTypeRepository>();
var contentProviderManager = ServiceLocator.Current.GetInstance<IContentProviderManager>();
var mediaTypes = contentTypeRepository.List().Where(x => typeof(MediaData).IsAssignableFrom(x.ModelType));
var provider = contentProviderManager.GetProvider(root);
if (provider != null && provider.HasCapability(ContentProviderCapabilities.Search))
{
List<IContent> mediaList = new List<IContent>();
foreach (var blockType in mediaTypes)
{
mediaList.AddRange(provider.ListContentOfContentType(blockType).Where(x => x.Name.IndexOf(query.SearchQuery, StringComparison.InvariantCultureIgnoreCase) >= 0).Select(x => contentRepository.Get<IContent>(x.ContentLink)));
}
return mediaList.Select(CreateSearchResult);
}
return Enumerable.Empty<SearchResult>();
}
}</code></pre>
<p>After adding these search providers, now I can enjoy the filtering feature. You can customize the code to fit your need and improve the performance (for example: implement caching mechanism).</p>
<p><video width="100%" height="auto" src="/link/d17abf0512a94dbdb17a1d2646efcdd3.aspx" preload="none" controls="controls"><object width="0" height="240" data="https://world.episerver.com/epiui/EPiServer.Cms.TinyMce/1.0.0/ClientResources/tinymce/plugins/media/moxieplayer.swf" type="application/x-shockwave-flash"><param name="src" value="https://world.episerver.com/epiui/EPiServer.Cms.TinyMce/1.0.0/ClientResources/tinymce/plugins/media/moxieplayer.swf" /><param name="flashvars" value="url=/globalassets/cms-searching.mp4&poster=/epiui/CMS/" /><param name="allowfullscreen" value="true" /><param name="allowscriptaccess" value="true" /></object></video></p>2018-04-02T03:50:21.0000000ZBlog postUpload option in the Select content dialog<p>Hi again!</p>
<p>When working with media contents (image, video...) in the CMS, you can only upload your files in the Media component. In this post I would like to introduce an add-on which allows you to upload media file when you are in the Select content dialog. Let's see it in action.</p>
<p><video width="100%" height="auto" controls="controls" autoplay="autoplay" preload="none" src="/link/cbb2a92c69f449638606baffc890754d.aspx"></video></p>
<p>I have also added this function to the TinyMCE editor, let's see it below.</p>
<p><video width="100%" height="auto" controls="controls" autoplay="autoplay" preload="none" src="/link/fed5966caac3433b9e2ce792e1c12f74.aspx"></video></p>
<p>Basically, it works as same as when you working in Media component but has some notable points.</p>
<ol>
<li>Upload button only get enabled when you select folder node on the tree.</li>
<li>OK button only get enabled when you select actual media content.</li>
<li>There is a sync between Select content dialog and Media component, this means that you can see uploaded files immediately in Media component after the uploading process completes in the Select content dialog.</li>
</ol>
<p>It took pretty much code so I have created a nuget package for this feature, but currently it only supports Episerver CMS 10. I will make it work with Episerver CMS 11 soon.</p>
<p><a title="EpiserverSite.TinyMCEFileBrowserPlugin.1.0.0-developerbuild.nupkg" href="https://drive.google.com/open?id=1xUVtQAAWTtIOJu6wSPTZVPNtBhPkb7zs">EpiserverSite.TinyMCEFileBrowserPlugin.1.0.0-developerbuild.nupkg</a></p>2018-03-06T11:10:45.0000000ZBlog postSingle copy and paste in PageNavigationTree<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>By the default, when you copy and paste a page in PageNavigationTree (PNT), all its children also come along. Recently a discussion on Yammer has raised question about how to just copy and paste parent page without its children. Currently edit mode UI does not support this function, so in this post I would like to describe the way to do this.</p>
<ol>
<li>Firstly, we need a new command called "Copy this page" in the tree's context menu. It works same as the default Copy command except that it sets a flag "copyMode" to "single". We also have to override the default Copy and Paste commands to set and send this flag to the server side for further processing.
<pre class="language-csharp"><code>//CopySingleContent
define([
"dojo/_base/declare",
"epi-cms/command/CopyContent"
], function (declare, CopyContent) {
return declare([CopyContent], {
label: "Copy this page",
iconClass: "epi-iconCopy",
_execute: function () {
this.clipboard.set("copyMode", true);
this.inherited(arguments);
}
});
});</code></pre>
<pre class="language-csharp"><code>// PasteContent
define([
"dojo/_base/declare",
"epi-cms/command/PasteContent",
"epi-propertydemo/service/CustomContentHierarchyService"
], function (declare, PasteContent, CustomContentHierarchyService) {
return declare([PasteContent], {
_execute: function () {
// summary:
// Override to handle "single copy"
// tags:
// protected
if (this.clipboard.copyMode === "single") {
this.model.service = new CustomContentHierarchyService();
this.model.service.singleCopy = true;
}
this.inherited(arguments);
}
});
});</code></pre>
<pre class="language-csharp"><code>// CopyContent
define([
"dojo/_base/declare",
"epi-cms/command/CopyContent"
], function (declare, CopyContent)
{
return declare([CopyContent], {
_execute: function() {
// summary:
// Override to set copyMode to null
// tags:
// protected
this.clipboard.set("copyMode", null);
this.inherited(arguments);
}
});
});</code></pre>
</li>
<li>Now we need send the "copyMode" to the server. This is done in a custom ContentHierarchyService
<pre class="language-csharp"><code>define([
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/aspect",
"epi/dependency",
"epi-cms/contentediting/ContentHierarchyService"
], function (declare,lang, aspect, dependency, ContentHierarchyService) {
return declare([ContentHierarchyService], {
postscript: function (params) {
this.inherited(arguments);
aspect.before(this.store.xhrHandler, "xhr", lang.hitch(this, function (/*String*/method, /*dojo.__XhrArgs*/args, /*Boolean?*/hasBody) {
if (this.singleCopy && method == "POST") {
args.headers = args.headers || {};
args.headers = lang.mixin({}, args.headers, { "X-EpiCopyMode": "single" });
}
return [method, args];
}));
aspect.after(this.store.xhrHandler, "xhr", lang.hitch(this, function (deferred) {
this.singleCopy = null;
return deferred;
}));
}
});
});</code></pre>
<p>We attach"X-EpiCopyMode" param to the request header, this will be consummed in the server-side to decide to perform "single copy" or "normal copy".</p>
</li>
<li>We have created custom commands but they haven't been used anywhere. We need attach them to page tree's context menu. Unfortunately, there is no an easy way to do this, but the hard way.
<pre class="language-csharp"><code>define([
"dojo/_base/declare",
"dojo/_base/array",
"dojo/aspect",
"epi/_Module",
"epi/dependency",
"epi-cms/plugin-area/navigation-tree",
"epi-cms/component/MainNavigationComponent",
"epi-cms/command/PasteContent",
"epi-cms/command/CopyContent",
"epi-propertydemo/command/CopySingleContent",
"epi-propertydemo/command/PasteContent",
"epi-propertydemo/command/CopyContent"
], function (
declare,
array,
aspect,
_Module,
dependency,
navigationTreePluginArea,
MainNavigationComponent,
PasteContent,
CopyContent,
CopySingleContent,
CustomPasteContent,
CustomCopyContent
) {
return declare([_Module], {
initialize: function () {
this.inherited(arguments);
var widgetFactory = dependency.resolve("epi.shell.widget.WidgetFactory");
aspect.after(widgetFactory, "onWidgetCreated", function (widget, componentDefinition) {
if (widget.isInstanceOf(MainNavigationComponent)) {
aspect.after(widget, "own", function () {
var cmd = new CopySingleContent({
category: "context",
clipboard: this.tree._clipboardManager,
selection: this.tree.selection,
model: this.tree.model
});
navigationTreePluginArea.add(cmd);
var self = this;
aspect.after(this.tree._contextMenuCommandProvider, "get", function (commands) {
for (var i = 0; i < commands.length; i++) {
var command = commands[i];
if (command.isInstanceOf(PasteContent)) {
commands[i] = new CustomPasteContent({
category: "context",
clipboard: self.tree._clipboardManager,
selection: self.tree.selection,
model: self.tree.model
});
}
if (command.isInstanceOf(CopyContent) && !command.isInstanceOf(CopySingleContent)) {
commands[i] = new CustomCopyContent({
category: "context",
clipboard: self.tree._clipboardManager,
selection: self.tree.selection,
model: self.tree.model
});
}
}
return commands;
});
});
}
}, true);
}
});
});</code></pre>
</li>
<li>We have completed client-side work, now is server-side. To decide to perform "single copy" or "normal copy", we need create an intercept for IContentCopyHandler.
<pre class="language-csharp"><code> public class ContentCopyHandlerIntercept : IContentCopyHandler
{
private readonly IContentCopyHandler _defaultHandler;
public ContentCopyHandlerIntercept(IContentCopyHandler defaultHandler)
{
_defaultHandler = defaultHandler;
}
public ContentReference Copy(ContentReference contentLink, ContentReference destinationLink, AccessLevel requiredSourceAccess, bool publishOnDestination)
{
var singleCopy = HttpContext.Current.Request.Headers["X-EpiCopyMode"] == "single";
if(!singleCopy)
{
return _defaultHandler.Copy(contentLink, destinationLink, requiredSourceAccess, publishOnDestination);
}
var customContentCopyHandler = ServiceLocator.Current.GetInstance<SingleContentCopyHandler>();
return customContentCopyHandler.Copy(contentLink, destinationLink, requiredSourceAccess, publishOnDestination);
}
}</code></pre>
<p>We need register this intercept at initialization time</p>
<pre class="language-csharp"><code>[ModuleDependency(typeof(Cms.Shell.InitializableModule))]
public class InitializationModule : IConfigurableModule
{
public void ConfigureContainer(ServiceConfigurationContext context)
{
context.ConfigurationComplete += (o, e) =>
{
context.Services.Intercept<IContentCopyHandler>((locator, defaultImplement) =>
{
return new ContentCopyHandlerIntercept(defaultImplement);
});
};
}
}</code></pre>
</li>
<li>Finally, we have to implement the SingleContentCopyHandler.
<pre class="language-csharp"><code>[ServiceConfiguration(typeof(IContentCopyHandler))]
public class SingleContentCopyHandler : IContentCopyHandler
{
private class CopyContext
{
public CopyContext()
{
ExportSources = new List<ExportSource>();
}
public IList<ExportSource> ExportSources { get; set; }
public ContentReference DestinationRoot { get; set; }
public ContentReference OriginalLink { get; set; }
public ContentReference NewLink { get; set; }
public bool PublishOnDestination { get; set; }
public bool InBackground { get; set; }
public int PageCount { get; set; }
public String LanguageCode { get; set; }
public AccessLevel RequiredSourceAccess { get; set; }
}
public SingleContentCopyHandler(IContentRepository contentRepository,
ServiceAccessor<IDataImporter> dataImporterAccessor,
ServiceAccessor<IDataExporter> dataExporterAccessor,
ContentOptions contentOptions)
{
_contentRepository = contentRepository;
_dataImporterAccessor = dataImporterAccessor;
_dataExporterAccessor = dataExporterAccessor;
_contentOptions = contentOptions;
}
private static readonly ILog _log = LogManager.GetLogger(typeof(ContentCopyHandler));
private readonly IContentRepository _contentRepository;
private readonly ServiceAccessor<IDataImporter> _dataImporterAccessor;
private readonly ServiceAccessor<IDataExporter> _dataExporterAccessor;
private readonly ContentOptions _contentOptions;
#region IContentCopyHandler Members
/// <summary>
/// Copy pages to another container.
/// </summary>
/// <param name="pageLink">The link to the content data to copy.</param>
/// <param name="destinationLink">The container where the page will be copied</param>
/// <param name="requiredSourceAccess">The required source access to check access against</param>
/// <param name="publishOnDestination">If the new pages should be published on the destination</param>
/// <returns></returns>
public virtual ContentReference Copy(ContentReference pageLink, ContentReference destinationLink, AccessLevel requiredSourceAccess, bool publishOnDestination)
{
CopyContext arguments = new CopyContext()
{
NewLink = ContentReference.EmptyReference,
OriginalLink = pageLink,
DestinationRoot = destinationLink,
PublishOnDestination = publishOnDestination,
PageCount = 1,
LanguageCode = Thread.CurrentThread.CurrentUICulture.Name,
RequiredSourceAccess = requiredSourceAccess
};
arguments.ExportSources.Add(new ExportSource(arguments.OriginalLink, ExportSource.NonRecursive));
ExecuteCopying(arguments);
//Export:Review
return arguments.NewLink;
}
#endregion
private void ExecuteCopying(CopyContext context)
{
bool useFile = context.PageCount > _contentOptions.InMemoryCopyThreshold;
string filePath = useFile ? Path.GetTempFileName() : null;
try
{
using (Stream stream = CreateStream(useFile, filePath))
{
using (var exporter = _dataExporterAccessor())
{
var options = new ExportOptions()
{
TransferType = TypeOfTransfer.Copying,
RequiredSourceAccess = context.RequiredSourceAccess,
AutoCloseStream = false,
ExcludeFiles = false
};
var exporterLog = exporter.Export(stream, context.ExportSources, options);
if (exporter.Status.Log.Errors.Count > 0)
{
Rollback(context, exporter.Status.Log);
}
}
stream.Seek(0, SeekOrigin.Begin);
var importer = _dataImporterAccessor();
var copyOptions = new ImportOptions()
{
TransferType = TypeOfTransfer.Copying,
EnsureContentNameUniqueness = true,
SaveAction = (context.PublishOnDestination ? SaveAction.Publish : SaveAction.CheckOut) | SaveAction.SkipValidation
};
var log = importer.Import(stream, context.DestinationRoot, copyOptions);
context.NewLink = importer.Status.ImportedRoot;
if (importer.Status.Log.Errors.Count > 0)
{
Rollback(context, importer.Status.Log);
}
}
}
finally
{
if (File.Exists(filePath))
{
File.Delete(filePath);
}
}
}
private static Stream CreateStream(bool useFile, string filePath)
{
if (useFile)
{
return new FileStream(filePath, FileMode.Open, FileAccess.ReadWrite);
}
else
{
return new MemoryStream();
}
}
private void Rollback(CopyContext context, ITransferLogger transferLogger)
{
try
{
if (!ContentReference.IsNullOrEmpty(context.NewLink))
{
_contentRepository.Delete(context.NewLink, true, EPiServer.Security.AccessLevel.NoAccess);
}
}
catch (Exception ex)
{
transferLogger.Error(String.Format("Failed to rollback creation of '{0}'", context.NewLink.ToString()), ex);
}
if (_log.IsErrorEnabled)
{
_log.ErrorFormat("Failed to copy pages with root '{0}' to '{1}'",
context.OriginalLink.ToString(), context.DestinationRoot.ToString());
}
String translatedMessage = LocalizationService.Current.GetStringByCulture("/copy/backgroundreport/failed", "Failed to copy content '{0}' to '{1}'", CultureInfo.GetCultureInfo(context.LanguageCode));
String formattedMessage = String.Format(translatedMessage, _contentRepository.Get<IContent>(context.OriginalLink)?.Name, _contentRepository.Get<IContent>(context.DestinationRoot)?.Name);
String errorMessage = String.Format("{0}:{1}", formattedMessage, String.Join(",", transferLogger.Errors.Cast<String>().ToArray<string>()));
throw new EPiServerException(errorMessage);
}
}</code></pre>
<p>The main point here is the line : arguments.ExportSources.Add(new ExportSource(arguments.OriginalLink, ExportSource.NonRecursive)); It allows to copy just content without its children.</p>
</li>
<li>And here is the result for a very long code:</li>
</ol>
<p><img src="/link/0524ec6994904903a6f92f1c135f0984.aspx" alt="Image TtDWKW6yLa.gif" /></p>
</body>
</html>2018-03-01T07:01:23.0000000ZBlog postCustom FieldSet emelent block for EPiServer.Form<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>Hi there.</p>
<p>In this post, I will show you how to create a custom field set element block for FORM addon. This block aims to group some of form elements and add some pretty appearances for the form. And this is what we will achieve.</p>
<p><img src="/link/9860ad0e575f41dbb6ed87553527e509.aspx" alt="Image custom_form_1.png" /><img src="/link/fbd544900b7d4f9ca3ea9c3a16937fd4.aspx" alt="Image custom_form_submissions_1.png" /></p>
<ol>
<li>Create a new form element block called "FieldsetBlock" which cotains a element area allow user to drag and drop other form elements into. I also introduce a new interface called "IFieldSet", we will use this for some additional logic later.
<pre class="language-csharp"><code>[ContentType(GUID = "2A4F56F9-2D3A-4C0A-AD78-1381D6A57808", GroupName = "Layout", DisplayName = "Field set")]
public class FieldsetBlock: ElementBlockBase, IFieldSet, IExcludeInSubmission
{
[AllowedTypes(new[] { typeof(DataElementBlockBase) })]
[Display(GroupName = "Elements")]
[UIHint("FormsContentAreaEditor")]
public virtual ContentArea ElementsArea { get; set; }
public virtual string Title { get; set; }
}
public interface IFieldSet
{
ContentArea ElementsArea { get; set; }
}</code></pre>
</li>
<li>Create a view for the <span><span>FieldsetBlock</span></span>
<pre class="language-html"><code>@model EpiserverSite2.Models.FormElement.FieldsetBlock
<div class="Form__Element fieldsetBlock">
<fieldset>
<legend class="fieldset_title" @Html.EditAttributes(x => x.Title)>@Model.Title</legend>
@Html.PropertyFor(x => x.ElementsArea)
</fieldset>
</div> </code></pre>
</li>
<li>By the default, form elements have no on-page edit view, but the field set element need one. Add this code to restore the on-page edit view for the f<span><span>ield set element:</span></span>
<pre class="language-csharp"><code>[UIDescriptorRegistration]
public class FieldsetBlockUIDescriptor: UIDescriptor<FieldsetBlock>
{
public FieldsetBlockUIDescriptor()
{
DisabledViews = new List<string>();
}
}</code></pre>
<span><br /></span></li>
<li>We need to override the way the FORM retrieves form elements to include "sub elements" contained in the field set blocks. We have to because by the default, FORM only retrieves "first-level" elements.
<pre class="language-csharp"><code>[ServiceConfiguration(ServiceType = typeof(DataSubmissionService), Lifecycle = ServiceInstanceScope.Singleton)]
public class CustomDataSubmissionService : DataSubmissionService
{
protected override IFormStep GetCurrentStep(NameValueCollection rawSubmittedData, FormContainerBlock formContainer)
{
var step = base.GetCurrentStep(rawSubmittedData, formContainer);
var lang = (formContainer as ILocale).Language.Name;
var elements = new List<IFormElement>(step.Elements);
foreach (var el in step.Elements)
{
if (el.SourceContent is IFieldSet)
{
var allElements = (el.SourceContent as IFieldSet).ElementsArea.Items;
foreach (var item in allElements)
{
var formElementBlock = item.ContentLink.GetContent(lang) as ElementBlockBase;
if (formElementBlock != null && !elements.Contains(formElementBlock.FormElement))
{
elements.Add(formElementBlock.FormElement);
}
}
}
}
step.Elements = elements;
return step;
}
}</code></pre>
<pre class="language-csharp"><code> [ServiceConfiguration(ServiceType = typeof(FormBusinessService), Lifecycle = ServiceInstanceScope.Singleton)]
public class CustomFormBusinessService: FormBusinessService
{
public override IEnumerable<ElementBlockBase> GetDisplayableFormElementBlocks(FormContainerBlock formContainerBlock)
{
var allElements = GetFormElementBlocks(formContainerBlock, false);
var elementList = new List<ElementBlockBase>(allElements);
var lang = (formContainerBlock as ILocale).Language.Name;
foreach (var el in allElements)
{
if (el is IFieldSet)
{
var allSubElements = (el as IFieldSet).ElementsArea?.Items;
if (allSubElements != null && allSubElements.Count > 0)
{
foreach (var item in allSubElements)
{
var formElementBlock = item.ContentLink.GetContent(lang) as ElementBlockBase;
if (formElementBlock != null && !elementList.Contains(formElementBlock))
{
elementList.Add(formElementBlock);
}
}
}
}
}
return elementList;
}
/// <summary>
/// Return all FormElementBlock of this FomrContainer, regardless the publish, visibility status or personalization content condition.
/// </summary>
/// <returns></returns>
public override IEnumerable<ElementBlockBase> GetAllInnerFormElementBlocks(FormContainerBlock formContainerBlock)
{
var allElements = GetFormElementBlocks(formContainerBlock, true);
var elementList = new List<ElementBlockBase>(allElements);
var lang = (formContainerBlock as ILocale).Language.Name;
foreach (var el in allElements)
{
if (el is IFieldSet)
{
var allSubElements = (el as IFieldSet).ElementsArea?.Items;
if (allSubElements != null && allSubElements.Count > 0)
{
foreach (var item in allSubElements)
{
var formElementBlock = item.ContentLink.GetContent(lang) as ElementBlockBase;
if (formElementBlock != null && !elementList.Contains(formElementBlock))
{
elementList.Add(formElementBlock);
}
}
}
}
}
return elementList;
}
}</code></pre>
<p><br />Make sure these custom services take place the original ones.</p>
<pre class="language-csharp"><code>context.Services.AddTransient<DataSubmissionService, DataSubmissionService>()
.AddTransient<DataSubmissionService, CustomDataSubmissionService>();
context.Services.AddTransient<FormBusinessService, FormBusinessService>()
.AddTransient<FormBusinessService, CustomFormBusinessService>();</code></pre>
</li>
<li>Since we have changed the way FORM retrieves form elements, so we have to remove redundant elements and empty field sets before rendering the form. To do this, we need a custom form container block controller.
<pre class="language-csharp"><code>[TemplateDescriptor(AvailableWithoutTag = true, Default = true, ModelType = typeof(FormContainerBlock), TemplateTypeCategory = TemplateTypeCategories.MvcPartialController)]
public class CustomFormContainerBlockController: FormContainerBlockController, IRenderTemplate<FormContainerBlock>
{
public override ActionResult Index(FormContainerBlock currentBlock) // Note: convention, the parameter must be "currentBlock", not formBlock or another
{
var result = base.Index(currentBlock) as PartialViewResult;
var formModel = result.Model as FormContainerBlock;
if (formModel != null)
{
var steps = new List<IFormStep>(formModel.Form.Steps);
var allSubItems = new List<ContentReference>();
// find all sub items (child of FieldSetElement)
foreach (var step in steps)
{
foreach(var el in step.Elements)
{
if (el.SourceContent is IFieldSet)
{
var fieldSetElement = el.SourceContent as IFieldSet;
if (fieldSetElement.ElementsArea != null && fieldSetElement.ElementsArea.Items.Count > 0)
{
allSubItems.AddRange(fieldSetElement.ElementsArea.Items.Select(i => i.ContentLink));
}
}
}
}
// Remove redundant elements
foreach (var step in steps)
{
var elements = new List<IFormElement>(step.Elements);
foreach (var el in step.Elements)
{
if (el.SourceContent is IFieldSet)
{
var fieldSetElement = el.SourceContent as IFieldSet;
if (fieldSetElement.ElementsArea == null || fieldSetElement.ElementsArea.Items.Count == 0)
{
elements.Remove(el);
}
}
if (allSubItems.Contains(el.SourceContent.ContentLink))
{
elements.Remove(el);
}
}
step.Elements = elements;
}
formModel.Form.Steps = steps;
}
return result;
}</code></pre>
</li>
<li>Finally, add some style for the field set element.
<pre class="language-csharp"><code>.fieldsetBlock fieldset {
border: 1px groove red;
padding: 1em;
}
.fieldsetBlock fieldset legend {
width: auto;
margin: 0 5px;
padding: 0 5px;
}</code></pre>
</li>
</ol>
</body>
</html>2018-02-08T09:17:24.0000000ZBlog postContent type filter when creating a new content<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p><span>By the default, when you create a new content (page or block), the CreateView view will be displayed and allows you to choose content type for the content is being created. If you have a lot of content types, then the selecting action can get difficult a bit.</span></p>
<p><img src="/link/fbf055a097104c988ed2942474c39dce.aspx" alt="Image createview_nofilter.png" /></p>
<p><span>This blog will show you how to create "filter function" to quickly narrow content types in the CreateContent view when creating content.</span></p>
<ol>
<li><span>Replace the default CreateContent view by our custom one:</span>
<pre class="language-csharp"><code>define([
"dojo/_base/declare",
"dojo/aspect",
"epi/_Module",
"epi/routes",
"epi/dependency"
], function (
declare,
aspect,
_Module,
routes,
dependency
) {
return declare([_Module], {
initialize: function () {
this.inherited(arguments);
this._replaceCreateCommand();
},
_replaceCreateCommand: function () {
var widgetFactory = dependency.resolve("epi.shell.widget.WidgetFactory");
aspect.after(widgetFactory, "onWidgetCreated", function (widget, componentDefinition) {
if (componentDefinition.widgetType === "epi/shell/widget/WidgetSwitcher") {
aspect.around(widget, "viewComponentChangeRequested", function (originalMethod) {
return function () {
if (arguments[0] === "epi-cms/contentediting/CreateContent") {
arguments[0] = "epi-contactmanager/contentediting/CreateContent";
}
originalMethod.apply(this, arguments);
};
});
}
}, true);
}
});
});</code></pre>
</li>
<li><span>In the custom CreateContent view, add a search box next to the Name text box, and handle its searchBoxChange event.</span>
<pre class="language-csharp"><code>define([
"dojo/_base/declare",
"dojo/_base/lang",
"dojo/_base/array",
"dojo/aspect",
"dojo/dom-style",
"dojo/dom-class",
"epi-cms/contentediting/CreateContent",
"epi/shell/widget/SearchBox"
], function (
declare,
lang,
array,
aspect,
domStyle,
domClass,
CreateContent,
SearchBox
) {
return declare([CreateContent], {
postCreate: function () {
this.inherited(arguments);
// search box
this.own(this._searchBox = new SearchBox({}));
this._searchBox.placeAt(this.namePanel, "last");
domStyle.set(this._searchBox.domNode, "width", "auto");
domClass.add(this.namePanel, "epi-gadgetInnerToolbar");
this.own(
this._searchBox.on("searchBoxChange", lang.hitch(this, this._onSearchTextChanged)),
aspect.before(this.contentTypeList, "refresh", lang.hitch(this, function () {
// reset the search box and _originalGroups
this._searchBox.clearValue();
this._originalGroups = null;
})),
aspect.after(this.contentTypeList, "setVisibility", lang.hitch(this, function (display) {
if (!display) {
domStyle.set(this._searchBox.domNode, "display", "none");
}
}), true)
);
},
_onSearchTextChanged: function (queryText) {
this._originalGroups = this._originalGroups || lang.clone(this.contentTypeList.get("groups"));
var groupKeys = Object.keys(this._originalGroups);
array.forEach(groupKeys, function (key) {
var contentTypes = this._originalGroups[key].get("contentTypes");
contentTypes = array.filter(contentTypes, function (item) {
return item.name.toLowerCase().indexOf(queryText.toLowerCase()) != -1;
});
if (!contentTypes.length) {
domStyle.set(this.contentTypeList.groups[key].domNode, "display", "none");
}
else {
domStyle.set(this.contentTypeList.groups[key].domNode, "display", "");
this.contentTypeList.groups[key].set("contentTypes", contentTypes);
}
}, this);
}
});
});</code></pre>
<br /><br /></li>
<li>Enjoy the filtering!</li>
</ol>
<p><img src="/link/3417b18901f647d98d7099b095d65a11.aspx" alt="Image createcontent_filtered.png" /></p>
<p><span>[Pasting files is not allowed]</span></p>
</body>
</html>2018-01-25T02:56:38.0000000ZBlog post