Blog posts by Ram Kumar K

Blog posts by Ram Kumar K2020-12-23T21:01:12.0000000Zhttps://world.optimizely.com/blogs/ram-kumar-k/ Optimizely World Guided Journey – Developing a Wizard Component using EPiServer CMS<h1>Guided Journey – Developing a Wizard Component using EpiServer CMS</h1> <h2> Requirement:</h2> The purpose of the online guided journey is to showcase all programs or services offered by MEDC and its partners in the state of Michigan. By self-identifying, a user will be able to quickly get to a listing of resources available along with a link to where more information can be found on each of the programs or services.  <h2>Functional Prototype Design:</h2> <img src="https://rkepiserverblob.blob.core.windows.net/wizardblob/Guided_Journey_Requirement.gif" alt="Guided Journey Requirements" /> <h2>Development Approach:</h2> The user must choose a path to go down to. We would like to build ourselves a cool, simple, and flexible wizard component block using Episerver CMS, Bootstrap, and frontend JavaScript framework. We would like to make this component as simple and user friendly as possible for content authors to create Guided Journeys.  Example: When the user clicks on Path 1,  we provide them with options to choose from Path 1.1, path 1.2, and Path 1.3, and if they click on Path 1.1, they will be given options to choose Path 1.1.1, Path 1.1.2, Path 1.1.3, and so on.  The following illustrates the requirement from the Architect's point of view. This can be achieved in different ways, using nested blocks (performance and maintenance nightmare?), or link list (maybe). I choose my new fascination “Generic Property List”.  <img src="/link/a358d3a7f36f4bac820ec54c5a08a96f.aspx" />                Based on the prototype, the guided Journey requires the following <ul></ul> <ol> <li>Step Image – Contentreference/URL</li> <li>Step Title- String</li> <li>Path Data - <a href="/link/5639beae3dc9454cbe72a4a3106de560.aspx">Custom PropertyList</a> <ol> <li>Path Title - String</li> <li>Path Description (Needed for end of Journey modal) - XHTMLString</li> <li>Path Resource Link (Needed for end of Journey modal) - URL</li> <li>Step Image - Contentreference/URL</li> <li>Step Title - String</li> <li>Path Data - <a href="/link/5639beae3dc9454cbe72a4a3106de560.aspx">Custom PropertyList</a> <ol> <li>Path Title</li> <li>Path Description (Needed for end of Journey modal)</li> <li>Path Resource Link (Needed for end of Journey modal)</li> <li>Step Image</li> <li>Step Title</li> <li>Path Data</li> <li>Not sure Text</li> </ol> </li> <li>Not Sure Text - XHTMLString</li> </ol> </li> <li>Not sure text - XHTMLString</li> </ol>   Each step is a JSON object, the Path data property from the step object is an array of more steps (nested JSON object).    CMS Generic property list used in Block: <img src="/link/b72bd8dd9c2c4ab0abc8fedac0984631.aspx" />  <img src="https://rkepiserverblob.blob.core.windows.net/wizardblob/Guided_Journey_CMS_Block.gif" width="1292" alt="Guided Journey CMS Block" height="812" /> JSON Output:  <img src="/link/eb76f5af270748f0ab7c0add94574598.aspx" />     Wizard component block on a page: <img src="https://rkepiserverblob.blob.core.windows.net/wizardblob/Guided_Journey_Wizard_Final.gif" width="1292" alt="Guided Journey Wizard" height="812" /> "A successful application never really is complete but is constantly being improved, hopefully based around users needs."  Please share your comments if you would like to approach it differently.  “Wishing you a season that’s merry and bright with the light of God’s love.” 2020-12-23T21:01:12.0000000Z

Blog post

Required Field Validation for CategoryWe all have come across specific requirements for CMS Content authors. One of such requirement for our news sections is, "Every news article belongs to one or more categories". We must force user to select a category before publish it. We have used a Custom validation rule to fulfill this requirement. Episerver Documentation: https://world.episerver.com/documentation/developer-guides/CMS/Content/Properties/built-in-property-types/Writing-custom-attributes/ <pre class="language-csharp"><code> /// <summary> /// Required field validation for Category. ///Reference: https://world.episerver.com/documentation/developer-guides/CMS/Content/Properties/built-in-property-types/Writing-custom-attributes/ /// </summary> [AttributeUsage(AttributeTargets.Field | AttributeTargets.Property, AllowMultiple = false, Inherited = true)] public class FieldRequiredForPublishAttribute : ValidationAttribute { public bool IsRequired { get; set; } public FieldRequiredForPublishAttribute() : this(true) { } public FieldRequiredForPublishAttribute(bool isRequired) { IsRequired = isRequired; } public override bool IsValid(object value) { if (value == null) return false; if (value is CategoryList cat) return cat?.Any() == true; return false; } public override string FormatErrorMessage(string name) { return $"{name} cannot be empty"; } }</code></pre> Set RequiredFieldAttribute for News Pages. <pre class="language-csharp"><code> [Display( Name = "News Category (*)", Description = "Select News Category", GroupName = SystemTabNames.Content, Order = 3)] [FieldRequiredForPublish] public override CategoryList Category { get; set; }</code></pre>  The code is generic enough that you can extend to make any field requied. Thank you  & happy coding!2018-10-07T14:49:02.0000000Z

