Blog posts by pjangid

Blog posts by pjangid2026-03-07T16:46:02.0000000Zhttps://world.optimizely.com/blogs/pjangid/ Optimizely World Lessons from Building Production-Ready Opal ToolsAI tools are becoming a normal part of modern digital platforms. With Optimizely Opal, teams can build tools that automate real tasks across the Optimizely platform. Creating a basic Opal tool is fairly straightforward. You define a tool, connect it to an API or some business logic, and allow an agent to call it. Many tutorials stop there. But in real projects, things are rarely that simple. External APIs fail. Data might be incomplete. Requests might take longer than expected. If these situations are not handled properly, your Opal workflows can break or produce incorrect results. In this article, we will look at a few important practices that help you build production-ready Opal tools. These include: <ul> <li> Proper error handling </li> <li> Logging and observability </li> <li> Structured responses </li> <li> Performance considerations </li> <li> Security practices </li> </ul> These are the same things we normally think about when building enterprise applications. <hr /> <h1>Understanding How an Opal Tool Works</h1> Before going deeper, it helps to understand the typical flow of an Opal tool. A simplified flow usually looks like this: <pre>User Request ↓ Opal Agent ↓ Opal Tool ↓ External Service or API ↓ Response returned to the Agent </pre> For example, imagine a marketer asking Opal: <blockquote> "Check if the price updates for the latest products are correctly applied." </blockquote> The agent might call a Price Validation Tool, which then: <ol> <li> Reads the expected price data </li> <li> Calls a product API </li> <li> Compares the values </li> <li> Returns the result </li> </ol> This looks simple, but many things can go wrong along the way. That’s why good design is important. <hr /> <h1>Handling Errors Properly</h1> One of the most common issues in production systems is unhandled errors. Let’s say your tool calls a product API. What happens if: <ul> <li> the API is temporarily unavailable </li> <li> the response takes too long </li> <li> the product does not exist </li> <li> the returned data is incomplete </li> </ul> If your tool simply crashes or returns a generic error, the agent will not know what to do. A better approach is to return clear and structured error information. Example response: <pre><code class="language-json">{ "status": "error", "errorType": "API_TIMEOUT", "message": "The product service did not respond within 5 seconds.", "suggestedAction": "Retry the request." } </code></pre> This helps the agent understand what happened and possibly retry or suggest another action. <h3>Example Scenario</h3> Imagine a tool that checks whether a product exists in the system. Instead of returning something vague like: <pre><code>Error occurred </code></pre> Return something useful: <pre><code class="language-json">{ "productId": "P12345", "status": "not_found", "message": "Product does not exist in the catalog." } </code></pre> This makes troubleshooting much easier. <hr /> <h1>Returning Structured Data</h1> AI agents work much better when the tool returns structured data instead of plain text. For example, consider a tool that verifies product prices. Bad example: <pre><code>The price seems different from what we expected. </code></pre> Better example: <pre><code class="language-json">{ "sku": "SKU-234", "expectedPrice": 19.99, "currentPrice": 21.49, "status": "price_mismatch" } </code></pre> This format allows the agent to: <ul> <li> detect mismatches automatically </li> <li> trigger additional checks </li> <li> generate useful reports. </li> </ul> Structured responses also make it easier to reuse the tool in different workflows. <hr /> <h1>Logging and Observability</h1> When something goes wrong in an AI workflow, debugging can be difficult if you do not have good logs. Logging helps you answer questions like: <ul> <li> Which tool was executed? </li> <li> What input was provided? </li> <li> How long did it take? </li> <li> Did the API call succeed? </li> </ul> A simple logging format might look like this: <pre><code>Timestamp: 2026-03-07 10:12:04 Agent: ProductValidationAgent Tool: PriceValidationTool ExecutionTime: 2.4 seconds Status: Success </code></pre> If an error occurs: <pre><code>Timestamp: 2026-03-07 10:15:10 Agent: ProductValidationAgent Tool: PriceValidationTool ExecutionTime: 5.1 seconds Status: Failed Error: API Timeout </code></pre> This information becomes extremely helpful when diagnosing problems in production. <hr /> <h1>Example: SKU Price Validation Tool</h1> Let’s look at a simple but practical example. Suppose a team updates product prices in bulk and wants to verify that the updates were applied correctly. A Price Validation Tool could follow these steps: <ol> <li> Receive a SKU number </li> <li> Fetch the expected price from a spreadsheet or internal system </li> <li> Call the product API </li> <li> Compare the values </li> <li> Return the result </li> </ol> Example response: <pre><code class="language-json">{ "sku": "SKU-987", "expectedPrice": 24.99, "systemPrice": 24.99, "status": "verified" } </code></pre> If there is a mismatch: <pre><code class="language-json">{ "sku": "SKU-987", "expectedPrice": 24.99, "systemPrice": 26.99, "status": "mismatch" } </code></pre> An Opal agent could then generate a report for the operations team. <hr /> <h1>Improving Performance</h1> When AI agents run workflows, they may call multiple tools in sequence. If each tool takes several seconds, the entire workflow could become slow. Here are a few simple ways to improve performance. <h3>Use caching</h3> If the same data is requested multiple times, cache it temporarily instead of calling the API repeatedly. Example: If the tool checks the same product data multiple times during a workflow, store the response for a few minutes. <hr /> <h3>Reduce unnecessary API calls</h3> If possible, fetch multiple items in a single request. Instead of: <pre><code>Call API for Product A Call API for Product B Call API for Product C </code></pre> Try: <pre><code>Call API once for Products A, B, and C </code></pre> <hr /> <h3>Run independent tools in parallel</h3> Some checks can happen at the same time. Example product validation workflow: <pre><code>Product Validation Workflow ├─ Price Validation Tool ├─ Inventory Check Tool └─ Search Index Check Tool </code></pre> Since these checks are independent, they can run in parallel, reducing overall execution time. <hr /> <h1>Security Considerations</h1> Security is always important when tools interact with external systems. A few basic practices can help avoid common problems. <h3>Protect API credentials</h3> Never hardcode credentials in the tool code. Instead, use environment variables or secure configuration systems. <hr /> <h3>Validate inputs</h3> Agents may pass unexpected inputs. Always validate parameters before calling external services. Example validation: <ul> <li> Check if SKU format is valid </li> <li> Ensure price values are numeric </li> <li> Prevent empty inputs </li> </ul> <hr /> <h3>Limit tool permissions</h3> Each tool should only access the resources it needs. For example: <ul> <li> A content validation tool should not modify content. </li> <li> A reporting tool should not update product data. </li> </ul> This reduces the risk of accidental changes. <hr /> <h1>Monitoring and Continuous Improvement</h1> Once tools are running in production, it is useful to track their performance over time. Some helpful metrics include: <ul> <li> tool execution time </li> <li> success vs failure rate </li> <li> number of API errors </li> <li> most frequently used tools </li> </ul> These metrics can highlight areas where improvements are needed. For example: If a tool frequently fails due to timeouts, you might need to improve the API performance or add retry logic. <hr /> <h1>Final Thoughts</h1> As AI becomes more integrated into enterprise platforms, the quality of the underlying tools becomes increasingly important. A well-designed tool should not only complete its task but also: <ul> <li> handle failures gracefully </li> <li> provide clear responses </li> <li> log useful information </li> <li> perform efficiently </li> <li> follow security best practices </li> </ul> By applying these practices while building tools for Optimizely Opal, teams can create AI workflows that are reliable enough for real business operations. Feel free to share your thought as an outcome of yout experience with implementing the Optimizely Opal Tools. Thanks  2026-03-07T16:46:02.0000000Z

