Blog posts by Binh-Nguyen2025-11-15T11:26:16.0000000Zhttps://world.optimizely.com/blogs/binh-nguyen/Optimizely WorldFull implementation - Fallback languages with Optimizely Graph<p>Nowadays, many people choose a headless approach when developing Optimizely CMS/Commerce projects using Opti Graph.<br />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.</p>
<p><br /><strong>1. In back-end code, add more fallback language property for Graph model:</strong></p>
<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>
<p> </p>
<p><strong>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:</strong><br /><br /></p>
<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>
<p> </p>
<p>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.</p>
<p>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:</p>
<p><br /><img src="/link/86bcc904fdcd4054aa19b44e4160c3a0.aspx" /></p>
<p> </p>
<p>That's all. Hope this makes your multilingual setup a bit easier. Happy coding!</p>2025-11-15T11:26:16.0000000ZBlog postHow to have a link plugin with extra link id attribute in TinyMce<p><strong>Introduce</strong></p>
<p>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.</p>
<p>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. </p>
<p>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.</p>
<p><strong>Step 1: </strong>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.</p>
<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>
<p><strong>Step 2: </strong>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</p>
<p>Here is the place that I change to indicate using our custom link model for Link Editor instead of default one</p>
<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>
<p>Here is the place that I change to read Id value from a element</p>
<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>
<p>Here is the place that I change to set Id attribute for a element</p>
<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>
<p>Here is full javascript file for custom link plug-in:</p>
<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>
<p><strong>Last step: </strong>Add TinyMce configuration with adding your custom plug-in in the toolbar</p>
<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>
<p><strong>Finally, check if the plugin is displayed in the TinyMCE editor in Edit Mode. Thankfully, it works! :)</strong></p>
<p><img src="/link/af7f8e03f2ea4f36a3dd26ca1962827b.aspx" width="1491" height="793" /></p>
<p>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 general</p>2024-07-13T09:10:24.0000000ZBlog postOptimizely Search and Navigation - Part 2 - Filter Tips<h3>Introduction</h3>
<p>Continuing from <a href="#link-to-part-1">Part 1 – Search Tips</a>, today I will share the next part – filter tips.</p>
<p>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.</p>
<h3>How to Add a New Custom Filter</h3>
<p>In the built-in Optimizely Search & Navigation, the default filters are as follows:</p>
<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>
<p>These filters generate corresponding body text when sending requests to Elasticsearch through the Search & Navigation framework using JSON converters.</p>
<p><strong>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?</strong></p>
<p>Yes, you can add new custom filters in Search & Navigation. Here's how to build a new Regular Expression filter.</p>
<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>
<p>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>.</p>
<h3>How to Apply AND/OR for a Group of Sub Filters</h3>
<p>Consider the following example:</p>
<p>You have a product content type with these properties:</p>
<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>
<p>To find products that are on sale and/or new arrivals, you can:</p>
<p><strong>Use AND/OR Operator in FilterExpression:</strong></p>
<ul>
<li><strong>AND operator</strong></li>
</ul>
<pre class="language-csharp"><code>query = query.Filter(x => x.OnSale.Match(true) & x.NewArrival.Match(true));</code></pre>
<ul>
<li><strong> </strong><strong>OR operator</strong></li>
</ul>
<pre class="language-csharp"><code>query = query.Filter(x => x.OnSale.Match(true) | x.NewArrival.Match(true));</code></pre>
<p><strong>Use AND/OR Filter:</strong></p>
<ul>
<li><strong>AND filter</strong></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><strong> </strong><strong>OR Filter </strong></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>
<p>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:</p>
<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>
<p><strong>Pros and Cons:</strong></p>
<ul>
<li><strong>Using AND/OR Operator:</strong> Short and easy to use but not suitable for dynamically building filters.</li>
<li><strong>Using AND/OR Filter:</strong> 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>
<p>Search & Navigation allows sorting based on one or more fields:</p>
<pre class="language-csharp"><code>query = query.OrderBy(x => x.Name).ThenByDescending(x => x.StartPublish);</code></pre>
<p><strong>Example Requirement:</strong> Display best seller products at the top, followed by new arrivals, and then on sale products.</p>
<p>You can achieve this by using boost matching:</p>
<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>
<p><strong>Issue:</strong> 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).</p>
<p><strong>Solution:</strong> Ensure best sellers are always on top by setting Boost value as following rule: Next boost value = total of all previous boost values + 1:</p>
<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>
<p>These tips are based on my experience with Search & Navigation. I hope they help you implement similar features.</p>
<p>Enjoy coding!</p>2024-07-01T08:44:17.0000000ZBlog postOptimizely Search and Navigation – Part 1 – Search Tips<p><span style="font-size: 18pt;"><strong>Introduction</strong></span></p>
<p><span style="font-weight: 400;">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.</span></p>
<p><span style="font-weight: 400;">I have experience applying Search & Navigation to both CMS and Commerce projects. So today, I will share some tips for searching with you.</span></p>
<p><span style="font-size: 18pt;"><strong>Which version of Optimizely CMS and Search & Navigation</strong></span></p>
<p><span style="font-weight: 400;">The platform versions that I am using for this article are Optimizely CMS 12.27.x and EpiServer.Find 16.1.x</span></p>
<p><span style="font-size: 18pt;"><strong>Difference between search and filter</strong></span></p>
<p><strong>Search Concept:</strong></p>
<ul>
<li><span style="font-weight: 400;">The search concept in Elasticsearch refers to the process of querying the index to retrieve documents that match certain criteria.</span></li>
<li><span style="font-weight: 400;">When you perform a search, Elasticsearch calculates a relevance score for each document based on how well it matches the query.</span></li>
<li><span style="font-weight: 400;">Search queries can be performed using various query DSL (Domain Specific Language) constructs such as match queries, term queries, range queries, etc.</span></li>
<li><span style="font-weight: 400;">Search results are typically sorted by relevance, ut you can also specify sorting criteria based on specific fields.</span></li>
</ul>
<p><strong>Filter Concept:</strong></p>
<ul>
<li><span style="font-weight: 400;">Filters, on the other hand, are used to narrow down the set of documents returned by a query without affecting the relevance scores.</span></li>
<li><span style="font-weight: 400;">Filters are typically used for exact matches or ranges and are applied to the documents after the initial search.</span></li>
<li><span style="font-weight: 400;">Filters can significantly improve the performance of queries, especially for frequently used and static criteria.</span></li>
<li><span style="font-weight: 400;">Unlike search queries, filters are not scored, so they are faster but less flexible in terms of matching documents.</span></li>
</ul>
<p><span style="font-weight: 400;">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.</span></p>
<p><span style="font-size: 18pt;"><strong>How to apply free-text search with contains operator</strong></span></p>
<p><span style="font-weight: 400;">We can apply the contains operator for free-text search by using wildcard as follows:</span></p>
<pre class="language-csharp"><code>query = query.For(searchTerm, options => {
options.Query = $"*{searchTerm}*";
options.AllowLeadingWildcard = true;
options.AnalyzeWildcard = true;
options.RawQuery = searchTerm;
});</code></pre>
<p><span style="font-weight: 400;"><em>AllowLeadingWildcard</em>:</span><span style="font-weight: 400;"> If true, the wildcard characters * and ? are allowed as the first character of the query string. Defaults to true</span></p>
<p><span style="font-weight: 400;"><em>AnalyzeWildcard</em>:</span><span style="font-weight: 400;"> If true, the query attempts to analyze wildcard terms in the query string. Defaults to false.</span></p>
<p><span style="font-weight: 400;">The below image</span> is the result when I find products via free-text search - contains operator - In Name field:</p>
<p><span style="font-weight: 400;"><img src="/link/c9616cd10f8f4d138ee31c9017392333.aspx" /></span></p>
<p><span style="font-size: 18pt;"><strong>How free-text search works if a search term contains multiple words</strong></span></p>
<p><span style="font-weight: 400;">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:</span></p>
<pre class="language-csharp"><code>query = query.For(searchTerm, options => {
options.DefaultOperator = EPiServer.Find.Api.Querying.Queries.BooleanOperator.And;
})});</code></pre>
<p>OR</p>
<pre class="language-csharp"><code>query = query.For(searchTerm) }).WithAndAsDefaultOperator();</code></pre>
<p><span style="font-weight: 400;">The below image</span> is the result when I find products via free-text search - AND operator - In Name field:</p>
<p><span style="font-weight: 400;"><img src="/link/10be03209e0f417780dcca3ce698c49a.aspx" /></span></p>
<p><span style="font-weight: 400;"><strong>Note</strong>: The AND operator here means that search results should contain all words in the search term without order respect.</span></p>
<p><span style="font-size: 18pt;"><strong>How to apply the free-text search for the whole phrase</strong></span></p>
<p><span style="font-weight: 400;">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:</span></p>
<pre class="language-csharp"><code>query = query.For($”\”{searchTerm}\””);</code></pre>
<p><span style="font-weight: 400;">The below image</span> is the result when I find products via free-text search - whole phrase matching - In Name field:</p>
<p><img src="/link/69d7239382aa43bab9c3d3a5e489b6de.aspx" /></p>
<p><span style="font-size: 18pt;"><strong>How to apply fuzzy search</strong></span></p>
<p><span style="font-weight: 400;">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.</span></p>
<p><span style="font-weight: 400;">Here is a way that I used to apply fuzzy search:</span></p>
<p><strong>First, adding an extension method to build a fuzzy query</strong></p>
<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>
<p><em><span style="font-weight: 400;">MinSimilarity</span></em><span style="font-weight: 400;">: It means the minimum similarity is acceptable to fit the result</span></p>
<p><em><span style="font-weight: 400;">PrefixLength</span></em><span style="font-weight: 400;">: Number of beginning characters left unchanged for fuzzy matching. Defaults to 0</span></p>
<p><em><span style="font-weight: 400;">Boost</span></em><span style="font-weight: 400;">: 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. </span></p>
<p><strong>Second, you can use this method for your search object as follows:</strong></p>
<pre class="language-csharp"><code>query = query.FuzzySearch(searchTerm, x => x.Name, 0.5, 0);</code></pre>
<p><span style="font-weight: 400;">The below image</span> is the result when I find products via fuzzy search - Similarity is 0.5 - In Name field:</p>
<p><img src="/link/76b46e1d5b0e4e11990814555958113d.aspx" /></p>
<p><span style="font-weight: 400;"><strong>Note</strong>: I tried to apply fuzzy search by this guide </span><a href="https://docs.developers.optimizely.com/digital-experience-platform/v1.1.0-search-and-navigation/docs/fuzzy-search"><span style="font-weight: 400;">https://docs.developers.optimizely.com/digital-experience-platform/v1.1.0-search-and-navigation/docs/fuzzy-search</span></a><span style="font-weight: 400;"> but it does not work with me. I will spend time to dig deeply to find a reason later.</span></p>
<p><span style="font-size: 18pt;"><strong>How to apply multiple search queries with AND/OR operator</strong></span></p>
<p><span style="font-weight: 400;">If you have more than 1 query and need to define AND/OR operator for them then you can do by using BoolQuery.</span></p>
<p><span style="font-weight: 400;">Here is the way to use BoolQuery for OR:</span></p>
<pre class="language-csharp"><code>var boolQuery = new BoolQuery();
boolQuery.MinimumNumberShouldMatch = 1;
boolQuery.Should.Add(subQuery);</code></pre>
<p><span style="font-weight: 400;">Here is the way to use BoolQuery for AND:</span></p>
<pre class="language-csharp"><code>var boolQuery = new BoolQuery();
boolQuery.Must.Add(subQuery);</code></pre>
<p>Or AND for negative queries</p>
<pre class="language-csharp"><code>var boolQuery = new BoolQuery();
boolQuery.MustNot.Add(subQuery);</code></pre>
<p><span style="font-size: 18pt;"><strong>Conclusion</strong></span></p>
<p><span style="font-weight: 400;">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.</span></p>2024-05-22T03:59:03.0000000ZBlog postOptimizely Forms - How to add extra data automatically into submission<p><strong>Some words about Optimizely Forms</strong></p>
<p>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.</p>
<p>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.</p>
<p>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.</p>
<p>Here is illustrated image about creating form in Edit User Interface</p>
<p><img src="/link/aa60c69aa37b46d2b4d4a8afbf9a2f8f.aspx" /></p>
<p>After creating form then placing form in pages then users can see it when viewing page like this below</p>
<p><img src="/link/1ad7ee167fcf4ef48f5df54c65e912ca.aspx" /></p>
<p><strong>How Optimizely Forms works</strong></p>
<p>The below image illustrates about how to apply Optimizely Forms and how it works</p>
<p><strong> </strong></p>
<p><strong> <img src="/link/e4783c35984a41b881f65fbdb61f26b0.aspx" /></strong></p>
<p>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.</p>
<p>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.</p>
<p>This below image shows how to submission data is displayed in backend user interface.</p>
<p><img src="/link/6d6ee420f4ed4343a3d6aa2077e34a98.aspx" /></p>
<p><strong> </strong></p>
<p>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</p>
<p><strong>How I do to add extra data to submission</strong></p>
<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>
<p> </p>
<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>
<p><strong>The result after applying all above code changes</strong></p>
<ul>
<li>In Form submissions UI</li>
</ul>
<p><img src="/link/bd9ca8388e104ad5a00eee57f50fc559.aspx" /></p>
<ul>
<li>In exported file</li>
</ul>
<p> <img src="/link/e21224a4289946cda0d695148eb3e8a9.aspx" /></p>
<p>That is all thing that I want to share in this article. I hope that it is helpful for someones. Happy coding!</p>2024-04-29T03:49:42.0000000ZBlog postHow to add more Content Area Context Menu Item in Optimizely CMS 12<p>Hey folks, today I will share something related to Context Menu customization in the Content Area of Optimizely CMS.</p>
<p>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.</p>
<p>You can see the Content Area Context Menu when editing a page in on-page editing mode or in properties editing mode. </p>
<p><img src="/link/3676d5be4bc94caa813225a85cfff68d.aspx" /></p>
<p>With the Content Area Context Menu, you can see the following available actions:</p>
<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>
<p><span style="font-size: 14pt;">So question:<strong><span style="font-size: 14pt;"> </span>Is it possible if you want to add more customized action for block in Content Area as known as menu item in context menu?</strong></span></p>
<p><span style="font-size: 14pt;">My answer is:<strong><span style="font-size: 14pt;"> </span>Yes. We could</strong></span></p>
<p>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.</p>
<p>Here are all steps that you can do to add more menu item to Content Area Context Menu.</p>
<p><span style="font-size: 18pt;"><strong>1. </strong></span>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.</p>
<p>Here is the code example for creating a content area command:</p>
<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>
<p><span style="font-size: 14pt;"><strong>2. </strong></span>Next step is creating new dojo component one for ContentAreaCommands. This component is used to declare context menu in on-page editting mode.</p>
<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>
<p><span style="font-size: 14pt;"><strong>3. </strong></span>Next step is creating new dojo component one for ContentAreaEditor. This component is used to declare the context menu in properties editting mode</p>
<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>
<p><span style="font-size: 14pt;"><strong>4. </strong></span>Last one, add overrided dojo components into module config as epi base resource to load customized resources once loading epi base resource</p>
<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>
<p>I hope this article will help some of you somehow. Enjoy reading!</p>2024-02-25T09:37:28.0000000ZBlog postHow to apply output cache to Optimizely CMS 12<p><strong>Introduce</strong></p>
<p>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.</p>
<p>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.</p>
<p><strong>Step to apply response cache in Optimizely CMS 12</strong></p>
<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>
<p><strong>Duration=30</strong> will cache the page for 30 seconds</p>
<p><strong>Location=ResponseCacheLocation.Any</strong> will cache the page in both proxies and client.</p>
<p>If you do not apply response cache for certain situation then you can use <strong>Location= ResponseCacheLocation.None</strong> and <strong>NoStore=true</strong></p>
<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>
<p>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:</p>
<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>
<p><strong>How to invalidate cache when the content is changed</strong></p>
<p>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.</p>
<p>Here are the steps that you can take to do that:</p>
<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>
<p><strong>How to vary response cache by visitor group</strong></p>
<p>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:</p>
<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>
<p>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></p>
<p> </p>
<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.0000000ZBlog postHow to route a simple url address within action name<p><strong>What is the simple address in the EpiServer?</strong></p>
<p>The simple address is a single segment uniquely identifying content and its language. <span>The simple address can be used as a direct address without parent nodes included in URL.</span></p>
<p><img src="/link/fc5212912a6a475498cd1a4e00f76984.aspx" /></p>
<p><strong>The situation here</strong></p>
<p>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.</p>
<p>For example:</p>
<p>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".</p>
<p>Actually, you cannot use the endpoint like this, you will get 404 message immediately.</p>
<p><strong>Why?</strong></p>
<p>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.</p>
<p>So the system cannot route any content that matchs to the simple address "contact-page-seo-url/subcription".</p>
<p><strong>How can we solve this problem?</strong></p>
<p>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</p>
<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>
<p>Tada, it is not much complicated. You just need to register more another simple address route with parameter "MatchOneSegment = true". </p>
<p>This parameter indicates that only one segment is matching to a certain simple address instead of all segments as default.</p>
<p>Hope this help some of you.</p>2020-10-15T02:16:09.0000000ZBlog postLock and Unlock account using AspNet Identity<p>You 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</p>
<p>Here are steps:</p>
<p>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></p>
<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>
<p>2. Pass shouldLockout is true when you call to validate user for login</p>
<pre class="language-csharp"><code> var signInStatus = await _signInManager.PasswordSignInAsync(username, password, isPersistent, shouldLockout:true);</code></pre>
<p>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:</p>
<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>
<p>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:</p>
<p><img src="/link/a7efb247c6df4eaa896112d856e63ec9.aspx" /></p>
<p>But it seems this function works well if we use Membership Provider for authentication. It does not works if I use Aspnet Identity.</p>
<p>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:</p>
<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>
<p>That is all. Now you can unblock account in Episerver admin mode as usual.</p>2020-04-24T02:41:33.0000000ZBlog postWorkaround for supporting multilingual promotion<p>Did 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.</p>
<p>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.</p>
<p><strong>How to do that?</strong></p>
<p>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.</p>
<p><strong>So is there any way to workaround with this requirement?</strong></p>
<p>The answer here is YES but it is not simple way. Here is my way:</p>
<p><strong>1. Install package EPiServer.VisitorGroupsCriteriaPack. We will use SelectedLanguage criterion for filtering promotions based on the current language</strong></p>
<p><strong>2. Setup 2 visitor groups for English and Sweden</strong></p>
<p><img src="/link/670809ee95dd4ce9869b00a1840846a1.aspx" width="1311" height="584" /></p>
<p><img src="/link/d74ea300f07f4e928cd8411f84766ce0.aspx" width="1296" height="151" /></p>
<p><strong>3. Create 2 different campaigns for these two languages and appropriated promotions in these campaigns</strong></p>
<p><img src="/link/172e9b3655d84d31b74d3693bf3f4e7e.aspx" width="1313" height="527" /></p>
<p><img src="/link/7be7aa1592d24793ab5132c42b784a19.aspx" width="1323" height="541" /></p>
<p><strong>4. Modiy MarketContentLoader class in QuickSilver sample code a bit to see proper promotions based on the current language in the home page: </strong>Using CampaignVisitorGroupFilter to filter campaign based on visitor group</p>
<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>
<p><strong>5. Finally, let's see the result in the front view</strong></p>
<ul>
<li>In English</li>
</ul>
<p><img src="/link/04073edc2e6c47ebaf737a7ddde05837.aspx" /></p>
<ul>
<li>In Sweden</li>
</ul>
<p><img src="/link/37e6bcda0e5e4461b97a1a89ac6c68d3.aspx" width="826" height="830" /></p>2019-04-04T03:51:56.0000000ZBlog post