Blog posts by Björn Olsson

Blog posts by Björn Olsson2011-11-22T15:56:55.0000000Zhttps://world.optimizely.com/blogs/Bjorn-Olsson/ Optimizely World Quick Publishing bug (page guides)I noticed that the edit-panel-iframe overflows the body with about 40px, when creating a page using page guides. This prevents the browser from displaying the last 40px of the iframe-content (in my case, two dropdown properties). You’ll not notice anything as long as all properties is visible without scrolling. This can be reproduced in both IE and FF. <a href="/link/d0392980fadd460fb7801b12a1d5427c.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="Capture1" border="0" alt="Capture1" src="/link/5c741aec7b6d4c71b4c34f6e9f77dfa2.png" width="454" height="103" /></a> I also noticed that quick-edit and “quick-create” (right-click –> new page) was working as expected, every property is visible, since your able to scroll down to the bottom without any overflow. I had to resolve this issue, since page guides is important in this project. So i did some browsing in the reflector as usual, and found out the following: The page guides uses a masterpage called PageGuide.Master: <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style> <pre class="language-csharp"><code><%@ Register TagPrefix="EPiServerEdit" TagName="EditFrameworkHeader" Src="EditFrameworkHeader.ascx"%> <asp:Content ID="Content1" ContentPlaceHolderID="FullRegion" runat="server"> <div> <EPiServerEdit:EditFrameworkHeader runat="server" MenuSelectionPath=""/> </div> <div> <EPiServerUI:SystemIFrame ID="SystemIFrame1" runat="server" AutoAppendQueryString="true" SourceFile="EditPanel.aspx" Name="EditPanel" /> </div> </asp:Content></code></pre> The other modes is using QuickEdit.master <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style> <pre class="language-csharp"><code><%@ Register TagPrefix="EPiServerEdit" TagName="EditFrameworkHeader" Src="EditFrameworkHeader.ascx"%> <asp:Content ContentPlaceHolderID="FullRegion" runat="server"> <table cellpadding="0" cellspacing="0" width="100%" height="100%"> <tr> <td style="height: 4.4em;"> <EPiServerEdit:EditFrameworkHeader runat="server" /> </td> </tr> <tr> <td> <EPiServerUI:SystemIFrame ID="SystemIFrame1" runat="server" AutoAppendQueryString="true" SourceFile="EditPanel.aspx" Name="EditPanel" /> </td> </tr> </table> </asp:Content></code></pre> The only thing that differs in these two master pages is the wrapping table in the markup. The inherited classes doesn’t contain any logic. So I basically just replaced the markup in PageGuide.master with the markup from QuickEdit.master, and everything ended up working as expected. I hope this will be resolved in the next release of EPiServer CMS, but this is a easy hotfix. I haven’t discovered any problems with this hack so far. You could probably use a virtual path mapping if you don’t won’t to change the “original” master page for the whole server, as i did.2011-11-22T15:56:55.0000000Z

Blog post

Virtual role validation behavior changed in EPiServer CMS6 R2I recently upgraded a site to R2, and noticed that one of the custom virtual roles stopped working properly (The access rights in the edit page tree looked messed up). After some quick logging, I discovered that each virtual role only was validated once, when I expanded a node in the page tree. This would usually not be an issue for a virtual role, but in my case, the virtual role is based on each specific PageData object. This basically means, that the first child page in the node being loaded, would decide which access the user have for every following child page. This works as expected in R1 however (by default). I thought this was a bug in R2, so I created a support-ticket, at the same time, it also crossed my mind that this could be a performance enhancement. I got my answer a few days later, it’s a performance enhancement. But this can easily be overridden (if needed): <pre class="language-csharp"><code>public class MyVirtualRole : EPiServer.Security.VirtualRoleProviderBase { public override void Initialize(string name, System.Collections.Specialized.NameValueCollection config) { base.Initialize(name, config); this.EnableIsInRoleCache = false; } public override bool IsInVirtualRole(System.Security.Principal.IPrincipal principal, object context) { EPiServer.Security.PageAccessControlList acl = context as EPiServer.Security.PageAccessControlList; if (acl != null) { PageData page = EPiServer.DataFactory.Instance.GetPage(acl.PageLink); return page.PageName.Equals("Test", StringComparison.InvariantCultureIgnoreCase); } return false; } }</code></pre> <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ overflow:auto; } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style> This virtual role basically checks if the given page is named “Test”. But it won’t work as expected if EnableIsInRoleCache is set to true, which is default. This is, as I mentioned a performance enhancement, so don’t disable the cache unless needed, basically only if you are validating against the PageData object (or ACL) as this example, I can’t think of another scenario as I’m typing this. And I’m out!2011-10-11T00:20:56.0000000Z