Blog post

Content Flexibility vs Control: A Deep Dive into Optimizely Content Modeling<h3>Choosing the Right Property Type for Better Editor Experience and Performance</h3> When modeling content in Optimizely CMS, one of the most common design decisions developers face is choosing between <code>ContentArea</code> and <code>IList<ContentReference></code>. At first glance, both allow you to reference multiple content items. However, they serve very different purposes, impact editor experience, and influence long-term maintainability.  This article breaks down: <ul> <li> Key differences </li> <li> Benefits and limitations </li> <li> Best practices </li> <li> When to use one over the other </li> </ul> <hr /> <h2>Understanding the Two Approaches</h2> <h3>ContentArea</h3> <code>ContentArea</code> is a first-class CMS concept designed for flexible, editor-driven content composition. <div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary"> <div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9"> <div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"> <div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div> </div> </div> <div class="overflow-y-auto p-4"><code class="whitespace-pre! language-csharp">public virtual ContentArea MainContent { get; set; } </code></div> </div> It allows editors to: <ul> <li> Create blocks inline </li> <li> Drag & drop blocks </li> <li> Reorder content </li> <li> Apply visitor groups </li> <li> Mix different block types </li> </ul> <hr /> <h3>IList<ContentReference></h3> <code>IList<ContentReference></code> is a simple reference list that points to existing content items. <div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary"> <div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9"> <div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"> <div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div> </div> </div> <div class="overflow-y-auto p-4"><code class="whitespace-pre! language-csharp">public virtual IList<ContentReference> OtherLinks { get; set; } </code></div> </div> It is more structured and controlled, but offers fewer editor features. <hr /> <h2>Editor Experience Comparison</h2> <div class="TyagGW_tableContainer"> <div class="group TyagGW_tableWrapper flex w-fit flex-col-reverse"> <table class="w-fit min-w-(--thread-content-width)"> <thead> <tr> <th>Feature</th> <th>ContentArea</th> <th>IList<ContentReference></th> </tr> </thead> <tbody> <tr> <td>Create new block</td> <td>✅ Yes</td> <td>❌ No</td> </tr> <tr> <td>Drag & drop</td> <td>✅ Yes</td> <td>❌ No</td> </tr> <tr> <td>Reorder items</td> <td>✅ Yes</td> <td>⚠️ Limited</td> </tr> <tr> <td>Inline editing</td> <td>✅ Yes</td> <td>❌ No</td> </tr> <tr> <td>Visitor groups</td> <td>✅ Yes</td> <td>❌ No</td> </tr> <tr> <td>Mixed content types</td> <td>✅ Yes</td> <td>⚠️ Possible but limited</td> </tr> <tr> <td>Structured control</td> <td>⚠️ Less</td> <td>✅ More</td> </tr> </tbody> </table> </div> </div> <hr /> <h2>Why “Create Block” Is Missing for IList<ContentReference></h2> Even with attributes like: <div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary"> <div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9"> <div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"> <div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div> </div> </div> <div class="overflow-y-auto p-4"><code class="whitespace-pre! language-csharp">[AllowedTypes(typeof(MyBlock))] </code></div> </div> Optimizely will not show a “Create new block” button for <code>IList<ContentReference></code>. Why? Because: <ul> <li> <code>IList<ContentReference></code> is treated as a picker, not a container </li> <li> It assumes content already exists elsewhere </li> <li> It does not support inline content creation by design </li> </ul> This is intentional and aligns with Optimizely’s content model philosophy. <hr /> <h2>When You SHOULD Use ContentArea</h2> Use ContentArea when: <ul> <li> Editors need flexibility </li> <li> Content structure may evolve </li> <li> Blocks are page-specific </li> <li> Inline creation improves productivity </li> <li> Visitor group personalization is required </li> </ul> <h3>Typical use cases</h3> <ul> <li> Page body content </li> <li> Landing page sections </li> <li> Flexible navigation areas </li> <li> Campaign-driven layouts </li> </ul> <h3>Best practice</h3> <div class="contain-inline-size rounded-2xl corner-superellipse/1.1 relative bg-token-sidebar-surface-primary"> <div class="sticky top-[calc(--spacing(9)+var(--header-height))] @w-xl/main:top-9"> <div class="absolute end-0 bottom-0 flex h-9 items-center pe-2"> <div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs"> </div> </div> </div> <div class="overflow-y-auto p-4"><code class="whitespace-pre! language-csharp">[AllowedTypes(typeof(NavigationItemBlock))] public virtual ContentArea NavigationItems { get; set; } </code></div> </div> This gives editors full control while keeping block types constrained. <hr /> <h2>When You SHOULD Use IList<ContentReference></h2> Use IList<ContentReference> when: <ul> <li> Content should be centrally managed </li> <li> Editors must select from pre-approved items </li> <li> Structure should remain consistent </li> <li> You want to prevent content sprawl </li> </ul> <h3>Typical use cases</h3> <ul> <li> Global navigation links </li> <li> Footer links </li> <li> Legal or compliance-driven content </li> <li> Shared CTA collections </li> <li> Controlled taxonomies </li> </ul> This approach encourages reuse and governance. <hr /> <h2>Performance Considerations</h2> <div class="TyagGW_tableContainer"> <div class="group TyagGW_tableWrapper flex w-fit flex-col-reverse"> <table class="w-fit min-w-(--thread-content-width)"> <thead> <tr> <th>Aspect</th> <th>ContentArea</th> <th>IList<ContentReference></th> </tr> </thead> <tbody> <tr> <td>Rendering</td> <td>Slightly heavier</td> <td>Lightweight</td> </tr> <tr> <td>Flexibility</td> <td>High</td> <td>Low</td> </tr> <tr> <td>Caching predictability</td> <td>Medium</td> <td>High</td> </tr> <tr> <td>Bulk loading</td> <td>Moderate</td> <td>Easier</td> </tr> </tbody> </table> </div> </div> <blockquote> For navigation and header/footer elements, <code>IList<ContentReference></code> is often preferred for predictability and performance. </blockquote> <hr /> <h2>Recommended Hybrid Pattern (Best of Both Worlds)</h2> Many mature Optimizely solutions use both, intentionally: <ul> <li> ContentArea for page-level, flexible content </li> <li> IList<ContentReference> for global, reusable elements </li> </ul> Example: <ul> <li> Header navigation → <code>IList<ContentReference></code> </li> <li> Mega menu content → <code>ContentArea</code> </li> </ul> This balances editor freedom with architectural control. <hr /> <h2>Final Recommendation</h2> <blockquote> Do not choose based on convenience — choose based on content ownership and editorial intent. </blockquote> <h3>Quick decision guide:</h3> <ul> <li> Should editors freely compose content? → ContentArea </li> <li> Should content be reusable and controlled? → IList<ContentReference> </li> </ul> Getting this decision right early prevents: <ul> <li> Editor frustration </li> <li> Over-engineering </li> <li> Content duplication </li> <li> Long-term maintenance issues </li> </ul> <hr /> <h2>Closing Thoughts</h2> Content modeling is one of the most impactful architectural decisions in Optimizely CMS. Understanding the difference between <code>ContentArea</code> and <code>IList<ContentReference></code> allows you to build solutions that are not only technically sound, but also editor-friendly and scalable.    2025-12-29T19:35:01.0000000Z

