Blog posts by Binh-Nguyen

Blog posts by Binh-Nguyen2026-06-24T11:26:37.0000000Zhttps://world.optimizely.com/blogs/binh-nguyen/ Optimizely World Migrating from Find to Graph: Lessons Learned from a Real CMS 13 ProjectWhile migrating a search solution from Optimizely Search & Navigation (Find) to Optimizely Graph in CMS 13, I encountered several issues that were not immediately obvious from the documentation. Most of these issues were discovered through experimentation, debugging startup errors, investigating generated Graph schemas, and comparing behavior with Search & Navigation. Here are details about them: 1. Graph Conventions Only Existing Starting from CMS 13.1.0 It took me quite some time to figure out how to apply Graph Conventions based on the following documentation while working on a CMS 13.0.0 project: <a href="https://docs.developers.optimizely.com/content-management-system/v13.0.0-CMS/docs/indexing-conventions">https://docs.developers.optimizely.com/content-management-system/v13.0.0-CMS/docs/indexing-conventions</a> The documentation describes Graph Conventions using APIs such as: <pre><code>services.ConfigureGraphConventions(...)</code></pre> <pre>OR <code>services.AddContentGraph(configureConventions: c => { //add conventions here });</code></pre> However, I was unable to find this API in a CMS 13.0.0 implementation. After further investigation, I discovered that the Graph Convention API was introduced in CMS 13.1.0 together with Optimizely.Graph.Cms 13.1.0 and is not available in earlier CMS 13 releases. This initially caused some confusion because the documentation is published under the CMS 13 documentation section without clearly indicating the minimum version required for the feature. My recommendation is to use CMS 13.1.0 or later if you plan to leverage Graph Conventions during your migration. And It would be helpful if the documentation included version-specific notes or minimum version requirements for Graph Convention APIs, as this could save developers a considerable amount of troubleshooting time during migration projects. 2. Extension Methods Work for Queries but Not for Facets<span style="font-size: 12.0pt; font-family: 'Aptos',sans-serif; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: Aptos; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;"> One of the first surprises I encountered was that extension methods included through Graph Conventions can be queried successfully but cannot be used for faceting. Here is sample code: - Configuration <code>services.ConfigureGraphConventions(conventions => {     conventions         .ForInstancesOf<StandardPage>()         .IncludeField(x => x.ContentTypeName(), IndexingType.Searchable); });</code> - Extension method: <pre><code>public static string ContentTypeName(this ISitePageData sitePageData) { return sitePageData.GetOriginalType().Name; }</code></pre> However, when attempting to create a facet using the extension method: <code>query.Facet(x => x.ContentTypeName()); </code> I saw this error <img src="/link/52e5237e18cf42718fe3a17a10072ee9.aspx" width="1029" height="664" /> I tried running the same facet query directly in Graph Explorer, and it worked as expected. This leads me to believe that the issue may originate from the Optimizely Graph Client API when it builds the query from a lambda expression. However, I'm not sure whether this behavior is intentional or if it should be considered a bug. Impact: Existing Find implementations that rely on calculated fields for faceting may require redesign when migrating to Graph. 3. Search By Base Type Works Differently Than Search & Navigation In Search & Navigation, it is common to search across multiple content types by using a shared base class or marker interface. Examples: <code>Search<SitePageData>()</code> or <code>Search<ISearchableContent>()</code> Many developers expect the same approach to work in Optimizely Graph. Unfortunately, Graph uses a different model and does not automatically support these patterns. - What does not work The following approaches do not create a shared Graph schema that can be queried across all implementing content types. Simple interfaces: <code>public interface ISearchableContent { }</code> Abstract base classes: <code>public abstract class SearchablePage : PageData { }</code> Although these patterns work well in Search & Navigation, Optimizely Graph does not automatically generate a queryable Graph contract from them. - What works To query multiple content types through a shared schema, Optimizely Graph requires a Graph Contract. For example: <code>[ContentType]</code> <code>public interface ISitePageData</code> The contract must then be implemented by each content type that should participate in the shared schema: <code>public class ArticlePage : ISitePageData</code> <code>public class NewsPage : ISitePageData</code>   When content is synchronized to Graph, a shared Graph type is generated for the contract, allowing queries across all implementing content types. Content Type Management UI Behavior One side effect of using a Graph Contract is that the interface becomes visible in the CMS Content Type Management UI. For example, after adding the <code>[ContentType]</code> attribute to the interface: <pre><code>[ContentType] public interface ISitePageData { }</code></pre> the contract appears as a content type in the CMS administration interface as following: <img src="/link/abee47fc9c3149f891781f28a055797b.aspx" width="1437" height="414" /> This behavior can be surprising at first, especially since the interface is not intended to be created or edited by content editors. However, this is currently the mechanism Optimizely Graph uses to discover and generate shared schema contracts. Key takeaway: In Optimizely Graph, interfaces annotated with <code>[ContentType]</code> enable cross-type queries. Base class inheritance does not. Impact: Search architectures based on inheritance hierarchies or marker interfaces must be redesigned using Graph Contracts. This can affect query models, schema design, and migration effort. 4. Using the Content Type Management UI to Change a Property's Indexing Type <img src="/link/0c261ffa36a241f09ab67bea6b4d32e6.aspx" width="1147" height="535" /> Note: The indexing convention API cannot be used to exclude a field from Graph indexing. It only supports extension methods for calculated properties, not actual content type properties. I tried to add this below to disable an actual field: <pre><code>services.AddContentGraph(configureConventions: c => { c.ForInstancesOf<StandardPage>().IncludeField(x => x.ContentAreaCssClass, IndexingType.Disabled); }); </code> Here is the error when I try to disable a field from indexing via convention: <img src="/link/c483e294bb81491b89e2937c0d7b958e.aspx" width="792" height="268" /></pre> To disable indexing for a field, use the Content Type Management UI or apply the following attribute to the property in your content type: <pre><code>[IndexingType(IndexingType.Disabled)] public virtual bool HideSiteFooter { get; set; }</code></pre> 5. <span style="font-size: 12.0pt; font-family: 'Aptos',sans-serif; mso-ascii-theme-font: minor-latin; mso-fareast-font-family: Aptos; mso-fareast-theme-font: minor-latin; mso-hansi-theme-font: minor-latin; mso-bidi-font-family: 'Times New Roman'; mso-bidi-theme-font: minor-bidi; mso-ansi-language: EN-US; mso-fareast-language: EN-US; mso-bidi-language: AR-SA;">Graph Contracts and Content Types Must Use the Same IndexingType When working with Graph Contracts, I discovered an unexpected validation rule that can prevent the application from starting. Optimizely Graph validates property metadata across the entire contract hierarchy during startup. If the same property exists on both a Graph Contract and a content type, the IndexingType must be identical everywhere. Example Graph Contract: <pre><code>[ContentType] public interface ISitePageData { string ContentTypeName { get; } }</code></pre> Base content type: <pre><code>public abstract class SitePageData : PageData, ISitePageData { [GraphProperty(IndexingType.Queryable)] public virtual string ContentTypeName => GetOriginalType().Name; }</code></pre> Here is the error you will see if this happens: <img src="/link/2162fb9599484f8cb164cddc1b8897a3.aspx" width="849" height="535" /> Impact: Inconsistent indexing metadata can prevent the application from starting. This validation rule becomes especially important when multiple teams maintain shared contracts and content models. 6. Getter-only/fallback properties are included in the Graph schema, but their indexed values are null For example: <pre><code>public string ContentAreaCssClass => "teaserblock";</code></pre> <pre><code>public virtual string TeaserText { get { var teaserText = this.GetPropertyValue(p => p.TeaserText); // Use explicitly set teaser text, otherwise fall back to description return !string.IsNullOrWhiteSpace(teaserText) ? teaserText : MetaDescription; } set => this.SetPropertyValue(p => p.TeaserText, value); }</code></pre> Here are the their value when indexing: <img src="/link/f52a342aacf54f4c9cad1852c93e61dd.aspx" width="935" height="461" /> Impact: Properties that appear to work correctly in CMS may produce unexpected Graph results. Search queries, filters, and facets relying on computed values may silently return incorrect data. 7. Extension Methods Cannot Be Added to a Graph Contract as Calculated Fields When using a Graph Contract, extension methods cannot be added as calculated fields on the contract itself. Here is the error that I got when trying to do this: <img src="/link/12b8f476d6424d569475e365043348c1.aspx" width="779" height="264" /> Impact: Shared Graph Contracts cannot be enriched with convention-based calculated fields. Developers may need to duplicate calculated properties across content types or redesign their schema strategy. <h3>Conclusion</h3> Optimizely Graph provides a powerful and flexible search platform, but it differs significantly from Search & Navigation in several areas. When migrating existing Find implementations, pay particular attention to: - Graph Contracts - Graph Convention limitations - Faceting behavior - Property indexing rules - Calculated fields Understanding these differences early can save significant debugging and migration effort.2026-06-24T11:26:37.0000000Z

Blog post