Blog post

Using Azure Cloud for Storing Episerver CMS Blobs<!DOCTYPE html> <html> <head> <title>Using Azure Cloud for Storing Episerver CMS Blobs - </title> <meta name="author" content="Ram Kumar K" /> <meta name="keywords" content="Episerver CMS Blob Storage" /> </head> <body> Working with multiple developers in the Episerver Environment requires sharing Blobs.  One of the best options our team agreed on was using <a href="https://azure.microsoft.com/en-us/pricing/member-offers/credit-for-visual-studio-subscribers/">Free Azure</a> account to do a POC.  The following would help you to set-up storage account in Azure and use that as a default blob provider for your Episerver project. <ul> <li>Create a storage account by using the Azure portal</li> <li>Create a Resource, Resource Group & Storage Account</li> <li>Create Container and Get Access keys</li> <li>Install Azure Packages in Episerver</li> <li>Transfer files using  AzCopy </li> </ul> 1) Create a storage account by using the Azure portal Login to Azure Site using the following Link <a href="https://portal.azure.com/">https://portal.azure.com/</a> <img src="/link/4dd05b6b77654fc38eae1148566d2576.aspx" alt="Image Azure_1.png" /> 2) Create a Resource, Resource Group & Storage Account Resource:  A manageable item that is available through Azure.  EX: Storage account, Web app, Database, VM Resource Group: A container that holds related resources for an Azure solution. Storage Account: A general-purpose storage account provides access to all of the Azure Storage services: blobs, files, queues, and tables. <img src="/link/5b02df9334fb46c28e89467f16dc0c84.aspx" alt="Image Azure_2.PNG" /> 2) Resource Group: <img src="/link/a767d97a4d2d4c69b13ce4768148cfb1.aspx" alt="Image Azure_REsource_Group2.png" /> 2) Storage Account  <img src="/link/7a3e58fc202e49c9b81a3366bb1435ac.aspx" alt="Image Azure_Storage_Account2.png" /> 3)Create Container and Get Access keys After creating the storage account, you can add a container and get keys for the storage account to access them in Episerver CMS. The connectionstring info is used to connect the Azure storage. <img src="/link/83ac3f6cb74041a9a07da0cad74583f3.aspx" alt="Image Azure_Storage_Container2.png" /> <img src="/link/8f1ef5671c4d46c996e51405afde2d3d.aspx" alt="Image Azure_Storage_Container_Access2.png" /> 4) Install Azure Packages in Episerver CMS Project. Add <a href="http://nuget.episerver.com/package-details/?packageId=EPiServer.Azure">EPiServer Azure Nuget</a> Package <img src="/link/b69939c1b8e94e939a7a59c852252652.aspx" alt="Image Episerver_Azure_Nuget.PNG" /> 4) Add  the following in in web.config Change Blob provider : "mycontainer" is name of your Azure Blob Storage Container <pre class="language-xml"><code> <blob defaultProvider="azureblobs"> <providers> <add name="azureblobs" type="EPiServer.Azure.Blobs.AzureBlobProvider,EPiServer.Azure" connectionStringName="EPiServerAzureBlobs" container="mycontainer"/> </providers> </blob></code></pre> <pre class="language-xml"><code> Add connection string</code></pre> <pre class="language-xml"><code><connectionStrings> <add name="EPiServerAzureBlobs" connectionString="DefaultEndpointsProtocol=https;AccountName=myaccount;AccountKey=abcdefghij" /> </connectionStrings></code></pre> <pre class="language-xml"><code> </code></pre> 5) Upload/Transfer blobs using <a href="https://docs.microsoft.com/en-us/azure/storage/common/storage-use-azcopy">AzCopy</a> <ul> <li><a href="http://aka.ms/downloadazcopy">AzCopy</a> is a command-line utility designed for copying data to/from Microsoft Azure Blob</li> <li>AzCopy /Source:C:\myfolder /Dest:https://myaccount.blob.core.windows.net/mycontainer /DestKey:key /S</li> <li><img src="/link/4b3763e5d750444ca4b3f6a52c80de53.aspx" alt="Image AZure_copy.png" /></li> </ul> That's it. Run the website and You are using Azure storage for blobs. This would help your team in the multi-developer environment and remote development as well. This POC was done using free VS subscription and we have moved to Gov Cloud now. Reference: <a href="https://docs.microsoft.com/en-us/azure/storage/common/storage-create-storage-account?toc=%2fazure%2fstorage%2fblobs%2ftoc.json">Azure Quick Start</a>  </body> </html>2018-03-24T15:27:36.0000000Z

Blog post