Blog posts by Grzegorz Wiecheć2026-03-26T13:35:08.0000000Zhttps://world.optimizely.com/blogs/grzegorz-wiechec/Optimizely WorldCustom Property Editors in Optimizely CMS 13<p>When the world <a href="/link/5db655ef060049e2abdbf166e944c30c.aspx">first saw how to create custom editors for Optimizely CMS</a> back in 2012, it was a game-changer for Javascript developers. For the first time, we could build custom property editors that made content editors' lives easier and more productive.</p>
<p>However, there was a catch: you needed to master the Dojo framework. Understanding define, declare, mixins and dependecies wasn't exactly straightforward—you had to become a <strong>Dojo master</strong> to create even simple custom editors.</p>
<p>Fast forward to today, and <strong>Optimizely CMS 13</strong> (<a href="https://nuget.optimizely.com/packages/episerver.cms/13.0.0-preview4">now available as preview</a>) still supports the Dojo approach (for those who enjoy the classics), but it also introduces a modern, streamlined way to register editors as <strong>ES6 modules</strong>.</p>
<p>This article will guide you through the new ES6 module approach.</p>
<h2>Your First ES6 Module Editor</h2>
<p>An editor in CMS 13 is simply a JavaScript function with the following signature:</p>
<div class="code-fence-highlighter-copy-button">
<pre class="language-javascript"><code>export default function editorWithAllSettings(editorContainer, initialValue, onEditorValueChange, widgetSettings, readOnly)</code></pre>
<img class="code-fence-highlighter-copy-button-icon" /></div>
<div class="code-fence-highlighter-copy-button"><strong>Parameters</strong></div>
<ul>
<li>editorContainer: The HTML element where your editor should be rendered</li>
<li>initialValue: The initial value of the property</li>
<li>onEditorValueChange: A callback function to notify the CMS when the value changes (triggers save to server)</li>
<li>widgetSettings: Configuration passed from the server (optional)</li>
<li>readonly: Boolean indicating whether the editor should be read-only</li>
</ul>
<p>The function can either:</p>
<ul>
<li>Return nothing (render directly into editorContainer)</li>
<li>Return an object with lifecycle methods (render, updateValue, destroy)</li>
</ul>
<h2>Registering the Editor on the Server</h2>
<p>After creating client editor JavaScript file, we need to register it on the server side. This part is similar to how you would register any custom editor, with one important addition: you need to set <strong>IsJavascriptModule = true</strong> to enable the new ES6 module registration.</p>
<p> </p>
<pre class="language-csharp"><code>[ContentType]
public class TestPage : PageData
{
[ClientEditor(ClientEditingClass = "ClientResources/Scripts/Editors/minimal-editor.js", IsJavascriptModule = true)]
public virtual string SimpleProperty { get; set; }
}</code></pre>
<p> </p>
<p>Now we can look closer at how to implement the editor.</p>
<h2>The Simplest Editor: Direct Rendering</h2>
<p>Let's start with the most basic example—a function that renders a simple text input directly:</p>
<p><img src="/link/9f5afc5aff574c04824d8060443f9e9c.aspx" /></p>
<pre class="language-javascript"><code>export default function customEditor(editorContainer, initialValue, onEditorValueChange) {
const input = document.createElement("input");
input.type = "text";
input.value = initialValue || "";
input.onchange = (event) => onEditorValueChange(event.target.value);
editorContainer.appendChild(input);
}</code></pre>
<p>There are few key points to note about this approach is that no framework dependencies are required. The only requirement is following the function signature convention.</p>
<p>This approach works well for very simple scenarios, such as:</p>
<ul>
<li>Read-only displays (e.g., links to external systems)</li>
<li>Simple labels or informational fields</li>
<li>Lightweight custom inputs</li>
</ul>
<p>For scenarios requiring more interaction with the CMS (like handling undo/redo), it's recommended to return an object with lifecycle methods.</p>
<h2>Returning an Object with Lifecycle Methods</h2>
<p>Instead of rendering directly, your function can return an object with predefined methods.</p>
<p>The required is the "render" method, which is called to render the editor.</p>
<pre class="language-javascript"><code>export default function customEditor(editorContainer, initialValue, onEditorValueChange) {
return {
render: function () {
const input = document.createElement("input");
input.type = "text";
input.value = initialValue || "";
input.onchange = (event) => onEditorValueChange(event.target.value);
editorContainer.appendChild(input);
this._input = input;
},
};
}</code></pre>
<p>The above example is functionally equivalent to the direct rendering approach. However, by returning an object, you can also implement additional lifecycle methods for better integration with the CMS.</p>
<p>Additional methods include "updateValue" and "destroy":</p>
<p> </p>
<pre class="language-javascript"><code>export default function editorWithAllSettings(editorContainer, initialValue, onEditorValueChange, widgetSettings, readOnly) {
return {
render: function () {
console.log("rendering custom widget");
const input = document.createElement("input");
input.type = "text";
if (readOnly) {
input.disabled = true;
}
input.value = initialValue || "";
input.onchange = (event) => onEditorValueChange(event.target.value);
editorContainer.appendChild(input);
this._input = input;
},
updateValue: function (value) {
console.log("updating custom widget value");
this._input.value = value;
},
destroy: function () {
console.log("removing custom widget");
},
};
}</code></pre>
<p> </p>
<p><strong>Method purposes:</strong></p>
<ul>
<li>render(): Called to initially render the editor</li>
<li>updateValue(): Called when the value needs to be updated (e.g., when using Undo/Redo functionality)</li>
<li>destroy() :Called when the editor should be cleaned up (e.g., when navigating to a different page). Use this to remove event listeners and prevent memory leaks.</li>
</ul>
<h2>Example: Text Area with Statistics</h2>
<p>Now we can look closer at a more complex example that demonstrates the power of this approach. Building on a <a href="/link/baba6bbe33874a5fbfd7f4bd7e37947c.aspx">classic blog post by Ben McKernan</a>, let's create a more sophisticated editor that displays live statistics, like character count, word count, and paragraph count about the text being entered:</p>
<p><img src="/link/79419f58da8c48b69d5547916ef4001b.aspx" /></p>
<p> </p>
<pre class="language-javascript"><code>const count = (value) => {
const original = typeof value === "string" ? value : "";
const trimmed = original.trim();
return {
paragraphs: trimmed ? (trimmed.match(/\n+/g) || []).length + 1 : 0,
words: trimmed ? (trimmed.replace(/['";:,.?¿\-!¡]+/g, "").match(/\S+/g) || []).length : 0,
characters: trimmed ? trimmed.replace(/\s/g, "").length : 0,
};
};
export default function editorWithAllSettings(
editorContainer,
initialValue,
onEditorValueChange,
widgetSettings,
readOnly
) {
return {
render: function () {
const wrapper = document.createElement("div");
wrapper.className = "text-area-with-statistics";
const textarea = document.createElement("textarea");
if (readOnly) {
textarea.disabled = true;
}
textarea.value = initialValue || "";
const stats = document.createElement("div");
const updateStats = (value) => {
const { characters, words, paragraphs } = count(value);
stats.textContent = `Characters: ${characters}\nWords: ${words}\nParagraphs: ${paragraphs}`;
};
stats.style.whiteSpace = "pre";
updateStats(textarea.value);
textarea.oninput = (event) => {
onEditorValueChange(event.target.value);
updateStats(event.target.value);
};
wrapper.appendChild(textarea);
wrapper.appendChild(stats);
editorContainer.appendChild(wrapper);
this._textarea = textarea;
this._stats = stats;
},
updateValue: function (value) {
this._textarea.value = value;
const { characters, words, paragraphs } = count(value);
this._stats.textContent = `Characters: ${characters}\nWords: ${words}\nParagraphs: ${paragraphs}`;
}
};
}</code></pre>
<p>This editor is around 50 lines of code, with no dependencies on any framework. It demonstrates how you can create a rich editing experience with live feedback using just vanilla JavaScript. The "updateValue" method ensures that the statistics are always in sync with the current value, even when changes come from outside the editor (e.g., Undo/Redo).</p>
<h2>Passing Configuration from the Server</h2>
<p>In many scenarios, we might want to pass custom settings from the server to your editor. For example we have dropdown editor and want to populate the options from the server, or we want to pass some initial text or configuration values. The best way to do this is by implementing a custom "EditorDescriptor".</p>
<pre class="language-csharp"><code>[EditorDescriptorRegistration(TargetType = typeof(string), UIHint = "CustomModuleEditor")]
public class CustomEditorDescriptor : EditorDescriptor
{
public CustomEditorDescriptor()
{
ClientEditingClass = "ClientResources/Scripts/Editors/editor-with-custom-settings.js";
}
public override void ModifyMetadata(ExtendedMetadata metadata, IEnumerable<Attribute> attributes)
{
base.ModifyMetadata(metadata, attributes);
metadata.EditorConfiguration["isJavascriptModule"] = true;
metadata.EditorConfiguration["initialTextFromServer"] = "Here is sample initial text from the server";
}
}</code></pre>
<p><strong>Important:</strong> Don't forget to set <code>metadata.EditorConfiguration["isJavascriptModule"] = true</code> to enable ES6 module mode.</p>
<p>Then we can use this editor descriptor in our content type by specifying the "CustomModuleEditor" <strong>UIHint</strong>.</p>
<pre class="language-csharp"><code>[ContentType]
public class TestPage : PageData
{
[UIHint("CustomModuleEditor")]
public virtual string EditorWithCustomSettings { get; set; }
}</code></pre>
<p> </p>
<p>The server configuration is simply available through the <strong>widgetSettings</strong> object as field parameter:</p>
<div class="code-fence-highlighter-copy-button"><img class="code-fence-highlighter-copy-button-icon" />
<pre class="language-javascript"><code>export default function editorWithAllSettings(editorContainer, initialValue, onEditorValueChange, widgetSettings, readOnly) {
return {
render: function () {
const wrapper = document.createElement("div");
const input = document.createElement("input");
input.type = "text";
if (readOnly) {
input.disabled = true;
}
input.value = initialValue || "";
input.onchange = (event) => onEditorValueChange(event.target.value);
this._input = input;
const descriptionEl = document.createElement("div");
descriptionEl.textContent = widgetSettings.initialTextFromServer;
wrapper.appendChild(input);
wrapper.appendChild(descriptionEl);
editorContainer.appendChild(wrapper);
},
updateValue: function (value) {
this._input.value = value;
}
};
}</code></pre>
<p><img src="/link/24491d2a0167452a9a997dc62da51027.aspx" /></p>
<p> </p>
<h2>Advanced Scenarios: Modern Tooling and Frameworks</h2>
<p>The real power of ES6 module registration goes beyond just simpler code. You can now build custom editors using modern JavaScript tooling and development practices.</p>
<p>The editor can be implemented outside of the CMS project, with its own dependencies, build process, and development environment. You can use React, Vue, Angular, or any framework you prefer, and bundle it with tools like Webpack or Vite.</p>
<p>For example:</p>
<ul>
<li><strong>TypeScript</strong> for type safety</li>
<li><strong>React</strong> for component composition</li>
<li><strong>Vite</strong> for fast builds</li>
<li><strong><a href="https://optimizely-axiom.github.io/optiaxiom/">Optimizely Axiom</a></strong> for consistent UI components. Which give you same design system as Optimizely's own products, ensuring a polished, professional look and feel.</li>
<li><strong>Storybook</strong> for component development and documentation</li>
<li><strong>Vitest</strong> for unit testing</li>
</ul>
<h3>Example Project Structure for textarea with statistics editor</h3>
<pre class="language-html"><code>CustomEditorSample/
├── src/
│ ├── TextAreaWithStats.tsx # React component
│ ├── TextAreaWithStats.stories.tsx # Storybook stories
│ ├── count-statistics.ts # Business logic
│ ├── count-statistics.test.ts # Unit tests
│ └── index.ts # ES6 module wrapper
├── vite.config.js # Build configuration
└── package.json</code></pre>
<p> </p>
<h3>The React Component</h3>
<div class="code-fence-highlighter-copy-button"><img class="code-fence-highlighter-copy-button-icon" /></div>
<div class="code-fence-highlighter-copy-button">
<pre class="language-javascript"><code>import React, { useState, useEffect } from 'react';
import { AxiomProvider, Textarea, Box, Group, Text } from '@optiaxiom/react';
export const TextAreaWithStats: React.FC<TextAreaWithStatsProps> = ({
initialValue = '',
onValueChange,
readOnly = false,
}) => {
const [value, setValue] = useState<string>(initialValue);
const [stats, setStats] = useState<TextStats>({ characters: 0, words: 0, paragraphs: 0 });
useEffect(() => {
setStats(countStatistics(value));
}, [value]);
const handleChange = (e: React.ChangeEvent<HTMLTextAreaElement>) => {
const newValue = e.target.value;
setValue(newValue);
if (onValueChange) {
onValueChange(newValue);
}
};
return (
<AxiomProvider>
<Box>
<Textarea
value={value}
onChange={handleChange}
disabled={readOnly}
placeholder="Enter text..."
/>
<Group mt="4" flexDirection="column" gap="2">
<Text fontSize="md" color="fg.secondary">
Characters: {stats.characters}
</Text>
<Text fontSize="md" color="fg.secondary">
Words: {stats.words}
</Text>
<Text fontSize="md" color="fg.secondary">
Paragraphs: {stats.paragraphs}
</Text>
</Group>
</Box>
</AxiomProvider>
);
};</code></pre>
<p>The "index.ts" file exports the editor function that the CMS expects, while using React internally:</p>
<div class="code-fence-highlighter-copy-button"><img class="code-fence-highlighter-copy-button-icon" /></div>
<div class="code-fence-highlighter-copy-button">
<pre class="language-javascript"><code>import React from 'react';
import { createRoot, Root } from 'react-dom/client';
import { TextAreaWithStats } from './TextAreaWithStats';
export default function editorWithAllSettings(
editorContainer: HTMLElement,
initialValue: string,
onEditorValueChange: (value: string) => void,
widgetSettings?: Record<string, unknown>,
readOnly?: boolean
) {
let root: Root | null = null;
return {
render: function () {
const container = document.createElement('div');
editorContainer.appendChild(container);
root = createRoot(container);
root.render(
React.createElement(TextAreaWithStats, {
initialValue,
onValueChange: onEditorValueChange,
readOnly,
widgetSettings,
})
);
},
updateValue: function (value: string) {
if (root) {
root.render(
React.createElement(TextAreaWithStats, {
initialValue: value,
onValueChange: onEditorValueChange,
readOnly,
widgetSettings,
})
);
}
},
destroy: function () {
if (root) {
root.unmount();
root = null;
}
},
};
}</code></pre>
<p> </p>
<h3>Development with Storybook</h3>
<p>Storybook allows you to develop and test your editor in isolation, without needing to run the full CMS.</p>
<p><img src="/link/9bce104eeab84e2481743850c7df4637.aspx" /></p>
<p> </p>
<h3>Unit Testing</h3>
<p><img src="/link/4c42ee6a567a43f589a89f7b31df5e90.aspx" /></p>
<p>Write tests for your business logic using Vitest:</p>
<div class="code-fence-highlighter-copy-button"><img class="code-fence-highlighter-copy-button-icon" />
<pre class="language-javascript"><code>import { describe, expect, it } from "vitest";
import { countStatistics } from "./count-statistics";
describe("countStatistics", () => {
it("counts a single paragraph and strips punctuation from words", () => {
expect(countStatistics(" Hello, world! ")).toEqual({
paragraphs: 1,
words: 2,
characters: 12,
});
});
it("counts paragraph groups separated by newlines", () => {
expect(countStatistics("First line\nSecond line\n\nThird line")).toEqual({
paragraphs: 3,
words: 6,
characters: 28,
});
});
});</code></pre>
</div>
<p> </p>
<p><img src="/link/6691fd6bf9ef43f3a6ae3503d102b4a2.aspx" /></p>
<p>The ES6 module approach gives you complete freedom to use vanilla JavaScript, React, Vue, or any framework you prefer, while taking advantage of modern development practices like TypeScript, ESLint, and Prettier. You can write unit tests, use Storybook for component development, and benefit from hot module replacement and fast builds with Vite. The code is cleaner, more maintainable than Dojo-based editors, and easily reusable across projects.</p>
<p>The module approach in Optimizely CMS 13 is a step forward in custom editor development. While the Dojo framework served us well for over a decade, the new approach embraces modern JavaScript standards and development practices.</p>
<p>Whether you're building a simple text input or a sophisticated React component with real-time validation, the ES6 module registration makes it easier, more maintainable, and more enjoyable to create custom property editors.</p>
<p>The best part? You can adopt this gradually—your existing Dojo editors will continue to work, so you can migrate at your own pace.</p>
<p>Happy coding!</p>
<p> </p>
</div>
</div>
</div>2026-03-26T13:35:08.0000000ZBlog postTinyMCE 7 editor upgrade<p>Today we released a new version of the TinyMCE editor. The <a title="TinyMCE Nuget package" href="https://nuget.optimizely.com/package/?id=EPiServer.CMS.TinyMce&v=5.0.0">EPiServer.CMS.TinyMce 5.0.0</a> package includes integration with the latest version of the <a title="TinyMCE documentation " href="https://www.tiny.cloud/docs/tinymce/7/">TinyMCE 7</a> library.</p>
<p><img src="/link/2295ce469d7948808fe93d6fb258b04c.aspx" alt="Optimizely TinyMCE 7 overview" width="797" height="718" /></p>
<h2>Upgrade information</h2>
<p>In this release we haven't added new functionalities, it's only the TinyMCE library migration. The package has been released as version 5 and not a continuation of version 4, because the TinyMCE library has minor breaking changes.</p>
<p><span style="text-decoration: underline;"><strong>But for most Optimizely installations using the 4.x version integration you won't need to make any code changes when upgrading.</strong></span></p>
<p>There are no server-side configuration changes. Adding plugins and setting up the toolbar remains unchanged. All editor configuration changes that need to be made are described in the TinyMCE <a href="https://www.tiny.cloud/docs/tinymce/latest/migration-from-6x/">migration documentation</a>.</p>
<p>The TinyMCE 6 and TinyMCE 7 API are almost the same.</p>2025-04-01T19:08:36.0000000ZBlog postCreate custom folder type in Edit Mode<p>Content Folders, which are located in assets pane gadget or multichannel content gadget, allow you to add any type of block or folders. But sometimes, for specific folders, we would like to store only one type of content and additional folders used for example for clustering or grouping. In this article, I will describe how […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/08/create-custom-folder-type-in-edit-mode/">Create custom folder type in Edit Mode</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2024-08-28T17:59:43.0000000ZBlog postCopying property values part 2<p>After publishing my last article about copying property values to other language versions, I received constructive feedback on how could I change the script. In this article I would like to describe changes that will improve the way the add-on works. The previous version had some significant limitations: it was not possible to change a […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/06/copying-property-values-part-2/">Copying property values part 2</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2024-06-18T20:43:20.0000000ZBlog postCopying property values<p>In this article I’d like to show simple Edit Mode extension for copying property values to other language versions. In one of my previous blogposts about reverting property to a specific version I described how to update property value using property from another version. Today I’d like to show the oposite scenario. We would like […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/06/copying-property-values/">Copying property values</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2024-06-08T10:22:05.0000000ZBlog postExtendedCms.TinyMceEnhancements – marco support<p>This article will be continuation of the previous series about TinyMCE extensions. Today I would like to describe an add-on that allows inserting dynamic fields (macro) into TinyMCE editor that are replaced with custom value when rendering the page. Macro support In the image above, when the page is rendered, the %%%USER_NAME%%% field will be […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/06/extendedcms-tinymceenhancements-marco-support/">ExtendedCms.TinyMceEnhancements – marco support</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2024-06-03T07:33:56.0000000ZBlog postExtendedCms.TinyMceEnhancements – serwer side webp support<p>Today I will introduce another small feature of TinyMceEnhancements plugin. The functionality is used to automatically detect whether a browser supports the webp format. Using extension With this option, plug-ins such as imageSharp can change the image format from JPG to web. The extension uses the GeneratedUrl event from the IContentUrlGeneratorEvents service, which is available […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/05/extendedcms-tinymceenhancements-serwer-side-webp-support/">ExtendedCms.TinyMceEnhancements – serwer side webp support</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2024-05-22T21:46:53.0000000ZBlog postExtendedCms.TinyMceEnhancements – support for video tag<p>In my previous post I showed Full Width for TinyMCE. In this article I will describe another feature for ExtendedCms.TinyMceEnhancements addon, supporting video tag. Optimizely integration supports adding links, images and content from Assets Pane. With TinyMceEnhancements you can also add video files. Plugin will use video tag when files has mp4, webm or ogg […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/02/enhancements-for-tinymce-support-for-video-tag/">ExtendedCms.TinyMceEnhancements – support for video tag</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2024-02-19T08:28:31.0000000ZBlog postEnhancements for TinyMCE – Full WidthTinyMCE<p>Recently I introduced TinyMceEnhancements addon for Optimizely TinyMCE integration. Today I’d like to introduce another enhancement Full Width TinyMCE. All Optimizely properties have very similar width. This width is suitable for fields such as ContentReference or short text, but often the TinyMCE property used to store the main content of an article contains much more […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/02/enhancements-for-tinymce-full-widthtinymce/">Enhancements for TinyMCE – Full WidthTinyMCE</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2024-02-12T09:13:47.0000000ZBlog postEnhancements for TinyMCE – TinyMceEnhancements plugin<p>In this article I’d like to describe my new plugin for TinyMCE integration. The TinyMceEnhancements addon contains set of improvements for Optimizely TinyMCE integration. It focus on features related with images used in the HTML editor. Using this plugin you can modify the attributes of images, limit the size and set ALT text. Managing image […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2024/02/enhancements-for-tinymce-tinymceenhancements-plugin/">Enhancements for TinyMCE – TinyMceEnhancements plugin</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2024-02-02T17:08:37.0000000ZBlog postCopying inline blocks when translating pages<p>A few versions ago, Optimizely CMS added inline blocks functionality. This is a very useful feature which enables the Editor to create dynamic pages using ContentArea. The publishing cycle of blocks is related to the page on which they are used, so editing has become very easy. In this article, I wanted to describe a […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/12/copying-inline-blocks-when-translating-pages/">Copying inline blocks when translating pages</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-12-13T21:10:02.0000000ZBlog postDate property editor<p>The Optimizely CMS has built-in DateTime property. When editing, the Editor selects both the date and the time. Sometimes we would like to configure only the date selection, e.g. for calendar events, employee-related dates, article release date etc. Therefore, I have prepared a simple date property editor. Below is the default DateTime property. The difference […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/12/date-property/">Date property editor</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-12-09T11:37:50.0000000ZBlog postUpdate related content<p>In this article, I will show simple code that allow to replace linked content with other content selected by the Editor. When deleting content whose references are used by other content, the Editor is shown a dialog box with a list of references. The Editor has the option to visit the page or block where […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/12/update-related-content/">Update related content</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-12-08T22:46:45.0000000ZBlog postRedesign of Admin Mode Content Types<p>Recently, in <a href="https://nuget.optimizely.com/package/?id=EPiServer.CMS.UI&v=12.23.0">EPiServer.CMS.UI 12.23.0</a>, we’ve updated designs for the content types edit view in Admin Mode.</p>
<p>It's important to mention, that no functionality has been removed, and there are no breaking changes as a result of these updates, functionally everything is working in the same way. We have just reorganized the layout to be more user friendly and consistent with other modules.</p>
<p>Content types have a lot functionality to configure. We grouped them into a few clear sections: Properties, Details, Default Values, Child Content Types, Permissions and Settings. I will describe them one by one.</p>
<h2>Properties</h2>
<p>The properties section displays a list of properties that belongs to the edited content type. It allows to search and filter properties. From the list, Administrator can create and edit properties.</p>
<p><img src="/link/cea6d57949c042b094a277be79492d95.aspx" width="1076" height="604" /></p>
<h2>Details</h2>
<p>The "details" section contains basic, non-editable information about the content type, like GUID, created date and model type name. This section allows you to check database related fields and helps with troubleshooting.</p>
<p><img src="/link/51f788fd302a4dd69e144b12d0488717.aspx" width="1078" height="328" /></p>
<h2>Default values</h2>
<p>The "Default Values" section allows you to configure default settings for pages, like sort order or publishing rules. This section is available only for Page Types.</p>
<p><img src="/link/869f5e1ea68f47839cf046edaabf880c.aspx" width="1082" height="608" /></p>
<h2></h2>
<h2>Child content types</h2>
<p>The Child content types section allows you to define which content type instances can be created as children of the content type.</p>
<p><img src="/link/ca6da582f9164d76b1441d0a312ad76b.aspx" width="1090" height="613" /></p>
<h2></h2>
<h2>Permissions</h2>
<p>The Permission section allows you to configure access rights to the content type for specific groups and users.</p>
<p><img src="/link/33cc114ee1b74ec68685d830f07e9111.aspx" width="1089" height="612" /></p>
<h2>Settings</h2>
<p>The Settings section allows you to configure basic content type properties. Some properties cannot be set when they were localized.</p>
<p>In this section, Administrators can also reset the content type (for content types created from code) or Delete the content type (for content types creted from Admin mode).</p>
<p><img src="/link/61f9f0cd41d34726a911341320b41075.aspx" width="1090" height="613" /></p>
<h2>Additional functionality</h2>
<p>As I mentioned at the beginning, no functionality was removed, but a few small features related to editing properties were added.</p>
<h3>List properties</h3>
<p>Since some time, creating list properties was available from code (you can read more about list properties <a href="/link/8ba16a78985e4446bf36669a38308eb4.aspx">here</a>). Now it's also available from Admin mode. To create a list property, an Administrator has to enable the "List" checkbox.</p>
<p><img src="/link/f52bb8a83f6c45aba3e974564c915180.aspx" width="427" height="438" /></p>
<h3>Reordering properties</h3>
<p>In the previous version, reordering properties was done with the "Sort index" input field on property details form. Administrator can still use this functionality, but now properties can be reordered in easier way by using drag & drop. Additionally, this functionality allows to change the group of the property.</p>
<p><img src="/link/0e0d966e7b51422495e60d23bd1b686e.aspx" width="446" height="237" /></p>
<h3>Type selection</h3>
<p>Before, the property definition type selector was a long list of types. Now, in the current version, types are grouped with additional dropdown. For example for Text group we can select Long string, String or XHTML.</p>
<p><img src="/link/17a39285bc1245b5b348ac62869d0176.aspx" width="491" height="372" /></p>
<h3>Settings</h3>
<p>On the properties edit form, we now allow to configure some of the custom property settings.</p>
<h4>Allowed types</h4>
<p>For property types related with ContentReference type, like ContentArea, Content Item etc., an administrator can configure allowed and restricted types.</p>
<p><img src="/link/1b2853fcc70e4624a438c5ca43ead385.aspx" width="471" height="365" /></p>
<h4>Dropdown lists</h4>
<p>We changed the layout for dropdown lists to be more user friendly. There are no nested dialogs anymore and items can be configured directly from property edit form.</p>
<p><img src="/link/1a82568cd4824fc8b3e48b1e94d414bd.aspx" width="473" height="309" /></p>
<h4>Numbers</h4>
<p>For number property types (Integer and Floats), an Administrator can configure value range by setting minimum and maximum values. Range can be also configured for date properties.</p>
<p><img src="/link/86a52ed757eb4916955a931f03d784ed.aspx" width="477" height="291" /></p>
<h4>String</h4>
<p>For String property types, an Administrator can configure a maximum length as well as input regular expression validation rules.</p>
<p><img src="/link/52a958903bf84b6dae91ea5bdc81200f.aspx" width="469" height="299" /></p>2023-10-08T06:43:21.0000000ZBlog postExtended SelectionFactory<p>In one of my previous articles I described new Color Picker widget. Today I’d like to show another simple property. I prepared extended version of the SelectOneAttribute. This extensions allows developers to configure SelectionFactory, that returns items with icons and CSS classess. This allows us to visually emphasize the importance of values in the list, […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/06/extended-selectionfactory/">Extended SelectionFactory</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-06-07T18:37:54.0000000ZBlog postContent Bulk Edit<p>Bulk Edit is a plugin that allows to make changes to more than one Content at the same time. This can save time by simultaneously updating multiple properties that share the same information. This can be useful when a new property has been added to a ContentType and a default value needs to be assigned, […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/06/content-bulk-edit/">Content Bulk Edit</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-06-05T08:27:05.0000000ZBlog postImage preview<p>In one of my recent articles I described the Media Report admin mode plugin. Today I will also continue media topic, but this time I will focus on Edit Mode. Sometimes site contain a lot of similar iamges. When adding an image to an image property or the a Content Area it’s difficult to determinate […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/04/image-preview/">Image preview</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-04-30T20:57:03.0000000ZBlog postContent Area default display options<p>Content Area property items allows to select Display Options. Display options let Editor specify how item should be renderred in the view mode. When adding content to a Content Area, we usually know which display option will be the best choice based on content type. For example our ButtonBlock will be best displayed as Narrow […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/04/content-area-default-display-options/">Content Area default display options</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-04-21T11:01:34.0000000ZBlog postMedia report<p>I recently prepared a plugin for Admin Mode that shows a list of all Content Media available on the system. The media report displays a list with useful statistics about the files and allows to sort and filter the results. In the list you can find the following information: Name and thumbnail – thumbnail with […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/04/media-report/">Media report</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-04-13T16:54:32.0000000ZBlog postAnother take on ColorPicker property<p>Over the years, several articles have been written about the ColorPicker property editor. I also decided to look into this topic. I wanted to create something modern, simple and configurable. That’s why I used a simple HTML input color wrapped in a dijit widget. Since there was very little code, I didn’t create a nuget […]</p>
<p>The post <a rel="nofollow" href="https://gregwiechec.com/2023/03/another-take-on-colorpicker-property/">Another take on ColorPicker property</a> appeared first on <a rel="nofollow" href="https://gregwiechec.com">Grzegorz Wiecheć</a>.</p>
2023-03-03T09:46:48.0000000ZBlog post