Full implementation - Fallback languages with Optimizely GraphNowadays, many people choose a headless approach when developing Optimizely CMS/Commerce projects using Opti Graph. One challenge we may face is implementing language fallback, as it is not supported by default. There are a few tips available, and today I want to share my complete implementation. I hope it will help others who need to achieve the same thing. 1. In back-end code, add more fallback language property for Graph model: <pre class="language-csharp"><code>public class FallbackLanguageContentsApiModelProperty( ILanguageBranchRepository languageBranchRepository, ICustomUrlService customUrlService, IContentLanguageSettingsHandler contentLanguageSettingsHandler) : IContentApiModelProperty { public object GetValue(ContentApiModel contentApiModel) { if (contentApiModel.ContentLink != null) { var enabledLanguages = languageBranchRepository.ListEnabled(); var pagesThatFallBackContentToCurrentPage = new List<FallbackLanguageContent>(); var cRef = contentApiModel.ContentLink.ToContentReference(); foreach (var enabledLanguage in enabledLanguages) { var fallbackLanguages = contentLanguageSettingsHandler.GetFallbackLanguages(cRef, enabledLanguage.Culture.Name); if (fallbackLanguages != null && fallbackLanguages.Any() && fallbackLanguages.Contains(contentApiModel.Language.Name)) { var lang = enabledLanguage.Culture.Name; pagesThatFallBackContentToCurrentPage.Add(new FallbackLanguageContent() { LanguageName = lang, RelativePath = !ContentReference.IsNullOrEmpty(cRef) ? customUrlService.GetRelativeUrl(cRef, lang) : string.Empty }); } } return pagesThatFallBackContentToCurrentPage; } else { return new List<FallbackLanguageContent>(); } } public string Name => "FallbackLanguageContents"; } internal class FallbackLanguageContent { public required string LanguageName { get; set; } public required string RelativePath { get; set; } }</code></pre>   2. In the front-end code, we need to query content using a relative path and locale, including the fallback logic. Here is the query: <pre class="language-html"><code>query getContentByPathWithinFallback($path: [String!]!, $locale: String, $siteId: String) { content: Content( where: { SiteId: { eq: $siteId } _or: [ { _and: [{ Language: { Name: { eq: $locale, boost: 2 } } }, { RelativePath: { in: $path } }] } { _and: [{ FallbackLanguageContents: { LanguageName: { eq: $locale, boost: 1 } } }, { FallbackLanguageContents: { RelativePath: { in: $path } } }] } ] } locale: ALL ) { items: item { ...IContentData ...PageData } } } fragment PageData on IContent { ...IContentData } fragment IContentData on IContent { contentType: ContentType _metadata: ContentLink { id: Id version: WorkId key: GuidValue } locale: Language { name: Name } path: RelativePath _type: __typename } </code></pre>   By using boost values in the query, we can indicate which conditions should have higher priority. As a result, the fallback content is returned only when no content exists for the exact locale. If you are using Optimizely SaaS Starter for your headless solution, you can call your custom content query in <code>src/app/[[...path]]/page.tsx</code> by replacing the following section: <img src="/link/86bcc904fdcd4054aa19b44e4160c3a0.aspx" />   That's all. Hope this makes your multilingual setup a bit easier. Happy coding!2025-11-15T11:26:16.0000000Z

Blog post