Blog post

Creating a global navigation item plug-in, with EPiServer “look and feel”I needed to create a global navigation item for a plug-in in my current project, beside the Visitor Groups item. <a href="/link/f1c01d7ddf3445b3a29ff41c311fe177.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="GlobalNav" border="0" alt="GlobalNav" src="/link/7bb1d7b2c3044d6db3e61f6f99ffcfcd.png" width="594" height="87" /></a> I also wanted my plug-in to have the same look and feel as the other plug-ins/tools in edit/admin-mode. And my third wish, was as always, to implement this with as little effort as possible. I ended up doing the following steps: 1. Create a new Web Form named MyPlugin.aspx in a folder named Plugins. 2. Add the following code to the Web Form. This code will resolve and set the path to the same MasterPage used by EPiServer CMS, which saves us a lot of time, since it already contains all the necessary style sheets and javascripts. <pre class="language-csharp"><code>namespace EPiServer.Plugins { public partial class MyPlugin : EPiServer.UI.SystemPageBase { protected override void OnPreInit(EventArgs e) { base.OnPreInit(e); this.MasterPageFile = EPiServer.UriSupport.ResolveUrlFromUIBySettings("MasterPages/Frameworks/Framework.Master"); } } }</code></pre> <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; overflow:auto; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style> 3. Add the following html to the Web Form. We’re using the content placeholder “FullRegion” which is defined in the MasterPage. The ShellMenu control will render the global navigation, and the SelectionPath property must be the same as we will be configuring in the next step. The remaining markup is a sample heading and table with EPiServer CMS style sheets applied. <pre class="language-csharp"><code><%@ Page Language="C#" AutoEventWireup="false" CodeBehind="MyPlugin.aspx.cs" Inherits="EPiServer.Plugins.MyPlugin" %> <%@ Register TagPrefix="EPiServerShell" Assembly="EPiServer.Shell" Namespace="EPiServer.Shell.Web.UI.WebControls" %> <asp:Content ContentPlaceHolderID="FullRegion" runat="server"> <div> <EPiServerShell:ShellMenu runat="server" SelectionPath="/global/cms/myplugin" /> </div> <div class="epi-padding"> <div class="epi-contentContainer epi-fullWidth"> <div class="epi-contentArea"> <h1 class="EP-prefix">My Plugin</h1> <p>This is my example plugin with EPiServer look and feel</p> </div> <div class="epi-formArea"> <table class="epi-default"> <tbody> <tr> <th>Heading 1</th> <th>Heading 2</th> </tr> <tr> <td>Value 1</td> <td>Value 2</td> </tr> </tbody> </table> </div> </div> </div> </asp:Content></code></pre> <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style> 4. Configuration, locate the episerver.shell section in web.config, and add the navigation node as follows. This will make the new menu item appear in the global navigation under the CMS tab. The menuPath set here, must be the same as in the previous step, as I said. <pre class="language-csharp"><code><episerver.shell> <navigation> <add menuItemType="Link" menuPath="/global/cms/myplugin" sortIndex="100" text="My plugin" url="/Plugins/MyPlugin.aspx" /> </navigation> <publicModules rootPath="~/modules/" autoDiscovery="Minimal"/> <protectedModules rootPath="~/secure/UI/"> <add name="Shell"/> <add name="CMS"/> </protectedModules> </episerver.shell></code></pre> <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style> Compile and run your project, a new global menu item is now available, and looks very dandy indeed: <a href="/link/4b49f4ae2c2d403aa464e10893a21ad4.png"><img style="background-image: none; border-right-width: 0px; padding-left: 0px; padding-right: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px; padding-top: 0px" title="GlobalNavMyPlugin" border="0" alt="GlobalNavMyPlugin" src="/link/bcc67454ad274abfba711be8462ae8de.png" width="594" height="220" /></a> 5. Security, protect your plugin from unauthorized users by adding the following nodes to web.config <pre class="language-csharp"><code><location path="Plugins"> <system.web> <authorization> <allow roles="WebEditors, WebAdmins, Administrators"/> <deny users="*"/> </authorization> </system.web> </location></code></pre> <style type="text/css"> .csharpcode, .csharpcode pre { font-size: small; color: black; font-family: consolas, "Courier New", courier, monospace; background-color: #ffffff; /*white-space: pre;*/ } .csharpcode pre { margin: 0em; } .csharpcode .rem { color: #008000; } .csharpcode .kwrd { color: #0000ff; } .csharpcode .str { color: #006080; } .csharpcode .op { color: #0000c0; } .csharpcode .preproc { color: #cc6633; } .csharpcode .asp { background-color: #ffff00; } .csharpcode .html { color: #800000; } .csharpcode .attr { color: #ff0000; } .csharpcode .alt { background-color: #f4f4f4; width: 100%; margin: 0em; } .csharpcode .lnum { color: #606060; }</style> And there you go! There is also an existing <a href="http://world.episerver.com/Blogs/Dung-Le/Dates/2010/2/Create-Global-Navigation-in-EPiServer-CMS-6-RC1/" target="_blank">blog post</a> regarding this, which covers the very basics, and some alternative ways to register your custom menu item. Happy coding!2011-10-08T00:14:26.0000000Z