Blog post

Boosting Indexing Efficiency: Reindex Pages Directly from Optimizely’s Navigation PaneThere can be various reasons why you might want to trigger indexing or reindexing of a page/node directly from the navigation pane. In my case, we were working with a large volume of content and needed to test newly introduced custom indexing fields. Waiting for the entire site to be reindexed through the standard indexing job wasn’t feasible. While there are certainly other ways to handle this, adding a manual reindex trigger proved especially helpful in our upper environments (such as Integration and Preproduction), where faster feedback loops are critical. Here's a quick look at how it appears in the UI: <img src="/link/731db5e34b81489d9e5a17fa840ae8aa.aspx" width="461" height="476" />   To implement this, I used Dojo to create new navigation items and added them to Optimizely’s plug-in area within the navigation tree. Here's the setup from <code>Initializer.js</code>: <pre class="language-javascript"><code>define([ "dojo", 'dojo/_base/declare', 'epi-cms/plugin-area/navigation-tree', 'epi/_Module', 'optimizelyModules/ReIndexTree/ReIndexTree', 'optimizelyModules/ReIndexTree/ReIndexChildren' ], function ( dojo, declare, navigationTreePluginArea, _Module, ReIndexTree, ReIndexChildren ) { return declare([_Module], { initialize: function () { this.inherited(arguments); navigationTreePluginArea.add(ReIndexTree); navigationTreePluginArea.add(ReIndexChildren); } }); });</code></pre>   Both <code>ReIndexChildren.js</code> and <code>ReIndexTree.js</code> follow a similar pattern, differing mainly in naming and intent. For reference, here’s the code for <code>ReIndexChildren.js</code>: <pre class="language-javascript"><code>define([ "dojo/topic", "dojo/_base/declare", "epi/dependency", "epi/shell/XhrWrapper", "epi/shell/command/_Command" ], function (topic, declare, dependency, XhrWrapper, _Command) { return declare([_Command], { label: "Reindex Children", iconClass: "epi-iconReload epi-icon--success", constructor: function () { var registry = dependency.resolve("epi.storeregistry"); this.store = registry.get("epi.cms.contentdata"); }, _execute: function () { var contentLinkId = this.model.contentLink; // Create an XhrWrapper for making the API call var xhr = new XhrWrapper(); xhr.xhrGet({ url: "/api/indexing/reindex-tree", handleAs: "json", content: { contentLinkId: contentLinkId, childrenOnly: true }, failOk: true, load: function (response) { // Handle the success response (e.g., show a message) console.log("Reindexing successful:", response); }, error: function (response) { // Handle the error response (e.g., show an error message) console.error("Error reindexing:", error); } }); }, _onModelChange: function () { this.set("canExecute", true); } }); });</code></pre>   In the above implementation, I’m calling a custom controller endpoint at <code>/api/indexing/reindex-tree</code>. This endpoint accepts two parameters: <ul> <li> <code>childrenOnly</code>: A flag indicating whether to reindex only the direct children or the entire content tree under the selected node. </li> <li> <code>contentLinkId</code>: The ID of the selected node, which is used to identify the starting point for reindexing. </li> </ul> This approach gives editors or developers an easy way to trigger indexing selectively, without needing to reindex the entire site. You can find the full code in the GitHub repository (branch) here: <a href="https://github.com/pjangid/OptimizelyReindexModule/tree/feature/opti-module-reindex-tree">https://github.com/pjangid/OptimizelyReindexModule/tree/feature/opti-module-reindex-tree</a>   As always, there’s room for improvement. I’d love to hear your thoughts—please feel free to leave suggestions or feedback in the comments below.   Thanks & Regard, Praful2025-06-11T04:48:36.0000000Z

Blog post

Optimizely SaaS vs PaaS: A Comparison from Client and Developer PerspectivesOptimizely, one of the leading digital experience platform. Offering both Software-as-a-Service (SaaS) and Platform-as-a-Service (PaaS) solutions. Organizations choosing between these options must consider factors such as scalability, customization, maintenance, and development flexibility. In this article we are going to talk about the key differences between Optimizely SaaS and PaaS from both client and developer perspectives. <h2>Overview of Optimizely SaaS and PaaS</h2> <h3 style="padding-left: 40px;">Optimizely SaaS</h3> <ul> <li style="list-style-type: none;"> <ul> <li> Fully managed cloud-based service. </li> <li> Automatic updates and patches. </li> <li> Limited customization but quick deployment. </li> <li> Best suited for businesses looking for a low-maintenance, high-availability solution. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">Optimizely PaaS</h3> <ul> <li style="list-style-type: none;"> <ul> <li> Hosted in a managed cloud environment with more control. </li> <li> Requires ongoing maintenance, including updates and security. </li> <li> Offers greater flexibility for customization and integration. </li> <li> Best suited for businesses needing tailored solutions with specific functionalities. </li> </ul> </li> </ul> <h2>Comparison from a Client’s Perspective</h2> <h3 style="padding-left: 40px;">Cost & Pricing</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Subscription-based pricing with predictable costs. </li> <li> PaaS: Higher upfront costs with variable hosting expenses. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">Ease of Use & Maintenance</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Managed by Optimizely, reducing IT overhead and maintenance efforts. </li> <li> PaaS: Requires internal IT resources for deployment, security, and scaling. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">Scalability & Performance</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Automatically scales with demand, ensuring uptime and performance. </li> <li> PaaS: Scaling requires configuration and monitoring from the client’s IT team. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">Customization & Flexibility</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Limited customization options; best for businesses with standard needs. </li> <li> PaaS: High degree of customization, allowing unique integrations and tailored workflows. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">Security & Compliance</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Security and compliance are managed by Optimizely, reducing client concerns. </li> <li> PaaS: Requires internal governance and security management, adding complexity. </li> </ul> </li> </ul> <h2>Comparison from a Developer’s Perspective</h2> <h3 style="padding-left: 40px;">Development Flexibility</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Limited ability to customize backend functionalities; mostly front-end modifications. </li> <li> PaaS: Full control over development, with access to APIs, extensions, and third-party integrations. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">DevOps & CI/CD</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Minimal need for DevOps management, as infrastructure is handled by Optimizely. </li> <li> PaaS: Requires setup and maintenance of CI/CD pipelines, infrastructure, and monitoring. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">Integration Capabilities</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Predefined integrations and API limitations may restrict some use cases. </li> <li> PaaS: Allows deep integrations with custom systems, databases, and third-party services. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">Deployment & Version Control</h3> <ul> <li style="list-style-type: none;"> <ul> <li> SaaS: Automatic updates without client intervention; risk of breaking changes. </li> <li> PaaS: Controlled deployment cycles, allowing developers to test and release updates at their own pace. </li> </ul> </li> </ul> <h2>Which One Should You Choose?</h2> <table style="margin-left: 40px;"> <tbody style="padding-left: 40px;"> <tr style="padding-left: 40px;"> <th style="padding-left: 40px; text-align: left;">Factor</th> <th style="padding-left: 40px; text-align: left;">Optimizely SaaS</th> <th style="padding-left: 40px; text-align: left;">Optimizely PaaS</th> </tr> <tr style="padding-left: 40px;"> <td style="padding-left: 40px; text-align: left;">Cost & Pricing</td> <td style="padding-left: 40px; text-align: left;">Predictable, subscription-based</td> <td style="padding-left: 40px; text-align: left;">Higher upfront, variable costs</td> </tr> <tr style="padding-left: 40px;"> <td style="padding-left: 40px; text-align: left;">Maintenance</td> <td style="padding-left: 40px; text-align: left;">Fully managed by Optimizely</td> <td style="padding-left: 40px; text-align: left;">Requires internal IT management</td> </tr> <tr style="padding-left: 40px;"> <td style="padding-left: 40px; text-align: left;">Customization</td> <td style="padding-left: 40px; text-align: left;">Limited</td> <td style="padding-left: 40px; text-align: left;">Highly customizable</td> </tr> <tr style="padding-left: 40px;"> <td style="padding-left: 40px; text-align: left;">Scalability</td> <td style="padding-left: 40px; text-align: left;">Automatic</td> <td style="padding-left: 40px; text-align: left;">Requires configuration</td> </tr> <tr style="padding-left: 40px;"> <td style="padding-left: 40px; text-align: left;">Security & Compliance</td> <td style="padding-left: 40px; text-align: left;">Managed by Optimizely</td> <td style="padding-left: 40px; text-align: left;">Client-managed</td> </tr> <tr style="padding-left: 40px;"> <td style="padding-left: 40px; text-align: left;">Developer Flexibility</td> <td style="padding-left: 40px; text-align: left;">Limited backend access</td> <td style="padding-left: 40px; text-align: left;">Full control over development</td> </tr> <tr style="padding-left: 40px;"> <td style="padding-left: 40px; text-align: left;">Deployment Control</td> <td style="padding-left: 40px; text-align: left;">Automatic updates</td> <td style="padding-left: 40px; text-align: left;">Controlled release cycles</td> </tr> </tbody> </table> <h3 style="padding-left: 40px;">When to Choose Optimizely SaaS</h3> <ul> <li style="list-style-type: none;"> <ul> <li> If you need a low-maintenance solution with automatic updates. </li> <li> If your business processes fit within standard Optimizely capabilities. </li> <li> If cost predictability and ease of use are top priorities. </li> </ul> </li> </ul> <h3 style="padding-left: 40px;">When to Choose Optimizely PaaS</h3> <ul> <li style="list-style-type: none;"> <ul> <li> If your business requires custom integrations and development flexibility. </li> <li> If you have an in-house IT team to manage updates, security, and scaling. </li> <li> If you need greater control over deployment cycles and infrastructure. </li> </ul> </li> </ul> <h2>Short & Sweet Conclusion</h2> Both Optimizely SaaS and PaaS offer robust solutions, but the right choice depends on your organization’s needs. Clients should weigh cost, maintenance, and customization, while developers should consider flexibility and control over the infrastructure. By carefully assessing these factors, businesses can ensure they select the best Optimizely platform for their digital experience strategy. You can read for more information on the <a href="https://docs.developers.optimizely.com/">Optimizely's documentations site</a>. <h2>References</h2> <a href="/link/6d3bb925352f40a183d98c7fe6aae451.aspx">https://world.optimizely.com/products/cms/saas/</a>  2025-02-03T13:09:40.0000000Z

Blog post

Bulk publishing of unpublished content items/nodesIn Episerver, we don't have any built in feature that allows us to publish full site (bulk items) in one go. We recently faced one challenge to publish all category nodes. In CMS, we have an option of Project to perform bulk item update (change of state or publish). But in commerce we don't. And, in our case, we did import of content using custom code and a huge number of items were not published (even we used the SaveAction.Publish). Then, we decided to write custom code to do that (via scheduled job). And, after doing some RnD, I found that the following Method returns only published items. <pre class="language-csharp"><code>ContentRepository.GetChildren<T>(ContentReference contentLink)</code></pre> Then, the question is how to retrieve the unpublished node/items? Here is the answer, use the Language option with GetChildren method. <pre class="language-csharp"><code>ContentRepository.GetChildren<NodeContent>(parentNode.ContentLink, LanguageSelector.AutoDetect(true))</code></pre> This is just a trick to get the unpublished items/nodes. And, for bulk publish, you can use the <pre class="language-csharp"><code>ContentRepository.Publish(listOfPages);</code></pre> That's it. You are done. Thanks2021-02-06T07:26:50.0000000Z

Blog post

Skip jobs to execute on specific day(s) of the weekHi All, Recently came across a requirement of skipping jobs execution on weekends. So, I thought why not allow editors to control all/any jobs to stop execute on specific days of week. So, I took inspiration from @Paul's reply on <a href="/link/e348c78e8746471f931272aa98573e0b.aspx">this thread</a>. First, I created SelectionFactory for all existing jobs on StartPage (Home page), you can create this property on your setting item (as per your wish). Along with another property to select days of week to disable the jobs. <pre class="language-csharp"><code>[Display( Name = "Scheduled jobs", Description = "Select jobs to stop execution on specific day", GroupName = Global.GroupNames.SiteSettings, Order = 1000)] [SelectMany(SelectionFactoryType = typeof(ScheduledJobsSelectionFactory))] public virtual string ScheduledJobs { get; set; } [Display( Name = "Skip job execution on day(s)", Description = "Select days on which you don't want to execute jobs", GroupName = Global.GroupNames.SiteSettings, Order = 1010)] [SelectMany(SelectionFactoryType = typeof(WeekDaysSelectionFactory))] public virtual string SkipJobExecutionOnDays { get; set; }</code></pre> Which something will look like this in our CMS (in below image). <img src="/link/a8d8ed65d9564528b5868f946fcedfdf.aspx" /> [I selected some jobs and days to disable]. *I will add code of selection factories at the end Next, our scheduled job that will scan all our jobs and check if their next execution is fallin on the skip day, then just updated next execution field and saved back. Here this code contains function to get HomePage. <pre class="language-csharp"><code>[ScheduledPlugIn(DisplayName = "Skip JobExecution Scheduled Job")] public class SkipJobExecutionScheduledJob : ScheduledJobBase { private bool _stopSignaled; private readonly IContentLoader _contentLoader; private readonly IScheduledJobRepository _scheduledJobRepository; public SkipJobExecutionScheduledJob( IContentLoader contentLoader, IScheduledJobRepository scheduledJobRepository) { _contentLoader = contentLoader ?? throw new ArgumentNullException(nameof(contentLoader)); _scheduledJobRepository = scheduledJobRepository ?? throw new ArgumentNullException(nameof(scheduledJobRepository)); IsStoppable = true; } /// <summary> /// Called when a user clicks on Stop for a manually started job, or when ASP.NET shuts down. /// </summary> public override void Stop() { _stopSignaled = true; } /// <summary> /// Called when a scheduled job executes /// </summary> /// <returns>A status message to be stored in the database log and visible from admin mode</returns> public override string Execute() { //Call OnStatusChanged to periodically notify progress of job for manually started jobs OnStatusChanged($"Starting execution of {this.GetType()}"); var sb = new StringBuilder(); var homePage = this.GetHomePage(); if (homePage == null) return $"Could not retrieve site settings"; var jobs = homePage.ScheduledJobs?.Split(',').ToList(); var jobToDisable = jobs?.Select(x => this._scheduledJobRepository.Get(Guid.Parse(x))).ToList() ?? new List<ScheduledJob>(); var skipJobExecutionOnDays = homePage.SkipJobExecutionOnDays?.Split(',').ToList(); if (jobToDisable.Count > 0 && skipJobExecutionOnDays != null && skipJobExecutionOnDays.Count > 0) { foreach (var job in jobToDisable) { if (skipJobExecutionOnDays.Contains(job.NextExecution.DayOfWeek.ToString())) { job.NextExecution = job.NextExecution.AddDays(1); this._scheduledJobRepository.Save(job); OnStatusChanged($"Updated \"{job.Name}\" to run on \"{job.NextExecution}\""); sb.AppendLine($"Updated \"{job.Name}\" to run on \"{job.NextExecution}\""); } //For long running jobs periodically check if stop is signaled and if so stop execution if (_stopSignaled) { return "Stop of job was called"; } } } //For long running jobs periodically check if stop is signaled and if so stop execution if (_stopSignaled) { return "Stop of job was called"; } var rtn = sb.ToString(); if (rtn == string.Empty) { rtn = "Job completed successfully. No updates required."; } return rtn; } private StartPage GetHomePage() { var pageLink = SiteDefinition.Current.StartPage; if (pageLink == null || pageLink == ContentReference.EmptyReference) return null; this._contentLoader.TryGet(pageLink, out PageData page); if (page == null) return null; return this.GetHomePage(page); } private StartPage GetHomePage(PageData page) { if (page == null) return null; if (page is StartPage homePage) return homePage; homePage = this._contentLoader .GetAncestors(page.ContentLink) .FirstOrDefault(x => x is StartPage) as StartPage; return homePage; } }</code></pre> In addition, I am adding selection factory code here. <pre class="language-csharp"><code>public class ScheduledJobsSelectionFactory: ISelectionFactory { public Injected<IScheduledJobRepository> ScheduledJobRepository { get; set; } public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata) { var scheduledJobs = this.ScheduledJobRepository.Service.List(); var selections = scheduledJobs .Select(x => new SelectItem { Text = x.Name, Value = x.ID.ToString() }) .ToList(); return selections; } }</code></pre> <pre class="language-csharp"><code>public class WeekDaysSelectionFactory : ISelectionFactory { public IEnumerable<ISelectItem> GetSelections(ExtendedMetadata metadata) { return Enum .GetNames(typeof(DayOfWeek)) .Select(x => new SelectItem { Text = x, Value = x }) .ToList(); } }</code></pre> On a special note, you can add fields for time range to skip in that duration (Stop Execution Time and Start Execution Time). Special Note: This implementation is more focused with single site implementation. If you have jobs that are site specific you can follow comment by @Antti (below in comments). And to restrict the access you can follow <a href="/link/6c91863219a14ab988fe035a60573808.aspx">this post</a>. Reach-out to me if you have any question or concern :) Thanks & Regards Praful Jangid Happy Coding!2019-12-07T09:09:18.0000000Z

Blog post

Disabling Cache for Test Driven (page with active A/B test) contentCaching is a great feature to improve the site performance. But recently we faced issue with test driven content being cached. The user was seeing the same test content that get loaded first because it get cached. And, there were no good solution to vary content based on test driven content. So, we came up with a solution to disable cache for test driven content (page with active A/B testing). In order to do that you need to find if there is any active test for context item. I created an attribute by inheriting from default ContentOutputCacheAttribute. <pre class="language-csharp"><code>public class CustomContentOutputCacheAttribute : ContentOutputCacheAttribute { private static readonly Injected<IMarketingTestingWebRepository> _marketingTestingWebRepository; public CustomContentOutputCacheAttribute() { this.UseOutputCacheValidator = UseOutputCache; } private static bool UseOutputCache(IPrincipal principal, HttpContextBase context, TimeSpan duration) { var url = context.Request.Url?.ToString(); var content = UrlResolver.Current.Route(new UrlBuilder(url)); if (content == null) return false; return !_marketingTestingWebRepository.Service.GetActiveTestsByOriginalItemId(content.ContentGuid).Any(); } }</code></pre> Now, next step is apply this attribute to your Page controller Index method. You can see the test content is not loading from cached. <pre class="language-csharp"><code>public class StoryPageController : PageController<StoryPage> { [CustomContentOutputCache(Duration = 7200)] public ActionResult Index(StoryPage currentPage) { return this.View(currentPage); } }</code></pre> Now, open your browser and check in network tab if the current page Response Headers > Cache-Control value. If you have any active test running for current page then the value should be private otherwise public with max-age=7200 [value set by you for how long you want to cache]. Thanks and regards Happy Coding2019-11-13T09:16:43.0000000Z

Blog post

Make property help text permanently visibleNOTE: Supported upto CMS version 12.9 In continuous efforts to make editors life easy, it will be helpful to make the property help text (shown in below image) permanently visible. <img src="/link/9cbcc2248052421e9e01d795e519be3d.aspx" /> In reference to this <a href="https://talk.alfnilsson.se/2014/12/18/display-help-text-in-on-page-editing/">blog post</a>, I would like address one <a href="/link/405ece92732f4a2a974c9fa6aaef9c92.aspx">issue</a> that, when we try to create block directly from content area those help text are not visible. So, Let's start... We will add CSS properties, that will add title text into html element's :after selector (for elements that contains help text in title attribute). In Episerver, to add a css you will need module.config file, to be added in main project. Create a module.config file and paste the following lines (don't forget to update the path to your css file) <pre class="language-markup"><code><module xmlns:xdt="http://schemas.microsoft.com/XML-Document-Transform"> <clientResources>  <add name="epi-cms.widgets.base" path="/ClientResources/epi-cms.css" resourceType="Style" /> </clientResources> </module></code></pre> The <code>epi-cms.css</code> is our css file, in which we are going to add our own css classes and properties. Copy paste below css into your css file. <pre class="language-css"><code>/* Set property descriptions to be visible */ .Sleek .dijitTabPaneWrapper .epi-form-container__section__row label[title]:after, .Sleek .epi-createContent .epi-form-container__section__row > label[title]:after { content: attr(title); display: block; font-size: 0.8em; font-style: normal; margin: 0.3em 0 0 0; } </code></pre> This css class is for the normal edit window and when we create a block in assets pan. The second class is for, when you create a block from content area (by clicking on Create a new block). And here we got our help text visible <img src="/link/10c2f82a4dc24d698f0726d15a0a7919.aspx" /> Let me know if you have any question or concern. Thanks & Regards Praful Jangid Happy coding :)2019-10-19T10:01:59.0000000Z

Blog post

Adding icons/thumbnails to content tree items in Episerver CMSUpdates [2021/01/04]: Geta has updated the module to allow you to configure the tree icons. See below link <a href="https://github.com/Geta/Epi.FontThumbnail#tree-icon-feature">https://github.com/Geta/Epi.FontThumbnail#tree-icon-feature</a> You might not need this customization anymore. . . In continuous efforts to make the content editor’s life easy, we will learn to add icons/thumbnails, to the items in our content tree. So that we can easily identify the type of an item. In EpiServer, we have an attribute to add preview images to our custom types (Page/Block types). But that will only show while adding new item (as shown in below image). So, this is the default scenario. When we are using the Episerver’s <code>ImageUrl</code> attribute. <img src="/link/a95e610fb93248a4ba3ede424f7670ff.aspx" /> You can see the icons on the content types (on right side), but those are missing on the items in tree (in left panel). So, I would recommend Geta module for thumbnails (<a href="https://github.com/Geta/Epi.FontThumbnail">Geta.Epi.FontThumbnail</a>). That is very handy and easy to use. And, this (below image) is when using the Geta module. <img src="/link/4f677fdbe47d4f6c9c8c141954f7c7ea.aspx" /> The same situation we face here, icons are missing on content tree items. Here, I will add some code along with Geta module to add icons to our items in tree. Here we go. Let’s start by adding an Initialization Module, named let's say <code>TreeIconsInitialization</code> inherited from <code>IInitializableModule</code> and dependencies as show below. <pre class="language-csharp"><code>[InitializableModule] [ModuleDependency(typeof(InitializableModule))] [ModuleDependency(typeof(FontThumbnailInitialization))] public class TreeIconsInitialization : IInitializableModule { }</code></pre> Add the following code inside the Initialize function <pre class="language-csharp"><code>public void Initialize(InitializationEngine context) { if (context == null) return; var assemblies = AppDomain.CurrentDomain.GetAssemblies().ToList(); assemblies = assemblies.Where(x => x.GetName().Name.StartsWith("AlloyDemo")).ToList(); var types = assemblies.SelectMany(x => x.GetTypes()).ToList(); var typesWithIcon = types .Where(type => type.IsDefined(typeof(ThumbnailIcon), false)) .ToList(); var iconClasses = typesWithIcon .Select(type => new { Type = type, IconClass = this.ParseIconClass(type) }) .ToDictionary(key => key.Type, value => value.IconClass); foreach (var uiDescriptor in context .Locate .Advanced .GetInstance<UIDescriptorRegistry>().UIDescriptors) { if (iconClasses.ContainsKey(uiDescriptor.ForType)) { uiDescriptor.IconClass += iconClasses[uiDescriptor.ForType]; } } }</code></pre> In above code, we are scanning the project assemblies to retrieve the types that are defined with the <code>ThumbnailIcon</code> attribute. Here, function <code>ParseIconClass()</code> is responsible for parsing the icon class (font awesome icon class). Here is the code for parsing the icon class: <pre class="language-csharp"><code>private string ParseIconClass(Type type) { if (type == null) return null; var attribute = Attribute.GetCustomAttribute(type, typeof(ThumbnailIcon)) as ThumbnailIcon; string path = attribute?.Path; if (string.IsNullOrWhiteSpace(path)) return null; Uri.TryCreate($"http://localhost{path}", UriKind.RelativeOrAbsolute, out Uri uri); var query = System.Web.HttpUtility.ParseQueryString(uri.Query); string characterCodeString = query["Character"]; if (!int.TryParse(characterCodeString, out var characterCode)) return null; FontAwesome fa = (FontAwesome)characterCode; string name = System.Enum.GetName(typeof(FontAwesome), fa); string kebab = FromPascalCaseToKebabCase(name); string iconClass = $"fa fa-{kebab}"; return iconClass; }</code></pre> In this function, we are getting the path value of the <code>ThumbnailIcon</code> attribute, as this path contains the icon code in querystring param “Character”. Then converting that code into the font awesome icon class. The method <code>FromPascalCaseToKebabCase()</code> is for converting the icon name into actual font-awesome icon class. <pre class="language-csharp"><code>private static string FromPascalCaseToKebabCase(string input) { if (string.IsNullOrWhiteSpace(input)) return null; StringBuilder retVal = new StringBuilder(32); retVal.Append(char.ToLowerInvariant(input[0])); for (int i = 1; i < input.Length; i++) { if (char.IsLower(input[i])) { retVal.Append(input[i]); } else { retVal.Append("-"); retVal.Append(char.ToLower(input[i], CultureInfo.InvariantCulture)); } } return retVal.ToString(); }</code></pre> After all these, of course we will need to add reference to font awesome css file. To do so, add (if, not already added) <code>module.config</code> and following code. <pre class="language-csharp"><code><?xml version="1.0" encoding="utf-8"?> <module> <clientResources> <add name="epi-cms.widgets.base" path="/Static/css/font-awesome.min.css" resourceType="Style" /> </clientResources> </module> </code></pre> And, here we have our icons/thumnails to content tree items <img src="/link/680b512f433d4a73bb504522564f7984.aspx" /> <img src="/link/860a80d6a0184296874811735a1008f9.aspx" /> RnD credit goes to our EMVP <a href="/link/5341f632537c4b0ab6b8fb651bd310f8.aspx?userid=ee58d302-1eab-e411-9afb-0050568d2da8">Drew Null</a>. If anyone need a hand on any issue or understanding any code line, do let me know. Happy Coding, thanks and regards, Praful Jangid2019-07-15T21:18:55.0000000Z

Blog post

Indexing Block's Content to make it searchableBy default, the content of a block (that is added to ContentArea on a page) is not indexed and therefore you can’t search for the content of that block instance in your site. So, the content of a page (including block's content) is indexed as normal text under "SearchText$$string". To check if the content from Block is being indexed or not. Go to Episerver CMS, Find -> Overview -> Explore, look for the page you want to confirm. Expand to see all its indexed properties. You can see here that, by default the content of the block is not being indexed. Let's talk about how to enable it. Here we go.... There are several ways to do that, use any of them as per your requirement. <ol> <li>To allow content of all the instances of a block type to be indexed. Just add an attribute <code>[IndexInContentArea]</code> on your block.<code></code> <pre class="language-csharp"><code>[IndexInContentAreas] public class CopyBlock : SectionBlock</code></pre> <code></code><code></code> <code></code> <code></code> <code></code> Tip: If you still not see the content is being indexed. Perform some changes to your page and you will see it worked. It's only to reindex the page. </li> <li> To exclude content of certain instances of the block, add a bool type property with exact name IndexInContentAreas on your block type.<code></code> <pre class="language-csharp"><code>public virtual bool IndexInContentAreas { get; set; }</code></pre> <code></code> And set its value to True, so that content of all instances will be indexed by default. To exclude content of any instance, uncheck the checkbox for property IndexInContentAreas (for that instance only). </li> <li> Using search convention, changing the default behaviour of IContentIndexerConventions.ShouldIndexInContentAreaConvention. To index a particular block type, create a class and inherit it with interface IShouldIndexInContentAreaConvention <pre class="language-csharp"><code>public class ShouldIndexInContentAreaConvention : IShouldIndexInContentAreaConvention { public bool? ShouldIndexInContentArea(IContent content) { return content is CopyBlock; } } </code></pre>  Now create an Initializable module <pre class="language-csharp"><code>[InitializableModule] [ModuleDependency(typeof(EPiServer.Find.Cms.Module.IndexingModule))] public class SearchConventionInitializationModule : IInitializableModule { public void Initialize(InitializationEngine context) { ContentIndexer.Instance.Conventions.ShouldIndexInContentAreaConvention = new ShouldIndexInContentAreaConvention(); } public void Uninitialize(InitializationEngine context) { } } </code></pre> In addition, to control the depth of ContentArea to be indexed, can be controlled by MaxDepthContentAreaConverter (by default all nested ContentArea are indexed) <pre class="language-csharp"><code>public class SearchConventionInitializationModule : IInitializableModule { private const int MaxDepth = 4; public void Initialize(InitializationEngine context) { ContentIndexer.Instance.Conventions.ShouldIndexInContentAreaConvention = new ShouldIndexInContentAreaConvention(); SearchClient.Instance.Conventions.ForInstancesOf<ContentArea>().ModifyContract(x => x.Converter = new MaxDepthContentAreaConverter(MaxDepth)); } public void Uninitialize(InitializationEngine context) { } }</code></pre> </li> </ol> Document reference: <a href="/link/117e06a6d16f44178bb023043938a37b.aspx">https://world.episerver.com/documentation/developer-guides/find/Integration/episerver-cms-7-5-with-updates/Indexing-content-in-a-content-area/</a> Happy Coding :)2019-04-12T21:44:27.0000000Z

Blog post

Sorting dictionaries / translations with Episerver eventsWhat we are trying to achieve here is, whenever I create a new entry in Translations Block (to create dictionary item), the latest entry goes at the end of the list. Which is not sorted in alphabetic order. Therefore, it is difficult to find any entry as the list size increases. So, we have a TranslationsBlock, that contains Translations property list type. This Translations contains three properties (Key, Phrase and Description). We will apply sorting in alphabetic ascending (a->z) order. First on Key, then Phrase and then Description.   Here we go, Create an Initialization module named EventInitialization (whatever name you prefer) and decorate it with attributes <pre class="language-csharp"><code>[InitializableModule] [ModuleDependency(typeof(EPiServer.Web.InitializationModule))] </code></pre> Also, don’t forget to inherit class with interface IInitializableModule. <pre class="language-csharp"><code>public class EventInitialization : IInitializableModule </code></pre> Implement the methods of this interface. Now, inside the Initialize (implemented from interface) method bind your event. <pre class="language-csharp"><code>var events = ServiceLocator.Current.GetInstance<IContentEvents>(); events.PublishedContent += this.OnSavedContent; </code></pre> I attached it to PublishContent event, that will be raised as the content is being published. Now, the finishing work goes inside the OnSavedContent method. <pre class="language-csharp"><code>private void OnSavedContent(object sender, ContentEventArgs contentEventArgs) { if (contentEventArgs.Content is TranslationsBlock translationsBlock) { var repository = ServiceLocator.Current.GetInstance<IContentRepository>(); var block = (TranslationsBlock)translationsBlock.CreateWritableClone(); block.Translations = block.Translations? .OrderBy(x => x.Key) .ThenBy(x => x.Phrase) .ThenBy(x => x.Description) .ToList(); repository.Save((IContent)block, SaveAction.Publish); } }</code></pre> Here, first I checked for the content type is our required type TranslationsBlock or not. Then creating a writable clone to update it. Now apply your operations and save it with the help of Save method of ContentRepository. Happy Coding :) Thanks, Praful Jangid2019-02-27T03:47:22.0000000Z

Blog post