Blog posts by Daved Artemik2023-01-04T14:00:00.0000000Zhttps://world.optimizely.com/blogs/daved-artemik/Optimizely WorldBe Careful When Versioning Your Projects<p>Our build and release pipeline in DevOps auto-versions our builds when we publish a release to the Opti DXP. A pipeline step generates a version and assigns it to a variable, and that variable is used for the build when creating the package to push to the DXP instance. However, as mentioned in <a href="https://beendaved.blogspot.com/2022/12/updating-project-versions-in-azure_01169308755.html" target="_blank">another post</a>, this process was causing some odd behavior during development.</p><a href="https://beendaved.blogspot.com/2023/01/be-careful-when-versioning-your-projects.html#more"></a>2023-01-04T14:00:00.0000000ZBlog postUpdating Project Versions in Azure DevOps<p>We have a couple projects in DevOps that specify an incrementing build version as part of the release pipeline. The approach we have is working well and is deploying our projects with the proper version to our hosted environments. This approach, however, was causing some issues for local development and we needed a way to keep our local versions in sync with the releases. After looking into the behaviour I discovered we weren't the only ones. A quick search revealed many discussions trying to deal with this situation, and after some trial and error I was able to come up with a solution.</p><a href="https://beendaved.blogspot.com/2022/12/updating-project-versions-in-azure_01169308755.html#more"></a>2022-12-28T14:00:00.0000000ZBlog postUpdating Project Versions in Azure DevOps<p>We have a couple projects in DevOps that specify an incrementing build version as part of the release pipeline. The approach we have is working well and is deploying our projects with the proper version to our hosted environments. This approach, however, was causing some issues for local development and we needed a way to keep our local versions in sync with the releases. After looking into the behaviour I discovered we weren't the only ones. A quick search revealed many discussions trying to deal with this situation, and after some trial and error I was able to come up with a solution.</p><h4 style="text-align: left;">DevOps and PowerShell provide enough flexibility</h4><p>The existing version update happens via a PowerShell script that runs as part of the release pipeline. First, a variable is set to the build version to be used. Then, the build command is called with that variable to specify the version. Because that process was working and in place prior to my involvement on the pipeline I didn't want to change it. Instead, I added a new pipeline step after the existing versioning step, and called a new custom PowerShell script. </p><p>[pre class="brush:yml;" title="Sample Pipeline YML"]<br />trigger:<br />- develop<br /><br />pool:<br /> vmImage: 'windows-latest'<br /><br />variables:<br /> # My project variables here<br /> <br />steps:<br /> # This is important to allow scripts access to auth token<br />- checkout: self<br /> persistCredentials: true<br /><br /> # Set Build Number to variable<br />- task: PowerShell@2<br /> displayName: 'Set the Build Number'<br /> inputs:<br /> targetType: inline<br /> script: <br /> Write-Host "Setting Build Number" <br /> Write-Host "###vso[task.setvariable variable=buildNumber]$(VersionNumber).$(VersionRevision).$(($(Get-Date).ToUniversalTime()-[datetime]"01/01/2022 00:00").Days.ToString()).$([System.Math]::Floor($(Get-Date).TimeOfDay.TotalMinutes).ToString())"<br /><br /> # Extra step for debugging version<br />- task: PowerShell@2<br /> displayName: 'Confirm Build Number'<br /> inputs:<br /> targetType: inline<br /> script: Write-Host "Build Number $(buildNumber)"<br /><br /> # Update version in code in repo<br />- task: PowerShell@2<br /> displayName: 'Update Project Version'<br /> inputs:<br /> targetType: filePath<br /> filePath: 'dev\_SolutionItems\Powershell Scripts\UpdateProjectVersions.ps1'<br /> arguments: '$(Build.SourceBranch) $(Build.SourcesDirectory) $(buildNumber)'<br /><br /> # Extra steps for various build and configuration tasks go here<br /><br /> # Build command specifying version previously set<br />- task: DotNetCoreCLI@2<br /> displayName: 'Build Code'<br /> inputs:<br /> command: build<br /> projects: '$(projects)'<br /> arguments: '--configuration $(buildConfiguration) --framework $(coreFramework) -p:Version=$(buildNumber)'<br /><br /> # Code to publish and deploy package<br />[/pre]</p><p> </p><p>Pay attention to the first two lines under steps declaring a checkout step with the "<b>persistCredentials</b>" option set to "<b>true</b>". This ensures that scripts executing can access the system token. This is needed for proper permissions for the GIT operations in the PowerShell script. <br /></p><h4 style="text-align: left;">The custom PowerShell script updates the version information in the code base. </h4><p>The important thing about updating the version in the codebase is it needs to make that update to the code in the repository. The script below is the solution to perform that task. It takes in 3 required parameters to specify the solution root directory, the version number to use, and the calling branch from our GIT repo. It then performs the following tasks:</p><ol style="text-align: left;"><li>Create a temporary GIT branch on the pipeline agent</li><li>Identify and loop through all CSProj files in the solution directories</li><li>Set version information on all identified CSProj files (.NET Core+)</li><li>Add the updates to the GIT repo for the temp branch</li><li>Set the Username and Email for the commit details to reflect the Azure Agent</li><li>Commit changes to the temp branch</li><li>Merge and push the changes into the source branch<br /></li></ol><p>[pre class="brush:pshell" title="Update Version PowerShell"]<br />param<br /> (<br /> [Parameter(Position=0, Mandatory)]<br /> [ValidateNotNullOrEmpty()]<br /> [string]$sourceBranch,<br /> [Parameter(Position=1, Mandatory)]<br /> [ValidateNotNullOrEmpty()]<br /> [string]$rootDir,<br /> [Parameter(Position=2, Mandatory)]<br /> [ValidateNotNullOrEmpty()]<br /> [string]$version<br /> )<br /> if([string]::IsNullOrWhiteSpace($sourceBranch)){<br /> throw "Source branch must be specified."<br /> }<br /> if([string]::IsNullOrWhiteSpace($rootDir)){<br /> throw "Please specify the root path containing the CSProj files to update."<br /> }<br /> if([string]::IsNullOrWhiteSpace($version)){<br /> throw "Please specify the version number to be used."<br /> }<br /><br />$sourceBranch = $sourceBranch.Replace("refs/heads/","")<br />$tempBranch = "temp/UpdateVersion_$($version)"<br /># create a new branch for hosting update<br />git branch $tempBranch --quiet<br /># switch to new branch for performing updates<br />git checkout $tempBranch --quiet<br /><br /># function to update or add and update XML nodes in project group<br />Function SetNodeValue($xmlRootNode, [string]$nodeName, [string]$nodeValue) {<br /> $propGroup = $xmlRootNode.Node.SelectSingleNode("PropertyGroup")<br /> $node = $propGroup.SelectSingleNode("./$($nodeName)")<br /> <br /> if ($node -eq $null) {<br /> Write-Host "Adding node for $($nodeName)"<br /> $node = $propGroup.OwnerDocument.CreateElement($nodeName)<br /> $nodeAdded = $propGroup.AppendChild($node) # do this to avoid console output<br /> }<br /> else {<br /> Write-Host "Existing node found for $($nodeName)"<br /> }<br /> $node.InnerText = $nodeValue <br /> Write-Host "Set value $($nodeValue) for node $($nodeName)"<br />} <br /># loop all CSProj files so they are all on same version<br />Get-ChildItem -Path $rootDir -Filter "*.csproj" -Recurse -File |<br /> ForEach-Object {<br /> Write-Host "Found project file $($_.FullName)"<br /> $projPath = $_.FullName<br /> $projXml = Select-Xml $projPath -XPath "//Project"<br /> <br /> SetNodeValue $projXml "AssemblyVersion" $version<br /> SetNodeValue $projXml "FileVersion" $version<br /> SetNodeValue $projXml "Version" $version<br /> <br /> $doc = $projXml.Node.OwnerDocument <br /> $doc.PreserveWhitespace = $true<br /> $doc.save($projPath)<br /> <br /> # add the updated CSProj to GIT<br /> git add $projPath <br /> }<br /><br /># update email and username to identify repo updates by automated pipe - not a real address<br />git config user.email "azure.agent@mydomain.com"<br />git config user.name "Azure Agent" --replace-all<br /># commit changes with a comment identifying pipeline mod<br />git commit -m "[auto] Update Version: Set project versions to $($version)"<br /># switch back to the original branch that triggered this<br />git checkout $sourceBranch --quiet<br /># pull latest from git<br />git pull --quiet<br /># merge the proj updates back into source branch, with comment to indicate operation<br />git merge $tempBranch -m "[auto] Update Version: Complete version to $($version) for source $($sourceBranch)" --quiet<br /># push changes back into source branch<br />git push -u origin --quiet<br />[/pre]</p><p> </p><h4 style="text-align: left;">This process updates the version information in our repo</h4><p>With this script in place, each time a merge happens to our pipeline branch, the develop branch in this case, the version will be updated in each project file for our solution. After this, any pull of that branch will include the latest version number in it. This does mean that any local branches in progress when this happens need to pull down and merge the latest version before committing to include the latest changes without conflict. But that is a small price to pay for the automation this provides. <br /></p>2022-12-21T14:00:00.0000000ZBlog postOptimizely CMS 12 Installation Breaking Changes for Visual Studio 2019<p>Last October I wrote an article to act as an addendum to the Optimizely Documentation for starting a new CMS site using CMS 12 and .NET 5. Since then there have been some updates to the documentation and the packages involved. Today I got bit by one of them because I am using Visual Studio 2019, and if you are too this might save you some trouble.</p><a href="https://beendaved.blogspot.com/2022/05/optimizely-cms-12-installation-breaking.html#more"></a>2022-05-13T11:00:00.0000000ZBlog postValidation Summary for Optimizely Forms in Non JS Mode<p>I recently wrote an article on how to <a href="https://beendaved.blogspot.com/2021/11/validation-summary-for-optimizely-forms.html">create a Validation Summary for Optimizely Forms</a>. The approach described in that article uses Form Client Events and Javascript to add a validation summary to the top of the form. That method is dependent on Javascript, and Forms must operate in JS mode for it to work. This article provides a different solution for use with Optimizely Forms with <b>workInJonJSMode</b> enabled.<br /></p><h4 style="text-align: left;">A custom Form Container Block is req<span>uired for this method</span><br /></h4><p>Create a custom Form Container Block using one of the following guides: </p><ol style="text-align: left;"><li><a href="https://world.optimizely.com/documentation/developer-guides/forms/creating-a-custom-form-block/" target="_blank">Optimizely documented way</a> <br /></li><li><a href="https://beendaved.blogspot.com/2021/11/custom-optimizely-form-containers.html" target="_blank">Custom Optimizely Form Containers - Put the View Where You Want <br /></a></li><li><a href="https://beendaved.blogspot.com/2021/11/optimizely-form-container-block-with.html" target="_blank">Optimizely Form Container Block with Razor View</a> <br /></li></ol><div style="text-align: left;"> </div><h4 style="text-align: left;">If your Form Container Block file is ASCX</h4><p>Locate the div with class <b>Form__Status__Message</b> and add the validation summary block below. </p><p>[pre class="brush:xhtml;class-name:collapse-box"]<br /> <%-- area for showing Form's status or validation --%><br /> <div class="Form__Status"><br /> <div class="Form__Status__Message <%: statusDisplay %>" data-f-form-statusmessage><br /> <%= message %><br /> </div><br /> <% // add this section below Form__Status__Message<br /> if (_formConfig.WorkInNonJSMode && ViewBag.ValidationFail)<br /> {<br /> %> <br /> <div class="Form__Validation__Summary"><br /> <%<br /> foreach (var element in Model.Form.Steps.ElementAt((int)ViewBag.CurrentStepIndex)?.Elements.Select(e => e.SourceContent as EPiServer.Forms.Implementation.Elements.BaseClasses.ValidatableElementBlockBase).Where(e => e != null))<br /> {<br /> var validationMessage = element.GetErrorMessage();<br /> if (!string.IsNullOrEmpty(validationMessage)) {<br /> %><br /> <div class="validation-summary-error"><br /> <label for="<%= element.FormElement.Guid %>"><%= element.Label %>:</label><br /> <%= Html.ValidationMessageFor(element) %><br /> </div><br /> <%<br /> }<br /> }<br /> %><br /> </div><br /> <% } %><br /> </div><br />[/pre]</p><div style="text-align: left;"> </div><h4 style="text-align: left;">If your Form Container Block file is CSHTML</h4><p>Locate the div with class <b>Form__Status__Message</b> and add the validation summary block below. </p><p>[pre class="brush:razor;class-name:collapse-box"]<br /> @* area for showing Form's status or validation *@<br /> <div class="Form__Status"><br /> <div class="Form__Status__Message @statusDisplay" data-f-form-statusmessage><br /> @Html.Raw(message)<br /> </div><br /> @*add this section below Form__Status__Message*@<br /> @if (_formConfig.WorkInNonJSMode && ViewBag.ValidationFail)<br /> {<br /> <div class="Form__Validation__Summary"><br /> @foreach (var element in Model.Form.Steps.ElementAt((int)ViewBag.CurrentStepIndex)?.Elements.Select(e => e.SourceContent as EPiServer.Forms.Implementation.Elements.BaseClasses.ValidatableElementBlockBase).Where(e => e != null))<br /> {<br /> var validationMessage = element.GetErrorMessage();<br /> if (!string.IsNullOrWhiteSpace(validationMessage))<br /> {<br /> <div class="validation-summary-error"><br /> <label for="@element.FormElement.Guid">@element.Label:</label><br /> @Html.ValidationMessageFor(element)<br /> </div><br /> }<br /> }<br /> </div><br /> }<br /> </div><br />[/pre]</p><div style="text-align: left;"> </div><h4 style="text-align: left;">Finally, verify non-JS mode is enabled in Forms.config</h4><p>If you're here you probably already have this set. However, in case you don't, the Forms.config file is located in <b>/modules/_protected/EPiServer.Forms</b>. Change the value for "<b>workInNonJSMode</b>" to <b>true</b>. With this setting enabled, submitting the form will submit server-side before returning the view. </p><p>The code blocks above only work when <b>workInNonJSMode </b>is enabled. If validation fails, validatable elements in the current step are iterated and the validation helper is called for each. If a form element fails validation a message is returned, and it's added to the summary. </p><div class="separator" style="clear: both; text-align: center;"><a href="https://1.bp.blogspot.com/-lVtTdPcf-eE/YYtLfRgb0JI/AAAAAAAAoBE/ZvmZO0wmNnctrQ88Vk6s54qAWUVBlEcvgCLcBGAsYHQ/s633/Form%2BSubmission%2BWorking%2BNonJS.gif" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="633" data-original-width="469" height="400" src="https://1.bp.blogspot.com/-lVtTdPcf-eE/YYtLfRgb0JI/AAAAAAAAoBE/ZvmZO0wmNnctrQ88Vk6s54qAWUVBlEcvgCLcBGAsYHQ/w296-h400/Form%2BSubmission%2BWorking%2BNonJS.gif" width="296" /></a></div><h4 style="text-align: left;">You can support JS and Non-JS Forms by combining methods<br /></h4><p>You can take the script from my <a href="https://beendaved.blogspot.com/2021/11/validation-summary-for-optimizely-forms.html">Validation Summary for Optimizely Forms article</a> and add it to the bottom of your Form Container Block file. It will only execute if Forms jQuery is included, so it plays nicely with this code.<br /></p>2021-11-22T14:00:00.0000000ZBlog postOptimizely Form Container Block with Razor View<p>Optimizely Forms display using a traditional Webform User Control (ASCX) out of the box. With all the work I have been doing with forms lately I wanted to see if I could change this behaviour to use a Razor View instead. Now that I have it working, I wanted to share it.</p><a href="https://beendaved.blogspot.com/2021/11/optimizely-form-container-block-with.html#more"></a>2021-11-16T14:00:00.0000000ZBlog postCustom Optimizely Form Containers - A Slightly Different Approach <p>Most instructions for creating a custom form block in Optimizely follow <a href="https://world.optimizely.com/documentation/developer-guides/forms/creating-a-custom-form-block/" target="_blank">the same approach</a>. My problem with the typical approach is that it requires a folder structure that doesn't match my solution. I use a slightly different method to allow me to move my Form Container Block rendering to my choice of folders.</p><a href="https://beendaved.blogspot.com/2021/11/custom-optimizely-form-containers.html#more"></a>2021-11-09T14:00:00.0000000ZBlog postValidation Summary for Optimizely Forms<p>I have seen requests for a method to implement a Validation Summary for Optimizely Forms, and I dealt with one myself. If you're not familiar with the idea, a Validation Summary includes all the validation messages for form fields in a summary section for easy review. This is typically found at the top of the form after you try to submit. There is no option for this functionality out of the box with Optimizely so I put it together.<br /></p><a href="https://beendaved.blogspot.com/2021/11/validation-summary-for-optimizely-forms.html#more"></a>2021-11-04T13:00:00.0000000ZBlog postStarting a New Project with Optimizely CMS 12 and .NET Core<p>Optimizely recently released CMS 12 based on ASP.NET Core (now .NET 5). With it comes a slew of new changes, including how to set up a new project. To help developers get started with Optimizely CMS on the new framework, Optimizely released a guide to creating a starter project. After working through it myself and talking with a few developers, I decided to write a more detailed guide with a few additional notes to better help you get going.</p><a href="https://beendaved.blogspot.com/2021/10/starting-new-project-with-optimizely.html#more"></a>2021-10-28T13:00:00.0000000ZBlog postThe Problem with Nested Blocks and AdditionalViewData<p>It's not uncommon to nest blocks in Optimizely to create more controlled and complex layouts on pages. It's also sometimes necessary to provide additional data to the blocks you render. When using the PropertyFor helper this is done by specifying an additionalViewData object. However ViewData persists to nested views and this can mess up your layout. This is how to identify when this happens, and how to work around it.</p><a href="https://beendaved.blogspot.com/2021/10/the-problem-with-nested-blocks-and.html#more"></a>2021-10-25T13:00:00.0000000ZBlog postMoving the DisplayTemplates Folder<p>Optimizely uses DisplayTemplates to provide a way to render different partials for data types. DisplayTemplates are native to ASP.Net MVC, though, and Optimizely builds upon them, for instance, by specifying a Tag. An example of this is the rendering of ContentReference properties in my articles <a href="https://beendaved.blogspot.com/2021/09/rendering-contentreference-properties.html" target="_blank">here</a> and <a href="https://beendaved.blogspot.com/2021/09/rendering-contentreference-with-shared.html" target="_blank">here</a>. The MVC engine defaults the location for them to "Views/Shared/DisplayTemplates". Sometimes, though, it's convenient to reference different locations, and this is how you can do that. </p><a href="https://beendaved.blogspot.com/2021/10/moving-displaytemplates-folder.html#more"></a>2021-10-21T13:00:00.0000000ZBlog postRendering ContentReference With Shared Views Using a TemplateTag<p>ContentReference properties provide a way to select a single item in Optimizely CMS when you don't need the featureset a ContentArea provides. However, rendering an item with a ContentReference is a bit different. I explored this a bit in my article <a href="Rendering ContentReference Properties">Rendering ContentReference Properties</a>. This post expands on this with a single DisplayTemplate that works for most content types. It builds on a similar technique using a ContentReferencePartial, and adds additional functionality using a TemplateTag. </p><a href="https://beendaved.blogspot.com/2021/10/rendering-contentreference-with-shared.html#more"></a>2021-10-18T13:00:00.0000000ZBlog postRendering ContentReference Properties<p>A ContentReference property allows you to select a single ContentData object for reference. By default, when you render these property types with the PropertyFor helper, it renders as a link for a page, or displays the name of a block. This is because the value stored is a ContentReference object, not the ContentData of the item referenced. This is one approach to render that content with a partial view.<br /></p><a href="https://beendaved.blogspot.com/2021/10/rendering-contentreference-properties.html#more"></a>2021-10-14T13:00:00.0000000ZBlog postHow to Exclude or Modify Episerver Forms Samples Javascript and CSS<p>Optimizely Forms contains jQuery and CSS packages that are included for the Form rendering out-of-box. This isn't always desired because it can affect page performance, other styling, or it could have other side effects depending on your setup. Optimizely provides for the disabling of these files through the Forms.config file in the Forms module folder, which allows you to independently control the insertion of jQuery and CSS. However, this method is easy to break with an update. It also isn't very flexible since it's an all-or-nothing approach. <br /><br /></p><a href="https://beendaved.blogspot.com/2021/10/how-to-exclude-or-modify-episerver.html#more"></a>2021-10-11T13:00:00.0000000ZBlog postCreating Gated Content with Optimizely Forms<p>I recently worked on an Optimizely project where the customer wanted to serve gated content to visitors. If you're not familiar with gated content, it's where content is only available to a user that fills out a form - the form being the "gate". Gated content can be a powerful marketing tool to help capture valuable information for lead generation, or for tracking visitor statistics. </p><p>In our case, the customer wanted to provide whitepaper downloads to visitors that provided a defined set of information. Our goal was to create this interaction using Optimizely Forms.<br /></p><a href="https://beendaved.blogspot.com/2021/10/creating-gated-content-with-optimizely.html#more"></a>2021-10-07T13:00:00.0000000ZBlog postHide Optimizely Form Info when Redirecting<p>With Optimizely Forms you have the option to redirect to a page after a complete submission. By default, Optimizely appends some form information to the URL it redirects to. This allows you to process the form submission data in any way you need to on the page it directs to, or perform an action based on what form was submitted. However, if you don't want that information in the URL you can change the behaviour.</p><a href="https://beendaved.blogspot.com/2021/10/hide-optimizely-form-info-when.html#more"></a>2021-10-04T13:00:00.0000000ZBlog postHide FormContainerBlock in Optimizely<p>It's easy to customize a FormContainerBlock by creating a new one inheriting from the out-of-box FormContainerBlock model. When doing this you gain the option of using the OOB container, or your new custom one. However, I have encountered numerous times when the OOB form container was no longer necessary for the project. Furthermore, attempting to use the OOB FormContainerBlock in certain areas created issues I had to account for. In several instances for me, the easiest approach was to hide the Optimizely FormContainerBlock from editors, and this is how I did it. </p><a href="https://beendaved.blogspot.com/2021/09/hide-formcontainerblock-in-optimizely.html#more"></a>2021-09-30T13:00:00.0000000ZBlog postForm Events Interface Pattern<p>Much like standard content items in Optimizely CMS, Forms trigger events that can be subscribed to for further customization. You typically subscribe to these events by employing an Initialization Module and attaching an event handler to process the logic you need for each event. This works well for the out-of-the-box Forms, but I have done enough customization of forms that I started employing an Interface pattern to clean it up. I use this same pattern for content events, so I thought I would share my forms approach. </p><a href="https://beendaved.blogspot.com/2021/09/form-events-interface-pattern.html#more"></a>2021-09-23T13:00:00.0000000ZBlog postStop Creating New Windows & Tabs When Debugging<p>Most of my web applications, including Optimizely/Episerver, run through IIS on my local machine. I like to publish out sites so I have a more accurate idea of what is published when we deploy client sites out to their DXP instance. Sometimes, though, I run my Opti/Epi application right out of IIS Express using Visual Studio debugging because it can be convenient for small debugging tasks, or when troubleshooting initialization modules. </p><p>When you run a web application via debugging in Visual Studio, the default behaviour is for VS to launch the application in a new tab in your default browser. It will also close that browser tab or window when you stop debugging which can be annoying when you want to keep the same content or page up in between tests or code changes. This is how you can disable that.</p><a href="https://beendaved.blogspot.com/2021/09/stop-creating-new-windows-tabs-when.html#more"></a>2021-09-20T21:00:00.0000000ZBlog postPreviewable TextArea Properties <p> Inline editing is an awesome feature in Episerver because it creates a great editor experience. Because the inline editing happens in the context of the page, it delivers a close WYSIWYG (What You See Is What You Get) authoring view. As you edit property values the page updates to show you what the new updated values. </p> <p> Unfortunately, this isn't always the desired effect. Sometimes, you want a more customized rendering of the in-page view for a property, though. When the page is constantly updating as you edit or type, this can be a bit cumbersome. FullFreshPropertiesMetaData can help to a degree, but it's not always the answer. Sometimes, I like to just use an edit popup. </p> <a href="https://beendaved.blogspot.com/2021/04/previewable-textarea-properties.html#more"></a>2021-04-12T22:29:00.0000000ZBlog post