Blog post

Scheduled Jobs Monitor GadgetMy first blog post ever, here it goes: This is a gadget I’ve created for monitoring all scheduled jobs installed on the site. You can also execute jobs manually using this gadget. This is the default view, a list of all scheduled jobs. The status-column indicates whether the job is currently running or not. I guess the rest of the columns speak for themselves. <a href="/link/9b343019d14a4c55814ca12a8b0c2354.jpg"><img style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title="Index" border="0" alt="Index" src="/link/96240794314846408f44033357f41f66.jpg" width="454" height="144" /></a> This view is shown when the name of a scheduled job is clicked. The history will automatically update after the job is executed manually using the ‘Start Manually’ button. <a href="/link/a8516f582c1d45b895e7807e1f8270a6.jpg"><img style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title="History" border="0" alt="History" src="/link/52ff8a56fd2644cea9bfcd195875885c.jpg" width="454" height="220" /></a> This warning message will be displayed if the EPiServer Scheduler Service does not appear to be active. Please note that this message is displayed during application startups for a few moments sometimes. <a href="/link/99144c68d6e04ba3b90b8d889f243f68.jpg"><img style="BORDER-RIGHT-WIDTH: 0px; DISPLAY: inline; BORDER-TOP-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px" title="WarningMessage" border="0" alt="WarningMessage" src="/link/3206558ce44c476eae8b6c9cf16fa0c3.jpg" width="454" height="175" /></a> As you may already have concluded, this is a very boring and uncool gadget. But very useful :) Installation <ol> <li>Download installer below </li> <li>Start EPiServer Deployment Center </li> <li>Choose to “Install a Module from a Compressed File” and follow the instructions. (Found under: Installed Products –> EPiServer CMS –> Version 6.0) </li></ol> Enjoy! <a href="http://www.sublime.se/GadgetContest2009/ScheduledJobsMonitorInstaller.zip">Download installer</a> <a href="http://www.sublime.se/GadgetContest2009/ScheduledJobsMonitorSource.zip">Download source</a>2009-10-31T18:07:00.0000000Z

Blog post