How to have a link plugin with extra link id attribute in TinyMceIntroduce Optimizely CMS Editing is using TinyMce for editing rich-text content. We need to use this control a lot in CMS site for kind of WYSWYG content. I feel quite happy to use it and one of reason that I like to use tinymce is easy to customization. We can add available plug-ins that we want into toolbar only via configuration in server code. We also can build new plug-ins via javascript and register them in server code to use.  Today, I want to share the way to add a new plug-in as same epi link plug-in with adding more extra id attribute. Step 1: Create new Link Model in server code with Link Id attribute. Currenty, Link Editor control is using kind of this model type to render to corresponding user interface. <pre class="language-csharp"><code>using EPiServer.Cms.Shell.UI.ObjectEditing.InternalMetadata; using System.ComponentModel; namespace Sample_Sites.Models { public class CustomLinkModel : LinkModel { [DisplayName("Link Id")] public string LinkId { get; set; } } }</code></pre> Step 2: Create TinyMce plug-in via javascript named customLink.js under folder "wwwroot/ClientResources/Scripts/tinymce-plugins". In this example, I use Dojo module to do it because I want to re-use code of epi link plug-in. But  you can completely use vanilla javascript to create plug-in only with using  tinymce.PluginManager.add to add new button in TinyMce toolbar Here is the place that I change to indicate using our custom link model for Link Editor instead of default one <pre class="language-javascript"><code> var linkEditor = new LinkEditor({ baseClass: "epi-link-item", modelType: "Sample_Sites.Models.CustomLinkModel", hiddenFields: ["text"] // hide text field from UI });</code></pre> Here is the place that I change to read Id value from a element <pre class="language-javascript"><code>if (href.length) { linkObject.href = href; linkObject.targetName = dom.getAttrib(selectedLink, "target"); linkObject.title = dom.getAttrib(selectedLink, "title"); linkObject.linkId = dom.getAttrib(selectedLink, "id"); }</code></pre> Here is the place that I change to set Id attribute for a element <pre class="language-javascript"><code> var callbackMethod = function (value) { if (value && value.href) { var linkAttributes = { href: value.href, title: value.title, target: value.target ? value.target : null, id: value.linkId ? value.linkId : null };</code></pre> Here is full javascript file for custom link plug-in: <pre class="language-javascript"><code>define("alloy/tinymce-plugins/customLink", [ "dojo/_base/lang", "dojo/on", "epi/shell/widget/dialog/Dialog", "epi-cms/ApplicationSettings", "epi-cms/widget/LinkEditor", "epi-addon-tinymce/tinymce-loader", "epi-addon-tinymce/plugins/epi-link/linkViewModel", "epi/i18n!epi/cms/nls/episerver.cms.widget.editlink", "epi/i18n!epi/cms/nls/episerver.cms.tinymce.plugins.epilink" ], function (lang, on, Dialog, ApplicationSettings, LinkEditor, tinymce, linkViewModel, resource, pluginResource) { tinymce.PluginManager.add("custom-link", function (editor) { function mceEPiLink() { var href = "", s = editor.selection, dom = editor.dom, linkObject = {}; // CMS-20837: when users use the search function of Chrome (ctrl+f), the highlighted text will be un-highlighted // clone the selection here so it will not be affected by Chrome. var originalSelection = editor.selection.getRng().cloneRange(); // When link is at the beginning of a paragraph, then IE (and FF?) returns the paragraph from getNode, // the getStart() and getEnd() however returns the anchor. var node = s.getStart() === s.getEnd() ? s.getStart() : s.getNode(), selectedLink = linkViewModel.getAnchorElement(editor, node); // No selection and not in link if (s.isCollapsed() && !selectedLink) { return; } if (selectedLink) { href = dom.getAttrib(selectedLink, "href"); } if (href.length) { linkObject.href = href; linkObject.targetName = dom.getAttrib(selectedLink, "target"); linkObject.title = dom.getAttrib(selectedLink, "title"); linkObject.linkId = dom.getAttrib(selectedLink, "id"); } var callbackMethod = function (value) { if (value && value.href) { var linkAttributes = { href: value.href, title: value.title, target: value.target ? value.target : null, id: value.linkId ? value.linkId : null }; // CMS-20837: and set the selection again if selection lost its value. if (!editor.selection.getContent({ format: "html" })) { editor.selection.setRng(originalSelection); } if (selectedLink) { dom.setAttribs(selectedLink, linkAttributes); } else { if (linkViewModel._isImageFigure(node)) { linkViewModel.linkImageFigure(editor, node, linkAttributes); } else { // When opening the link properties dialog in OPE mode an inline iframe is used rather than a popup window. // When using IE clicking in this iframe causes the selection to collapse in the TinyMCE iframe which // breaks the link creation immediately below. The workaround is to store the selection range before // opening, and restoring it before creating the link. s.setRng(s.getRng()); // To make sure we dont get nested links and have the same behavior as the default tiny // link dialog we unlink any links in the selection before we create the new link. editor.getDoc().execCommand("unlink", false, null); editor.execCommand("mceInsertLink", false, "#mce_temp_url#", { skip_undo: 1 }); var elementArray = tinymce.grep(dom.select("a"), function (n) { return dom.getAttrib(n, "href") === "#mce_temp_url#"; }); for (var i = 0; i < elementArray.length; i++) { dom.setAttribs(elementArray[i], linkAttributes); } //move selection into the link content to be able to recognize it when looking at selection if (elementArray.length > 0) { var range = editor.dom.createRng(); range.selectNodeContents(elementArray[0]); editor.selection.setRng(range); } } } } else if (selectedLink) { // pressed delete? dom.setOuterHTML(selectedLink, selectedLink.innerHTML); editor.undoManager.add(); } }; linkObject.target = linkViewModel.findFrameId(ApplicationSettings.frames, linkObject.targetName); var linkEditor = new LinkEditor({ baseClass: "epi-link-item", //TODO: hardcoded for now modelType: "Sample_Sites.Models.CustomLinkModel", hiddenFields: ["text"] // hide text field from UI }); //Find all Anchors in the document and add them to the Anchor list var allLinks = editor.getDoc().querySelectorAll("a[id],a[name]"); // If the user is using IE 11 or lower we need to convert the // nodeList to a regular array // HACK: IE11 if (tinymce.Env.ie && tinymce.Env.ie < 12) { allLinks = Array.prototype.slice.call(allLinks); } var anchors = linkViewModel.findNamedAnchors(allLinks); linkEditor.on("fieldCreated", function (fieldname, widget) { if (fieldname === "href") { // in this case, widget is HyperLinkSelector var hyperLinkSelector = widget; var anchor = linkViewModel.getFirstAnchorWidget(hyperLinkSelector.get("wrappers")); if (anchor && anchor.inputWidget) { anchor.inputWidget.set("selections", anchors); } else { widget.on("selectorsCreated", function (hyperLinkSelector) { // when all selector have been created var anchorWidget = linkViewModel.getFirstAnchorWidget(hyperLinkSelector.get("wrappers")); if (anchorWidget && anchorWidget.inputWidget) { anchorWidget.inputWidget.set("selections", anchors); anchorWidget.domNode.style.display = "block"; } }); } if (anchor) { anchor.domNode.style.display = "block"; } } }); var dialogTitle = lang.replace(selectedLink ? resource.title.template.edit : resource.title.template.create, resource.title.action); var dialog = new Dialog({ title: dialogTitle, dialogClass: "epi-dialog-portrait", content: linkEditor, defaultActionsVisible: false }); dialog.startup(); //Set the value when the provider/consumer has been initialized linkEditor.set("value", linkObject); dialog.show(); editor.fire("OpenWindow", { win: null }); dialog.on("execute", function () { var value = linkEditor.get("value"); var linkObject = lang.clone(value); if (linkObject && linkObject.target) { // get target frame name, instead of integer value linkObject.target = linkViewModel.findFrameName(ApplicationSettings.frames, linkObject.target); } //Destroy the editor when the dialog closes linkEditor.destroy(); linkEditor = null; callbackMethod(linkObject); }); dialog.on("hide", function () { editor.fire("CloseWindow", { win: null }); }); } // Register buttons editor.ui.registry.addToggleButton("custom-link", { tooltip: pluginResource.title, onAction: mceEPiLink, icon: "link", onSetup: function (buttonApi) { function selectionChange(e) { var anchorElement = linkViewModel.getAnchorElement(editor, e.element); var invalidSelection = !linkViewModel.hasValidSelection(editor, e.element); buttonApi.setEnabled(!(invalidSelection && !anchorElement)); buttonApi.setActive(!editor.readonly && !!anchorElement); } editor.on("SelectionChange", selectionChange); return function () { editor.off("SelectionChange", selectionChange); }; } }); editor.shortcuts.add("ctrl+k", pluginResource.title, mceEPiLink); return { getMetadata: function () { return { name: "Link (epi)", url: "https://www.optimizely.com" }; } }; }); }); dojo.require("alloy/tinymce-plugins/customLink");</code></pre> Last step: Add TinyMce configuration with adding your custom plug-in in the toolbar <pre class="language-csharp"><code>services.Configure<TinyMceConfiguration>(config => { config.InheritSettingsFromAncestor = true; config.Default() .AddExternalPlugin("custom-link", "/ClientResources/Scripts/tinymce-plugins/customLink.js") .Toolbar("styles | bold italic underline | custom-link anchor | image epi-image-editor epi-personalized-content | bullist numlist outdent indent | epi-dnd-processor | removeformat | fullscreen code") .AddPlugin("code"); });</code></pre> Finally, check if the plugin is displayed in the TinyMCE editor in Edit Mode. Thankfully, it works! :) <img src="/link/af7f8e03f2ea4f36a3dd26ca1962827b.aspx" width="1491" height="793" /> You can see this link <a href="https://tedgustaf.com/blog/2022/adding-custom-tinymce-plugin-to-the-html-editor-in-optimizely-cms/">https://tedgustaf.com/blog/2022/adding-custom-tinymce-plugin-to-the-html-editor-in-optimizely-cms/</a> to know how to add a new TinyMce plug-in in general2024-07-13T09:10:24.0000000Z

Blog post

Optimizely Search and Navigation - Part 2 - Filter Tips<h3>Introduction</h3> Continuing from <a href="#link-to-part-1">Part 1 – Search Tips</a>, today I will share the next part – filter tips. The platform versions used for this article are Optimizely CMS 12.27.x, Optimizely Customized Commerce 14.21.x, and EpiServer.Find 16.1.x. <h3>How to Add a New Custom Filter</h3> In the built-in Optimizely Search & Navigation, the default filters are as follows: <ul> <li>And Filter</li> <li>Bool Filter</li> <li>Exists Filter</li> <li>Geo Distance Filter</li> <li>Geo Distance Range Filter</li> <li>Geo Polygon Filter</li> <li>Has Child Filter</li> <li>Ids Filter</li> <li>Kilometers Filter</li> <li>Nested Filter</li> <li>Not Filter</li> <li>Or Filter</li> <li>Prefix Filter</li> <li>Query Filter</li> <li>Range Filter</li> <li>Script Filter</li> <li>Term Filter</li> </ul> These filters generate corresponding body text when sending requests to Elasticsearch through the Search & Navigation framework using JSON converters. What if a filter exists in Elasticsearch but not in Search & Navigation, or an existing filter lacks required parameters? Can you create a new filter? Yes, you can add new custom filters in Search & Navigation. Here's how to build a new Regular Expression filter. <h4>Step 1: Create a New DTO Based on Filter Class</h4> <pre class="language-csharp"><code>[JsonConverter(typeof(RegularExpressionFilterConverter))] public class RegularExpressionFilter : Filter { [JsonIgnore] public string Field { get; set; } [JsonProperty("value")] public string Value { get; set; } public RegularExpressionFilter(string field, string value) { Field = field; Value = value; } }</code></pre> <h4>Step 2: Create a New JSON Converter for the New Filter</h4> <pre class="language-csharp"><code>internal class RegularExpressionFilterConverter : CustomWriteConverterBase<RegularExpressionFilter> { public override void WriteJson(JsonWriter writer, object value, JsonSerializer serializer) { if (value is not RegularExpressionFilter) { writer.WriteNull(); return; } var regularExpressionFilter = (RegularExpressionFilter)value; writer.WriteStartObject(); writer.WritePropertyName("regexp"); writer.WriteStartObject(); writer.WritePropertyName(regularExpressionFilter.Field); serializer.Serialize(writer, regularExpressionFilter.Value); writer.WriteEndObject(); writer.WriteEndObject(); } }</code></pre> <h4>Step 3: Create a New Filter Method for Your Search</h4> <pre class="language-csharp"><code>public static DelegateFilterBuilder MatchRegularExpression(this string value, string input) { return new DelegateFilterBuilder((string field) => new RegularExpressionFilter(field, input)); }</code></pre> <h4>Step 4: Apply the New Filter to Your Search</h4> <pre class="language-csharp"><code>if (!string.IsNullOrEmpty(filterOptions.Q)){ query = query.Filter(x => x.Name.MatchRegularExpression(filterOptions.Q)); }</code></pre> The keyword for search in this example could be text within regular expression syntax. You can find syntax for ElasticSearch <a href="https://www.elastic.co/guide/en/elasticsearch/reference/current/regexp-syntax.html">here</a>. <h3>How to Apply AND/OR for a Group of Sub Filters</h3> Consider the following example: You have a product content type with these properties: <pre class="language-csharp"><code>[Display(Name = "On sale", GroupName = SystemTabNames.Content, Order = 50)] public virtual bool OnSale { get; set; } [Display(Name = "New arrival", GroupName = SystemTabNames.Content, Order = 55)] public virtual bool NewArrival { get; set; } [Display(Name = "Best seller", GroupName = SystemTabNames.Content, Order = 58)] public virtual bool BestSeller { get; set; }</code></pre> To find products that are on sale and/or new arrivals, you can: Use AND/OR Operator in FilterExpression: <ul> <li>AND operator</li> </ul> <pre class="language-csharp"><code>query = query.Filter(x => x.OnSale.Match(true) & x.NewArrival.Match(true));</code></pre> <ul> <li> OR operator</li> </ul> <pre class="language-csharp"><code>query = query.Filter(x => x.OnSale.Match(true) | x.NewArrival.Match(true));</code></pre> Use AND/OR Filter: <ul> <li>AND filter</li> </ul> <pre class="language-csharp"><code>var andFilter = new AndFilter(); andFilter.Filters.Add(new TermFilter(searchClient.GetFullFieldName("OnSale", typeof(bool)), true)); andFilter.Filters.Add(new TermFilter(searchClient.GetFullFieldName("NewArrival", typeof(bool)), true)); query = query.Filter(andFilter);</code></pre> <ul> <li> OR Filter </li> </ul> <pre class="language-csharp"><code>var orFilter = new OrFilter(); orFilter.Filters.Add(new TermFilter(searchClient.GetFullFieldName("OnSale", typeof(bool)), true)); orFilter.Filters.Add(new TermFilter(searchClient.GetFullFieldName("NewArrival", typeof(bool)), true)); query = query.Filter(orFilter);</code></pre> Note that the field name understood by Elasticsearch is not the same as the field name in the Optimizely Content Type Model. Use the following method to get the indexed field name: <pre class="language-csharp"><code>public static string GetFullFieldName(this IClient searchClient, string fieldName, Type type) { if (type != null) return fieldName + searchClient.Conventions.FieldNameConvention.GetFieldName(Expression.Variable(type, fieldName)); return fieldName; }</code></pre> Pros and Cons: <ul> <li>Using AND/OR Operator: Short and easy to use but not suitable for dynamically building filters.</li> <li>Using AND/OR Filter: Longer code but allows for flexible filter building based on field names and input values.</li> </ul> <h3>How to Sort Search Results Based on a Set of Conditions</h3> Search & Navigation allows sorting based on one or more fields: <pre class="language-csharp"><code>query = query.OrderBy(x => x.Name).ThenByDescending(x => x.StartPublish);</code></pre> Example Requirement: Display best seller products at the top, followed by new arrivals, and then on sale products. You can achieve this by using boost matching: <pre class="language-csharp"><code>query = query.BoostMatching(x => (x as GenericProduct).NewArrival.Match(true), 2); query = query.BoostMatching(x => (x as GenericProduct).OnSale.Match(true), 3); query = query.BoostMatching(x => (x as GenericProduct).BestSeller.Match(true), 4);</code></pre> Issue: If a product is both on sale and a new arrival, it appears at the top even if it is not a best seller. The score of this product (5) is higher than that of a best seller (4). Solution: Ensure best sellers are always on top by setting Boost value as following rule: Next boost value = total of all previous boost values + 1: <pre class="language-csharp"><code>query = query.BoostMatching(x => (x as GenericProduct).NewArrival.Match(true), 2); query = query.BoostMatching(x => (x as GenericProduct).OnSale.Match(true), 3); query = query.BoostMatching(x => (x as GenericProduct).BestSeller.Match(true), 6);</code></pre> <h3>Conclusion</h3> These tips are based on my experience with Search & Navigation. I hope they help you implement similar features. Enjoy coding!2024-07-01T08:44:17.0000000Z

Blog post

Optimizely Search and Navigation – Part 1 – Search TipsIntroduction Search and Navigation is a cloud service provided by Optimizely to support building search functionality for both Optimizely CMS and Optimizely Commerce sites. This platform uses Elasticsearch behind the scenes to serve search, filter, facet, and indexing functionalities with the strong capabilities of Elasticsearch. I have experience applying Search & Navigation to both CMS and Commerce projects. So today, I will share some tips for searching with you. Which version of Optimizely CMS and Search & Navigation The platform versions that I am using for this article are Optimizely CMS 12.27.x and EpiServer.Find 16.1.x Difference between search and filter Search Concept: <ul> <li>The search concept in Elasticsearch refers to the process of querying the index to retrieve documents that match certain criteria.</li> <li>When you perform a search, Elasticsearch calculates a relevance score for each document based on how well it matches the query.</li> <li>Search queries can be performed using various query DSL (Domain Specific Language) constructs such as match queries, term queries, range queries, etc.</li> <li>Search results are typically sorted by relevance, ut you can also specify sorting criteria based on specific fields.</li> </ul> Filter Concept: <ul> <li>Filters, on the other hand, are used to narrow down the set of documents returned by a query without affecting the relevance scores.</li> <li>Filters are typically used for exact matches or ranges and are applied to the documents after the initial search.</li> <li>Filters can significantly improve the performance of queries, especially for frequently used and static criteria.</li> <li>Unlike search queries, filters are not scored, so they are faster but less flexible in terms of matching documents.</li> </ul> In summary, while both searches and filters are used to retrieve documents from Elasticsearch, searches are used to find documents based on relevance scores calculated against the query, while filters are used to narrow down the set of documents without affecting relevance scoring. How to apply free-text search with contains operator We can apply the contains operator for free-text search by using wildcard as follows: <pre class="language-csharp"><code>query = query.For(searchTerm, options => { options.Query = $"*{searchTerm}*"; options.AllowLeadingWildcard = true; options.AnalyzeWildcard = true; options.RawQuery = searchTerm; });</code></pre> AllowLeadingWildcard: If true, the wildcard characters * and ? are allowed as the first character of the query string. Defaults to true AnalyzeWildcard: If true, the query attempts to analyze wildcard terms in the query string. Defaults to false. The below image is the result when I find products via free-text search - contains operator - In Name field: <img src="/link/c9616cd10f8f4d138ee31c9017392333.aspx" /> How free-text search works if a search term contains multiple words Actually, when we do a free-text search with For method by default then your search term will be analyzed to separated words and do search by separated words with OR operator by default. You can change the operator to AND by this setting: <pre class="language-csharp"><code>query = query.For(searchTerm, options => { options.DefaultOperator = EPiServer.Find.Api.Querying.Queries.BooleanOperator.And; })});</code></pre> OR <pre class="language-csharp"><code>query = query.For(searchTerm) }).WithAndAsDefaultOperator();</code></pre> The below image is the result when I find products via free-text search - AND operator - In Name field: <img src="/link/10be03209e0f417780dcca3ce698c49a.aspx" /> Note: The AND operator here means that search results should contain all words in the search term without order respect. How to apply the free-text search for the whole phrase Sometimes you want to search contents by the exact word or phrase that you input. So in order to apply the free-text search for the whole phrase, you can wrap your phrase with this format “{words}” like this: <pre class="language-csharp"><code>query = query.For($”\”{searchTerm}\””);</code></pre> The below image is the result when I find products via free-text search - whole phrase matching - In Name field: <img src="/link/69d7239382aa43bab9c3d3a5e489b6de.aspx" /> How to apply fuzzy search Fuzzy search can be used to search for content even when the user makes typographical errors, or when you want to return all search results that match the exact keyword as well as the approximate keyword. However, you need to consider whether you really want to use fuzzy search or not because it does not perform as well as normal free-text search. Here is a way that I used to apply fuzzy search: First, adding an extension method to build a fuzzy query <pre class="language-csharp"><code>public static ITypeSearch<TSource> FuzzySearch<TSource>(this ITypeSearch<TSource> search, string query, Expression<Func<TSource, string>> fieldSelector, double minSimilarity, int? prefixLength) { return new Search<TSource, QueryStringQuery>( search, (ISearchContext context) => { if (minSimilarity <= 0 || minSimilarity >= 1) { return; } var boolQuery = new BoolQuery(); boolQuery.MinimumNumberShouldMatch = 1; boolQuery.Should.Add(context.RequestBody.Query); var fieldNameForSearch = search.Client.Conventions.FieldNameConvention .GetFieldNameForAnalyzed(fieldSelector); var fuzzyQuery = new FuzzyQuery(fieldNameForSearch, query) { MinSimilarity = minSimilarity, PrefixLength = prefixLength, Boost = 0.5, }; boolQuery.Should.Add(fuzzyQuery); context.RequestBody.Query = boolQuery; }); }</code></pre> MinSimilarity: It means the minimum similarity is acceptable to fit the result PrefixLength: Number of beginning characters left unchanged for fuzzy matching. Defaults to 0 Boost: Factor for relevance score of fuzzy query. The default is 1. But we can change it based on our purpose to make sure the default result order based on the score as your expectation.  Second, you can use this method for your search object as follows: <pre class="language-csharp"><code>query = query.FuzzySearch(searchTerm, x => x.Name, 0.5, 0);</code></pre> The below image is the result when I find products via fuzzy search - Similarity is 0.5 - In Name field: <img src="/link/76b46e1d5b0e4e11990814555958113d.aspx" /> Note: I tried to apply fuzzy search by this guide <a href="https://docs.developers.optimizely.com/digital-experience-platform/v1.1.0-search-and-navigation/docs/fuzzy-search">https://docs.developers.optimizely.com/digital-experience-platform/v1.1.0-search-and-navigation/docs/fuzzy-search</a> but it does not work with me. I will spend time to dig deeply to find a reason later. How to apply multiple search queries with AND/OR operator If you have more than 1 query and need to define AND/OR operator for them then you can do by using BoolQuery. Here is the way to use BoolQuery for OR: <pre class="language-csharp"><code>var boolQuery = new BoolQuery(); boolQuery.MinimumNumberShouldMatch = 1; boolQuery.Should.Add(subQuery);</code></pre> Here is the way to use BoolQuery for AND: <pre class="language-csharp"><code>var boolQuery = new BoolQuery(); boolQuery.Must.Add(subQuery);</code></pre> Or AND for negative queries <pre class="language-csharp"><code>var boolQuery = new BoolQuery(); boolQuery.MustNot.Add(subQuery);</code></pre> Conclusion In my opinion, using Search & Navigation is still a good choice when you need a search solution for your application. It uses Elasticsearch behind the scenes with a lot of available support for search, filtering, paging, faceting, and statistics, among other features. I hope that the search tips above can help you when applying Search & Navigation to your project.2024-05-22T03:59:03.0000000Z

Blog post

Optimizely Forms - How to add extra data automatically into submissionSome words about Optimizely Forms Optimizely Forms is a built-in add-on by Optimizely development team that enables to create forms dynamically via block-based approach. Developers could install Optimizely Forms to any Optimizely CMS or Customized Commerce site via installing nuget package. It allows content editors to create forms dynamically as a normal block, dragging and dropping available form elements such as text box, text area, date time, file upload, image...etc into form container block. So editors can design easily any form with needed controls and re-use it at any pages for vary contexts such as user survey, user registration, user feedback, user support. Once users submit form then data will be saved into database permanently by default. Moreover, we also can send submission data to third parties via connectors for auto-marketing purpose. Here is illustrated image about creating form in Edit User Interface <img src="/link/aa60c69aa37b46d2b4d4a8afbf9a2f8f.aspx" /> After creating form then placing form in pages then users can see it when viewing page like this below <img src="/link/1ad7ee167fcf4ef48f5df54c65e912ca.aspx" /> How Optimizely Forms works The below image illustrates about how to apply Optimizely Forms and how it works  <img src="/link/e4783c35984a41b881f65fbdb61f26b0.aspx" /> So as a developer, I realized that we can do a lot of customization around Optimizely Forms such as creating new form elements, adding more extra post submission actors, implementing custom connector. Recently, I got a requirement that the client want to have some extra data in all submission data such as page url, page category. These extra fields must be stored in database, showed in form submissions view and exporting files as well. This below image shows how to submission data is displayed in backend user interface. <img src="/link/6d6ee420f4ed4343a3d6aa2077e34a98.aspx" /> You can see data in blue border is filled data by users, data in orange border is system data – they are not data filled by user. Is it possible to add more data as same as default system data? Yes. We can do customization for it and here is sample code that I want to share How I do to add extra data to submission <ul> <li>First, we need a new post submission actor to add extra data to submission data. This actor should be run first by setting order to make sure that extra data is always added to submission data before all other actors.</li> </ul> <pre class="language-csharp"><code>public class MoreExtraInformationPostSubmissionActor : PostSubmissionActorBase, ISyncOrderedSubmissionActor { private readonly IUrlResolver _urlResolver; public MoreExtraInformationPostSubmissionActor(IUrlResolver urlResolver) { _urlResolver = urlResolver; } public int Order => 1; public override object Run(object input) { var hostedPageId = SubmissionData.Data["SYSTEMCOLUMN_HostedPage"] as string; if (!string.IsNullOrEmpty(hostedPageId)) { var hostedPageUrl = _urlResolver.GetUrl(new ContentReference(hostedPageId)); SubmissionData.Data.Add("PageUrl", hostedPageUrl); } return new SubmissionActorResult(); } }</code></pre> <ul> <li>In order to display extra data in view and export file here is the thing that we need to add.</li> </ul> <pre class="language-csharp"><code>public class CustomFormRepository : FormRepository { public override IEnumerable<FriendlyNameInfo> GetFriendlyNameInfos(FormIdentity formIden, params Type[] excludedElementBlockTypes) { var friendlyNameInfos = new List<FriendlyNameInfo>(base.GetFriendlyNameInfos(formIden, excludedElementBlockTypes)); friendlyNameInfos.Add(new FriendlyNameInfo() { FormatType = FormatType.String, FriendlyName = "Page Url", ElementId = "PageUrl" }); return friendlyNameInfos; } }</code></pre>   <ul> <li>Finally, need to override default FormRepository by new one by adding this below code in Startup.cs</li> </ul> <pre class="language-csharp"><code> services.AddSingleton<IFormRepository, CustomFormRepository>();</code></pre> The result after applying all above code changes <ul> <li>In Form submissions UI</li> </ul> <img src="/link/bd9ca8388e104ad5a00eee57f50fc559.aspx" /> <ul> <li>In exported file</li> </ul>  <img src="/link/e21224a4289946cda0d695148eb3e8a9.aspx" /> That is all thing that I want to share in this article. I hope that it is helpful for someones. Happy coding!2024-04-29T03:49:42.0000000Z

Blog post

How to add more Content Area Context Menu Item in Optimizely CMS 12Hey folks, today I will share something related to Context Menu customization in the Content Area of Optimizely CMS. As you know, the content area is a crucial property in Optimizely CMS. It enables editors to place blocks onto a page, allowing for flexible rendering based on the chosen blocks. You can see the Content Area Context Menu when editing a page in on-page editing mode or in properties editing mode.  <img src="/link/3676d5be4bc94caa813225a85cfff68d.aspx" /> With the Content Area Context Menu, you can see the following available actions: <ul> <li>Edit: Navigate to the selected block for editing in the current view.</li> <li>Quick Edit: Allows editing of the block within a modal popup in the current view.</li> <li>Personalize: Enables customization of block visibility, specifying who can view the block's content.</li> <li>Move Outside Group: Moves the block out from a personalized group.</li> <li>Display Option: This action is displayed if configurations for display tags are available.</li> <li>Move Up: Shifts the block upwards.</li> <li>Move Down: Shifts the block downwards.</li> <li>Remove: Deletes a block from the Content Area.</li> </ul> So question: Is it possible if you want to add more customized action for block in Content Area as known as menu item in context menu? My answer is: Yes. We could Today, I will show you my way to do it based on my experience in Dojo framework. It may be not the best solution but it works with me. Here are all steps that you can do to add more menu item to Content Area Context Menu. 1. First step, you need to do is creating a content area command because each menu item in the context menu is currently matched to a content area command. Here is the code example for creating a content area command: <pre class="language-javascript"><code>define("alloy/contentediting/command/CustomOption", [ // General application modules "dojo/_base/declare", "dojo/_base/lang", "dojo/when", "epi/dependency", "epi-cms/contentediting/command/_ContentAreaCommand", "epi-cms/contentediting/viewmodel/ContentBlockViewModel" ], function (declare, lang, when, dependency, _ContentAreaCommand, ContentBlockViewModel) { return declare([_ContentAreaCommand], { // label: [public] String // The action text of the command to be used in visual elements. label: "Custom action", // iconClass: [readonly] String // The icon class of the command to be used in visual elements. iconClass: "epi-iconStar", constructor: function () { }, _execute: function () { //Add your logic here when clicking on this action }, _onModelValueChange: function () { // summary: // Updates canExecute after the model value has changed. // tags: // protected var item = this.model; this.set("isAvailable", true); this.set("canExecute", false); if (item && item.contentLink) { this.set("canExecute", true); return; } } }); });</code></pre> 2. Next step is creating new dojo component one for ContentAreaCommands. This component is used to declare context menu in on-page editting mode. <pre class="language-javascript"><code>define("epi-cms/contentediting/command/ContentAreaCommands", [ "dojo/_base/array", "dojo/_base/declare", "dojo/Stateful", "dojo/when", "dijit/Destroyable", "epi-cms/ApplicationSettings", "epi-cms/contentediting/command/BlockRemove", "epi-cms/contentediting/command/BlockEdit", "epi-cms/contentediting/command/ContentAreaItemBlockEdit", "epi-cms/contentediting/command/BlockInlineEdit", "epi-cms/contentediting/command/MoveVisibleToPrevious", "epi-cms/contentediting/command/MoveVisibleToNext", "epi-cms/contentediting/command/Personalize", "epi-cms/contentediting/command/SelectDisplayOption", "epi-cms/contentediting/command/MoveOutsideGroup", "alloy/contentediting/command/CustomOption" ], function (array, declare, Stateful, when, Destroyable, ApplicationSettings, Remove, Edit, ContentAreaItemBlockEdit, InlineEdit, MoveVisibleToPrevious, MoveVisibleToNext, Personalize, SelectDisplayOption, MoveOutsideGroup, CustomOption) { return declare([Stateful, Destroyable], { // tags: // internal commands: null, constructor: function () { this._commandSpliter = this._commandSpliter || new Stateful({ category: "menuWithSeparator" }); this.contentAreaItemBlockEdit = new ContentAreaItemBlockEdit({ category: null }); this.blockInlineEdit = new InlineEdit(); this.moveVisibleToPrevious = new MoveVisibleToPrevious(); this.moveVisibleToNext = new MoveVisibleToNext(); this.customOption = new CustomOption(); this.commands = [ new Edit({ category: null }), this.contentAreaItemBlockEdit, this.blockInlineEdit, this.customOption, this._commandSpliter, new SelectDisplayOption(), this.moveVisibleToPrevious, this.moveVisibleToNext, new Remove() ]; var sectionsVisibility = Object.assign({}, ApplicationSettings.sectionsVisibility); // Only add personalize command if the ui is not limited if (!ApplicationSettings.limitUI && (sectionsVisibility.visitorGroups !== false)) { this.moveOutsideGroup = new MoveOutsideGroup(); this.personalize = new Personalize({ category: null }); this.commands.splice(5, 0, this.personalize, this.moveOutsideGroup); } this.commands.forEach(function (command) { this.own(command); }, this); }, handleDoubleClick: function (itemModel) { if (itemModel.inlineBlockData) { when(this.contentAreaItemBlockEdit.updateModel(itemModel)).then(function () { this.contentAreaItemBlockEdit.execute(); }.bind(this)); } else { when(this.blockInlineEdit.updateModel(itemModel)).then(function () { this.blockInlineEdit.execute(); }.bind(this)); } }, _modelSetter: function (model) { this.model = model; array.forEach(this.commands, function (command) { command.set("model", model); }); } }); });</code></pre> 3. Next step is creating new dojo component one for ContentAreaEditor. This component is used to declare the context menu in properties editting mode <pre class="language-javascript"><code>require({ cache: { 'url:epi-cms/contentediting/editors/templates/ContentAreaEditor.html': "<div class=\"dijitInline\" tabindex=\"-1\" role=\"presentation\">\r\n <div class=\"epi-content-area-header-block\">\r\n <div data-dojo-type=\"epi-cms/contentediting/AllowedTypesList\"\r\n data-dojo-props=\"allowedTypes: this.allowedTypes, restrictedTypes: this.restrictedTypes\"\r\n data-dojo-attach-point=\"allowedTypesHeader\"></div>\r\n </div>\r\n <div class=\"epi-content-area-editor--wide epi-content-area-editor\">\r\n <div data-dojo-attach-point=\"treeNode\"></div>\r\n <div data-dojo-attach-point=\"actionsContainer\" class=\"epi-content-area-actionscontainer\"></div>\r\n </div>\r\n</div>\r\n" } }); define("epi-cms/contentediting/editors/ContentAreaEditor", [ // Dojo "dojo/_base/declare", "dojo/aspect", "dojo/dom-class", "dojo/dom-style", "dojo/on", "dojo/topic", "dojo/when", "dojo/Stateful", //Dijit "dijit/registry", "dijit/_WidgetBase", "dijit/_TemplatedMixin", "dijit/_CssStateMixin", "dijit/_WidgetsInTemplateMixin", // EPi Framework "epi/dependency", "epi/shell/dnd/Target", "epi/shell/command/_CommandProviderMixin", "epi/shell/command/_Command", "epi/shell/applicationSettings", //EPi CMS "epi-cms/contentediting/editors/_ContentAreaTree", "epi-cms/contentediting/editors/_ContentAreaTreeModel", "epi-cms/contentediting/viewmodel/PersonalizedGroupViewModel", "epi-cms/_ContentContextMixin", "epi-cms/ApplicationSettings", "epi-cms/contentediting/viewmodel/ContentAreaViewModel", "epi-cms/core/ContentReference", "epi/shell/widget/ContextMenu", "epi/shell/widget/_ValueRequiredMixin", "epi-cms/widget/overlay/Block", "epi-cms/widget/command/CreateContentFromContentArea", "epi-cms/widget/command/CreateContentFromSelector", "epi-cms/widget/_HasChildDialogMixin", "epi-cms/contentediting/command/BlockRemove", "epi-cms/contentediting/command/BlockConvert", "epi-cms/contentediting/command/BlockEdit", "epi-cms/contentediting/command/ContentAreaItemBlockEdit", "epi-cms/contentediting/command/BlockInlineEdit", "epi-cms/contentediting/command/MoveToPrevious", "epi-cms/contentediting/command/MoveToNext", "epi-cms/contentediting/command/MoveOutsideGroup", "epi-cms/contentediting/command/Personalize", "epi-cms/contentediting/command/SelectDisplayOption", "alloy/contentediting/command/CustomOption", "epi-cms/contentediting/AllowedTypesList", "epi-cms/contentediting/editors/_TextWithActionsMixin", // Resources "dojo/text!epi-cms/contentediting/editors/templates/ContentAreaEditor.html", "epi/i18n!epi/cms/nls/episerver.cms.contentediting.editors.contentarea", "epi/i18n!epi/cms/nls/episerver.cms.widget.overlay.blockarea" ], function ( // Dojo declare, aspect, domClass, domStyle, on, topic, when, Stateful, // Dijit registry, _WidgetBase, _TemplatedMixin, _CssStateMixin, _WidgetsInTemplateMixin, // EPi Framework dependency, Target, _CommandProviderMixin, _Command, shellApplicationSettings, // CMS _ContentAreaTree, _ContentAreaTreeModel, PersonalizedGroupViewModel, _ContentContextMixin, ApplicationSettings, ContentAreaViewModel, ContentReference, ContextMenu, _ValueRequiredMixin, BlockOverlay, CreateContentFromContentArea, CreateContentFromSelector, _HasChildDialogMixin, RemoveCommand, BlockConvertCommand, EditCommand, ContentAreaItemBlockEdit, BlockInlineEdit, MoveToPrevious, MoveToNext, MoveOutsideGroup, Personalize, SelectDisplayOption, CustomOption, AllowedTypesList, // used in template _TextWithActionsMixin, // Resources template, resources, blockAreaRes ) { return declare([ _WidgetBase, _TemplatedMixin, _WidgetsInTemplateMixin, _CssStateMixin, _ValueRequiredMixin, _ContentContextMixin, _CommandProviderMixin, _HasChildDialogMixin, _TextWithActionsMixin ], { // summary: // Editor for ContentArea to be able to edit my content area property in forms mode // This should be a simple, non WYSIWYG listing of the inner content blocks with possibilities to add, remove and rearrange the content. // // tags: // internal // baseClass: [public] String // The widget's base CSS class. baseClass: "epi-content-area-wrapper", emptyClass: "epi-content-area-wrapper--empty", // res: Json object // Language resource res: resources, // templateString: String // UI template for content area editor templateString: template, // value: String // Value of the content area value: null, // multiple: Boolean // Value must be true, otherwise dijit/Form will trea the value as an object instead of an array multiple: true, // parent: Object // Editor wrapper object containe the editor parent: null, // overlayItem: Object // Source overlay of the content area in on page edit mode overlayItem: null, // model: Object // Content area editor view model model: null, // intermediateChanges: Boolean // Inherited from editor interface intermediateChanges: true, // editMode: String // Flags to detect page edit mode (On page edit or Form edit mode or Create content mode) editMode: "onpageedit", // _preventOnBlur: [private] Boolean // When set, the onBlur event is prevented. _preventOnBlur: false, _dndTarget: null, // allowedTypes: [public] Array // The types which are allowed. i.e used for filtering based on AllowedTypesAttribute allowedTypes: null, // restrictedTypes: [public] Array // The types which are restricted. restrictedTypes: null, // actionsResource: [Object] // The resource of actions link actionsResource: blockAreaRes, // actionsResource: [Object] // Name of constructor function of ContentAreaTree class treeClass: _ContentAreaTree, // allowMultipleItems: [Boolean] // Allow dnd multiple items at once allowMultipleItems: true, constructor: function () { this.allowedDndTypes = []; }, onChange: function (value) { // summary: // Called when the value in the widget changes. // tags: // public callback }, onForceChange: function (value) { this.onChange(value); }, _handleModelChange: function (value) { // summary: // Called when the value in the model changes. // tags: // public callback this.validate(); this.onForceChange(value); this._toggleEmptyClass(); if (this.model.selectedItem) { this.updateCommandModel(this.model.selectedItem); } this._toggleActionsContainer(); }, _toggleClass: function (node, className, condition) { (node || this.domNode).classList[condition ? "add" : "remove"](className); }, _toggleEmptyClass: function () { this._toggleClass(this.domNode, this.emptyClass, !this.value || this.value.length <= 0); }, _onBlur: function () { // summary: // Override base to prevent the onBlur from being called when the _preventOnBlur flag is set. // tags: // protected override if (this._preventOnBlur) { return; } this.inherited(arguments); }, focus: function () { // summary: // Focus the tree if there is a value, else focus the create block text. // tags: // public if (this.tree && this.model.get("value").length > 0) { this._focusManager.focus(this.tree.domNode); } else { if (this.textWithLinks) { this.textWithLinks.focus(); } } }, postMixInProperties: function () { this.inherited(arguments); this._commandSpliter = this._commandSpliter || new Stateful({ category: "menuWithSeparator" }); // NOTE: Check for this._commands to allow for mocking the commands without breaking _CommandProviderMixin. this.contentAreaItemBlockEdit = new ContentAreaItemBlockEdit({ category: null, isContentAreaReadonly: this.get("readOnly") }); this.blockInlineEdit = new BlockInlineEdit(); this.movePrevious = new MoveToPrevious(); this.moveNext = new MoveToNext(); this.customOption = new CustomOption(); this.commands = this._commands || [ new EditCommand({ category: null }), this.contentAreaItemBlockEdit, this.blockInlineEdit, this.customOption, this._commandSpliter, new SelectDisplayOption(), this.movePrevious, this.moveNext, new RemoveCommand(), new BlockConvertCommand() ]; this.own(on(this.contentAreaItemBlockEdit, "save", function (inlineBlockData, name) { this._preventOnBlur = false; var value = []; (this.model.getChildren() || []).forEach(function (child) { if (child instanceof PersonalizedGroupViewModel) { (child.getChildren() || []).forEach(function (child) { if (child.id === this.model.selectedItem.id) { child.inlineBlockData = inlineBlockData; child.name = name; } value.push(child); }.bind(this)); } else { if (child.id === this.model.selectedItem.id) { child.inlineBlockData = inlineBlockData; child.name = name; } value.push(child); } }.bind(this)); value = value.map(function (v) { return v.serialize(); }); this.set("value", value); // In order to be able to add a block when creating it from a floating editor // we need to set the editing parameter on the editors parent wrapper to true // since it has been set to false while being suspended when switching to // the secondaryView. this.parent = this.parent || this.getParent(); this.parent.set("editing", true); this.onForceChange(value); // Now call onBlur since it's been prevented using the _preventOnBlur flag. this.onBlur(); }.bind(this))); // Only add personalize command if the ui is not limited if (this._isPersonalizationEnabled()) { this.commands.splice(5, 0, new Personalize({ category: null }), new MoveOutsideGroup() ); } this.commands.forEach(function (command) { this.own(command); }, this); this.own( //Create the view model this.model = this.model || new ContentAreaViewModel({ maxLength: this.maxLength, minLength: this.minLength }), this.treeModel = this.treeModel || new _ContentAreaTreeModel({ model: this.model }), this.model.watch("selectedItem", function (name, oldValue, newValue) { //Update the commands with the selected block this.updateCommandModel(newValue); }.bind(this)), on(this.model, "changed", function () { if (!this._started || this._supressValueChanged) { return; } this._set("value", this.model.get("value")); //Call to the handle model change with the new value this._handleModelChange(this.value); }.bind(this)) ); // personalizationarea isn't an actual type so it needs to be hardcoded like in _ContentAreaTree this.allowedDndTypes.push("personalizationarea"); this.allowedDndTypes.push(this._getInlineBlockDndKey()); if (!this.contentDataStore) { var registry = dependency.resolve("epi.storeregistry"); this.contentDataStore = registry.get("epi.cms.contentdata"); } }, buildRendering: function () { this.inherited(arguments); this.contextMenu = new ContextMenu(); this.contextMenu.addProvider(this); this.own(this.contextMenu); this._setupActions(this.actionsContainer); this.own(this._dndTarget = new Target(this.actionsContainer, { accept: this.allowedDndTypes, reject: this.restrictedDndTypes, isSource: false, alwaysCopy: false, allowMultipleItems: this.allowMultipleItems, insertNodes: function () { } })); this.own(aspect.after(this._dndTarget, "onDropData", function (dndData, source, nodes, copy) { dndData.forEach(function (dndData) { this.model.modify(function () { this.model.addChild(dndData.data); }.bind(this)); }, this); if (!this.tree) { this._createTree(); } }.bind(this), true)); // Handle focus after dropping on the tree or the drop area. We set focus to ourselves so that // it is not left where the drag originated. this.own(aspect.after(this._dndTarget, "onDrop", this.focus.bind(this))); }, postCreate: function () { this.inherited(arguments); this.set("emptyMessage", resources.emptymessage); this._toggleEmptyClass(); if (this.parent && this.overlayItem) { this.own(aspect.after(this.parent, "onStartEdit", function () { this._selectFromOverlay(this.overlayItem.model); }.bind(this))); } this.own(topic.subscribe("/dnd/start", this._startDrag.bind(this))); }, startup: function () { if (this._started) { return; } this.inherited(arguments); this.tree && this.tree.startup(); this.contextMenu.startup(); this._updateStyle(); this.own( this.allowedTypesHeader.watch("hasRestriction", this._updateStyle.bind(this)) ); }, destroy: function () { this.tree && this.tree.destroyRecursive(); this.inherited(arguments); }, isCreateLinkVisible: function () { // summary: // Overridden mixin class, depend on currentMode will show/not create link // tags: // protected return this.model.canCreateBlock(this.allowedTypes, this.restrictedTypes); }, onDialogExecute: function (selectedContent) { if (selectedContent) { this._saveValueAndFireOnChange({ contentLink: new ContentReference(selectedContent.contentLink).createVersionUnspecificReference().toString(), name: selectedContent.name, typeIdentifier: selectedContent.typeIdentifier }); } }, _saveValueAndFireOnChange: function (block) { this._preventOnBlur = false; var value = Object.assign([], this.model.get("value"), true); value.push(block); this.set("value", value); // In order to be able to add a block when creating it from a floating editor // we need to set the editing parameter on the editors parent wrapper to true // since it has been set to false while being suspended when switching to // the secondaryView. this.parent = this.parent || this.getParent(); this.parent.set("editing", true); this.validate(); this.onForceChange(value); // Now call onBlur since it's been prevented using the _preventOnBlur flag. this.onBlur(); }, executeAction: function (actionName) { // summary: // Overridden mixin class executing click actions from textWithLinks widget // actionName: [String] // Action name of link on content area // tags: // public if (actionName === "createnewblock") { // HACK: Preventing the onBlur from being executed so the editor wrapper keeps this editor in editing state this._preventOnBlur = true; // since we're going to create a block, we need to hide all validation tooltips because onBlur is prevented here this.validate(false); var command = shellApplicationSettings.inlineBlocksInContentAreaEnabled ? new CreateContentFromContentArea({ allowedTypes: this.allowedTypes, restrictedTypes: this.restrictedTypes }) : new CreateContentFromSelector({ creatingTypeIdentifier: "episerver.core.blockdata", createAsLocalAsset: true, isInQuickEditMode: this.isInQuickEditMode, quickEditBlockId: this.quickEditBlockId, autoPublish: true, allowedTypes: this.allowedTypes, restrictedTypes: this.restrictedTypes }); command.set("model", { save: this._saveValueAndFireOnChange.bind(this), cancel: function () { this._preventOnBlur = false; this.onBlur(); }.bind(this) }); command.execute(); } }, isValid: function (isFocused) { // summary: // Check if widget's value is valid. // isFocused: // Indicate that the widget is being focused. // tags: // protected // When create block screen is visible, we need to hide all validation messages since onBlur is prevented. return (this._preventOnBlur || !this.required || this.model.get("value").length > 0); }, _setReadOnlyAttr: function (readOnly) { this._set("readOnly", readOnly); this._toggleActionsContainer(); if (this._source) { this._source.isSource = !this.readOnly; } if (this.model) { this.model.set("readOnly", readOnly); } this.tree && this.tree.set("readOnly", readOnly); }, _toggleActionsContainer: function () { // summary: // Hide actions when readonly or editor has reached the items limit // tags: // private var visible = !this.model.hasReachedItemsLimit() && !this.get("readOnly"); domStyle.set(this.actionsContainer, "display", visible ? "" : "none"); }, _checkAcceptance: function (source, nodes) { // summary: // Customize checkAcceptance func // source: Object // The source which provides items // nodes: Array // The list of transferred items return this.readOnly ? false : this._source.defaultCheckAcceptance(source, nodes) && !this.model.hasReachedItemsLimit(); }, _createTree: function () { // summary: // Creates the tree widget // tags: // private //Create the tree this.tree = new this.treeClass({ accept: this.allowedDndTypes, reject: this.restrictedDndTypes, contextMenu: this.contextMenu, model: this.treeModel, readOnly: this.readOnly, inlineBlockDndKey: this._getInlineBlockDndKey(), inlineBlockNameProperties: this.inlineBlockNameProperties }).placeAt(this.treeNode); this.tree.own(on(this.tree, "dblclick", function (itemModel) { if (itemModel.inlineBlockData) { when(this.contentAreaItemBlockEdit.updateModel(itemModel)).then(function () { this.contentAreaItemBlockEdit.execute(); }.bind(this)); } else { when(this.blockInlineEdit.updateModel(itemModel)).then(function () { this.blockInlineEdit.execute(); }.bind(this)); } }.bind(this))); this.tree.own( aspect.after(this.tree.dndController, "onDndEnd", this.focus.bind(this)) ); }, _selectFromOverlay: function (overlayModel) { var child = overlayModel && overlayModel.selectedItem && overlayModel.selectedItem.serialize(), model = this.model, path = ["root"]; // exit if there is no overlay model to select item if (!child) { return; } if (child.contentGroup) { model = model.getChild({ name: child.contentGroup }); path.push(model.id); } model = model.getChild(child); if (!model) { return; } path.push(model.id); model.set("selected", true); model.set("ensurePersonalization", overlayModel.selectedItem.ensurePersonalization); // TODO: move this selection into tree instead this.tree && this.tree.set("path", path); }, _startDrag: function (source, nodes, copy) { var accepted = this._dndTarget.accept && this._dndTarget.checkAcceptance(source, nodes); domClass.toggle(this.domNode, "dojoDndTargetDisabled", !accepted); // close the editor when user start draging Block from BlockArea //TODO: This widget should not call a method on the parent var widget = registry.getEnclosingWidget(nodes[0]); if (widget && widget.isInstanceOf(BlockOverlay) && this.parent && this.parent.cancel) { // We set isModified to false (default value) because always synchronize value // between OPE and Editor this.parent.set("isModified", false); this.parent.cancel(); } }, _ensureNonBrokenContentAreaItems: function (value) { var itemsList = value || []; itemsList.forEach(function (item) { if (!item || (!item.contentLink && !item.inlineBlockData)) { item.isBrokenLink = true; item.name = resources.brokenlink; } }); return itemsList; }, _setValueAttr: function (value) { value = this._ensureNonBrokenContentAreaItems(value); // Destroy the tree since that is the fastest way to remove all items this.tree && this.tree.destroyRecursive(); this._set("value", value); this._supressValueChanged = true; this.model.set("value", value); this._supressValueChanged = false; // Create the tree again after the value has been set so // all tree nodes are created in one go this._createTree(); this._toggleEmptyClass(); this._toggleActionsContainer(); }, _updateStyle: function () { // summary: // Handle the widget style depending on the allowedTypesList visibility if (!this.domNode) { return; } if (this.allowedTypesHeader.get("hasRestriction")) { domClass.remove(this.domNode, "allowed-types-list-hidden"); } else { domClass.add(this.domNode, "allowed-types-list-hidden"); } }, _isPersonalizationEnabled: function () { var sectionsVisibility = Object.assign({}, ApplicationSettings.sectionsVisibility); if (sectionsVisibility.visitorGroups === false) { return false; } return !ApplicationSettings.limitUI; }, _getInlineBlockDndKey: function () { return this.name + "_contentarea-inline-block"; } }); }); </code></pre> 4. Last one, add overrided dojo components into module config as epi base resource to load customized resources once loading epi base resource <pre class="language-markup"><code><?xml version="1.0" encoding="utf-8"?> <module loadFromBin="false" clientResourceRelativePath="" viewEngine="Razor" moduleJsonSerializerType="None" preferredUiJsonSerializerType="Net"> <dojo> <paths> <add name="alloy" path="ClientResources/Scripts" /> </paths> </dojo> <clientResources> <add name="epi-cms.widgets.base" path="ClientResources/Scripts/contentediting/command/ContentAreaCommands.js" resourceType="Script" /> <add name="epi-cms.widgets.base" path="ClientResources/Scripts/editors/ContentAreaEditor.js" resourceType="Script" /> </clientResources> </module></code></pre> I hope this article will help some of you somehow. Enjoy reading!2024-02-25T09:37:28.0000000Z

Blog post

How to apply output cache to Optimizely CMS 12Introduce Optimizely CMS 12 is a platform for content management systems. It is written by .NET 6.0. Actually, the output caching concept has not been yet made it in .NET 6.0 but there is a response caching concept in .NET6.0. You can use response cache to cache output for MVC controllers, MVC action methods, RAZOR pages. Response caching reduces the amount of work the web server performs to generate a response by returning result immediately from cache if it exists instead of running methods again and again. By this way, the performance is improved and server resources are optimized. Step to apply response cache in Optimizely CMS 12 <ul> <li>Step 1: Add [ResponseCache] attribute to the controller/action/razor page that you want:</li> </ul> <pre class="language-csharp"><code> public class StartPageController : PageControllerBase<StartPage> { [ResponseCache(Duration =30, Location = ResponseCacheLocation.Any)] public IActionResult Index(StartPage currentPage) { var model = PageViewModel.Create(currentPage); // Check if it is the StartPage or just a page of the StartPage type. if (SiteDefinition.Current.StartPage.CompareToIgnoreWorkID(currentPage.ContentLink)) { // Connect the view models logotype property to the start page's to make it editable var editHints = ViewData.GetEditHints<PageViewModel<StartPage>, StartPage>(); editHints.AddConnection(m => m.Layout.Logotype, p => p.SiteLogotype); editHints.AddConnection(m => m.Layout.ProductPages, p => p.ProductPageLinks); editHints.AddConnection(m => m.Layout.CompanyInformationPages, p => p.CompanyInformationPageLinks); editHints.AddConnection(m => m.Layout.NewsPages, p => p.NewsPageLinks); editHints.AddConnection(m => m.Layout.CustomerZonePages, p => p.CustomerZonePageLinks); } return View(model); } } </code></pre> Duration=30 will cache the page for 30 seconds Location=ResponseCacheLocation.Any will cache the page in both proxies and client. If you do not apply response cache for certain situation then you can use Location= ResponseCacheLocation.None and NoStore=true <ul> <li>Step 2: Add Response Cache Middleware services to service collection with AddResponseCaching extension method:</li> </ul> <pre class="language-csharp"><code> public void ConfigureServices(IServiceCollection services) { if (_webHostingEnvironment.IsDevelopment()) { AppDomain.CurrentDomain.SetData("DataDirectory", Path.Combine(_webHostingEnvironment.ContentRootPath, "App_Data")); services.Configure<SchedulerOptions>(options => options.Enabled = false); } services .AddCmsAspNetIdentity<ApplicationUser>() .AddCms() .AddCmsTagHelpers() .AddAlloy() .AddAdminUserRegistration() .AddEmbeddedLocalization<Startup>(); // Required by Wangkanai.Detection services.AddDetection(); services.AddSession(options => { options.IdleTimeout = TimeSpan.FromSeconds(10); options.Cookie.HttpOnly = true; options.Cookie.IsEssential = true; }); services.AddControllers(); services.AddResponseCaching(); }</code></pre> <ul> <li>Step 3: Configure the app to use the middleware with the UseResponseCaching extension method:</li> </ul> <pre class="language-csharp"><code> public void Configure(IApplicationBuilder app, IWebHostEnvironment env) { if (env.IsDevelopment()) { app.UseDeveloperExceptionPage(); } // Required by Wangkanai.Detection app.UseDetection(); app.UseSession(); app.UseResponseCaching(); app.UseStaticFiles(); app.UseRouting(); app.UseAuthentication(); app.UseAuthorization(); app.UseEndpoints(endpoints => { endpoints.MapContent(); endpoints.MapControllers(); }); }</code></pre> Please note that if you load a page by pressing F5 key in the browser then the cache for this page is refreshed by adding Cache-Control header to request is “max-age=0”. In order to prevent that, you can add the following middleware before response cache middleware: <pre class="language-csharp"><code> app.Use(async (context, next) => { const string cc = "Cache-Control"; if (context.Request.Headers.ContainsKey(cc) && string.Equals(context.Request.Headers[cc], "max-age=0", StringComparison.InvariantCultureIgnoreCase)) { context.Request.Headers.Remove(cc); } await next(); });</code></pre> How to invalidate cache when the content is changed Actually, the response cache middleware uses MemoryResponseCache by default and this implementation does not support clearing cache. So you can do quickly and dirty to get a new cache by using the content cache version as a query key to vary cache. The content cache version is increased once any content is changed. Here are the steps that you can take to do that: <ul> <li>Add ContentCacheVersion to vary by query keys attribute</li> </ul> <pre class="language-csharp"><code> [ResponseCache(Duration =30, Location = ResponseCacheLocation.Any, VaryByQueryKeys = new string[] { "ContentCacheVersion"})] public IActionResult Index(StartPage currentPage) { var model = PageViewModel.Create(currentPage); // Check if it is the StartPage or just a page of the StartPage type. if (SiteDefinition.Current.StartPage.CompareToIgnoreWorkID(currentPage.ContentLink)) {</code></pre> <ul> <li>Add a middleware before Response Caching Middleware to add content cache version to the query string and add a middleware after Response Caching Middleware to remove this from the query string.</li> </ul> <pre class="language-csharp"><code> app.Use(async (context, next) => { var contentCacheVersion = ServiceLocator.Current.GetInstance<IContentCacheVersion>(); context.Request.QueryString = context.Request.QueryString.Add("ContentCacheVersion", contentCacheVersion.Version.ToString()); await next(); }); app.UseResponseCaching(); app.Use(async (context, next) => { var nameValueCollection = System.Web.HttpUtility.ParseQueryString(context.Request.QueryString.ToString()); nameValueCollection.Remove("ContentCacheVersion"); context.Request.QueryString = new QueryString($"?{nameValueCollection}"); await next(); });</code></pre> How to vary response cache by visitor group It is the same as in the case of changed content, you can do quickly and dirty to add visitor group as a vary by query key like this: <ul> <li>Add VisitorGroup to vary by query keys attribute</li> </ul> <pre class="language-csharp"><code> [ResponseCache(Duration =30, Location = ResponseCacheLocation.Any, VaryByQueryKeys = new string[] { "VisitorGroup"})] public IActionResult Index(StartPage currentPage) { var model = PageViewModel.Create(currentPage); // Check if it is the StartPage or just a page of the StartPage type. if (SiteDefinition.Current.StartPage.CompareToIgnoreWorkID(currentPage.ContentLink)) {</code></pre> <ul> <li>Add a middleware before Response Caching Middleware to add the current visitor group to the query string and add a middleware after Response Caching Middleware to remove it from the query string.</li> </ul> <pre class="language-csharp"><code> app.Use(async (context, next) => { context.Request.QueryString = context.Request.QueryString.Add("VisitorGroup", GetCurrentVisitorGroups(context)); await next(); }); app.UseResponseCaching(); app.Use(async (context, next) => { var nameValueCollection = System.Web.HttpUtility.ParseQueryString(context.Request.QueryString.ToString()); nameValueCollection.Remove("VisitorGroup"); context.Request.QueryString = new QueryString($"?{nameValueCollection}"); await next(); });</code></pre> <ul> <li>Add GetCurrentVisitorGroups method to get visitor groups based on current context</li> </ul> <pre class="language-csharp"><code> private string GetCurrentVisitorGroups(HttpContext context) { var principalAccessor = ServiceLocator.Current.GetInstance<IPrincipalAccessor>(); var visitorGroupRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRepository>(); var visitorGroupRoleRepository = ServiceLocator.Current.GetInstance<IVisitorGroupRoleRepository>(); var roleNames = visitorGroupRepository.List().Select(x => x.Name); var currentGroups = new List<string>(); foreach (var roleName in roleNames) { if (visitorGroupRoleRepository.TryGetRole(roleName, out var role)) { if (role.IsMatch(principalAccessor.Principal, context)) { currentGroups.Add(roleName); } } } return string.Join("|", currentGroups); }</code></pre> That is it. Using this approach, you can apply built-in response cache quickly into Optimizely CMS 12 without customizing too much or using third-party packages. You can see another topic about using third-party output caching package here <a href="https://www.gulla.net/en/blog/quick-and-dirty-output-cache-in-optimizely-cms12/">https://www.gulla.net/en/blog/quick-and-dirty-output-cache-in-optimizely-cms12/</a>   <div class="ddict_btn"><img src="chrome-extension://bpggmmljdiliancllaapiggllnkbjocb/logo/48.png" /></div> <div class="ddict_btn"><img src="chrome-extension://bpggmmljdiliancllaapiggllnkbjocb/logo/48.png" /></div> <div class="ddict_btn"><img src="chrome-extension://bpggmmljdiliancllaapiggllnkbjocb/logo/48.png" /></div>2023-03-17T04:57:59.0000000Z

Blog post

How to route a simple url address within action nameWhat is the simple address in the EpiServer? The simple address is a single segment uniquely identifying content and its language. The simple address can be used as a direct address without parent nodes included in URL. <img src="/link/fc5212912a6a475498cd1a4e00f76984.aspx" /> The situation here You are using simple url address for your CMS pages and there are some pages you want to proceed data that sent from the client. For example: You are in the contact page "{base_url}/contact-page-seo-url", you have a submit form to allow user input data and send back to our system by POST endpoint "{base_url}/contact-page-seo-url/subcription". Actually, you cannot use the endpoint like this, you will get 404 message immediately. Why? I realized that the default simple address route of Episerver always considers that all path after {base_url} is SIMPLE ADDRESS PATH includes ACTION name. So the system cannot route any content that matchs to the simple address "contact-page-seo-url/subcription". How can we solve this problem? Here is it. You need to add more a route to allow that. And we do not need to create any custom route, just do like that <pre class="language-csharp"><code> [InitializableModule] [ModuleDependency(typeof(EPiServer.Commerce.Initialization.InitializationModule))] public partial class SiteInitializationModule : IConfigurableModule { public void Initialize(InitializationEngine context) { RegisterCustomSimpleAddressRoute(context, RouteTable.Routes); } public void ConfigureContainer(ServiceConfigurationContext context) { } public void Uninitialize(InitializationEngine context) { } private static void RegisterCustomSimpleAddressRoute(InitializationEngine context, RouteCollection routes) { var rewriteExtension = Settings.Instance.UrlRewriteExtension; var urlResolver = context.Locate.Advanced.GetInstance<UrlResolver>(); var contentLoader = context.Locate.Advanced.GetInstance<IContentLoader>(); var contentLanguageSettingsHandler = context.Locate.Advanced.GetInstance<IContentLanguageSettingsHandler>(); var basePathResolver = context.Locate.Advanced.GetInstance<IBasePathResolver>(); var addressSegmentRouter = new SimpleAddressSegmentRouter(sd => sd.StartPage); var parameters = new MapContentRouteParameters() { UrlSegmentRouter = addressSegmentRouter, BasePathResolver = basePathResolver.Resolve, Direction = SupportedDirection.Incoming, SegmentMappings = new Dictionary<string, ISegment>() { { RoutingConstants.SimpleAddressKey, new SimpleAddressSegment(RoutingConstants.SimpleAddressKey, rewriteExtension, addressSegmentRouter, contentLoader, urlResolver, contentLanguageSettingsHandler) { MatchOneSegment = true } } } }; routes.MapContentRoute("CustomSimpleAddress", "{simpleaddresslanguage}/{simpleaddress}/{partial}/{action}", (object)new { action = "index" }, parameters); } }</code></pre> Tada, it is not much complicated. You just need to register more another simple address route with parameter "MatchOneSegment = true".  This parameter indicates that only one segment is matching to a certain simple address instead of all segments as default. Hope this help some of you.2020-10-15T02:16:09.0000000Z

Blog post

Lock and Unlock account using AspNet IdentityYou are using AspNet Identity for authentication and want to configure to block user if he/she inputs wrong password over a certainly allowed login attempts. I have had an experience to implement this function in EpiServer version 11 and Microsoft.AspNet.Identity 2.2 Here are steps: 1. Configure user lockout in your ApplicationUserManager as mentioned in <a href="/link/5da1a6cc4d7f4f95a9daf3b5bb726748.aspx">https://world.episerver.com/documentation/developer-guides/CMS/security/episerver-aspnetidentity/</a> <pre class="language-csharp"><code>// Configure user lockout defaults manager.UserLockoutEnabledByDefault = true; //This flag is true it means will enable lockout when users are created. Noticed that a user is locked if LockEnable flag is true and LockoutEndDateUtc is set and greater than now manager.DefaultAccountLockoutTimeSpan = TimeSpan.FromMinutes(60); //User will be locked in 60 minutes manager.MaxFailedAccessAttemptsBeforeLockout = 5; //User will be locked after 5 continuesly failed attempts</code></pre> 2. Pass shouldLockout is true when you call to validate user for login <pre class="language-csharp"><code> var signInStatus = await _signInManager.PasswordSignInAsync(username, password, isPersistent, shouldLockout:true);</code></pre> 3. If there are a lot of existed users that created before turning on user lockout functionality then you should migrate all existed user to enable lockout for them if you want to apply user lockout for all existed users too. You can create an Episerver migration step to do that like this: <pre class="language-csharp"><code> [ServiceConfiguration(typeof(IMigrationStep))] public class EnableUserLockOutMigrationStep : IMigrationStep { private readonly IConnectionStringHandler _connectionHandler; public EnableUserLockOutMigrationStep(IConnectionStringHandler connectionHandler) { this._connectionHandler = connectionHandler; } public bool Execute(IProgressMessenger progressMessenger) { progressMessenger.AddProgressMessageText("Enabling user lockout...", false, 0); try { using (SqlConnection connection = new SqlConnection(this._connectionHandler.Commerce.ConnectionString)) { connection.Open(); using (SqlTransaction transaction = connection.BeginTransaction()) { try { this.CreateCommand(transaction, @"UPDATE [dbo].[AspNetUsers] SET [LockoutEnabled] = 1", 300).ExecuteNonQuery(); transaction.Commit(); } catch (Exception ex) { transaction.Rollback(); connection.Close(); throw new Exception((string)null, ex); } } connection.Close(); } return true; } catch (Exception ex) { progressMessenger.AddProgressMessageText(string.Format((IFormatProvider)CultureInfo.InvariantCulture, "Enable user lockout has failed with exception '{0}'.", (object)ex), true, 0); } return false; } public int Order => 1000; public string Name => "Enable User Lockout"; public string Description => "This is used to turn on Enable User Lockout for existed users"; private SqlCommand CreateCommand( SqlTransaction transaction, string query, int timeout = 30) { return new SqlCommand { Connection = transaction.Connection, Transaction = transaction, CommandType = CommandType.Text, CommandText = query, CommandTimeout = timeout }; } }</code></pre> Tada, it is not too complicated to enable lockout account, right? So what about if you want to unblock account somewhere? I see that we can do that in editing user view in admin mode like that: <img src="/link/a7efb247c6df4eaa896112d856e63ec9.aspx" /> But it seems this function works well if we use Membership Provider for authentication. It does not works if I use Aspnet Identity. I found that the episerver is using IsLockedOut to check lockout status and unblock user by changing IsLockedOut to false. But currently Aspnet Identity uses the LockEnable flag and LockoutEndDateUtc to check lockout status. So the solution that I use to unblock user in Aspnet Identity is creating a custom user that inherited from Application and over IsLockedOut property like this: <pre class="language-csharp"><code> public override bool IsLockedOut { get => LockoutEnabled && LockoutEndDateUtc != null && LockoutEndDateUtc >= DateTime.UtcNow; set { if (!LockoutEnabled || value) return; if (LockoutEndDateUtc != null && LockoutEndDateUtc > DateTime.UtcNow) { LastLockoutDate = LockoutEndDateUtc = DateTime.UtcNow; } AccessFailedCount = 0; } }</code></pre> That is all. Now you can unblock account in Episerver admin mode as usual.2020-04-24T02:41:33.0000000Z

Blog post

Workaround for supporting multilingual promotionDid you use to be bored with old marketing system? The performance when running the old promotion engine or customizing a promotion used to be a big problem. But since the new marketing system was launched, the hard time has been ended. But one good day, you have a customer request that we need to show our promotion name/description in the front view by multiple different languages. For example: there are 2 available languages in our site are English and Sweden. How to do that? We are aware that we could not do that with OOTB's Episerver until now. Although discount data has already been based on IContent but it has some limitations compared to other Episerver content like pages, blocks or catalog contents. So is there any way to workaround with this requirement? The answer here is YES but it is not simple way. Here is my way: 1. Install package EPiServer.VisitorGroupsCriteriaPack. We will use SelectedLanguage criterion for filtering promotions based on the current language 2. Setup 2 visitor groups for English and Sweden <img src="/link/670809ee95dd4ce9869b00a1840846a1.aspx" width="1311" height="584" /> <img src="/link/d74ea300f07f4e928cd8411f84766ce0.aspx" width="1296" height="151" /> 3. Create 2 different campaigns for these two languages and appropriated promotions in these campaigns <img src="/link/172e9b3655d84d31b74d3693bf3f4e7e.aspx" width="1313" height="527" /> <img src="/link/7be7aa1592d24793ab5132c42b784a19.aspx" width="1323" height="541" /> 4. Modiy MarketContentLoader class in QuickSilver sample code a bit to see proper promotions based on the current language in the home page: Using CampaignVisitorGroupFilter to filter campaign based on visitor group <pre class="language-csharp"><code> private readonly CampaignVisitorGroupFilter _campaignVisitorGroupFilter;</code></pre> <pre class="language-csharp"><code>public virtual IList<PromotionData> GetEvaluablePromotionsInPriorityOrderForMarket(IMarket market) { var result = _campaignVisitorGroupFilter.Filter( new PromotionFilterContext(GetPromotions().Where(x => IsValid(x, market)), RequestFulfillmentStatus.All)); return result.IncludedPromotions.OrderBy(x => x.Priority).ToList(); }</code></pre> 5. Finally, let's see the result in the front view <ul> <li>In English</li> </ul> <img src="/link/04073edc2e6c47ebaf737a7ddde05837.aspx" /> <ul> <li>In Sweden</li> </ul> <img src="/link/37e6bcda0e5e4461b97a1a89ac6c68d3.aspx" width="826" height="830" />2019-04-04T03:51:56.0000000Z

Blog post