Adding field validation to Sitecore editor

Sometimes you may want to add validation to a field on Sitecore, like limiting the length of a text field. Sitecore comes with some sample field validations that you can add to your templates, or duplicate and modify to create new ones.

In the Sitecore Content Editor, go to sitecore > System > Settings > Validation Rules > Field Rules > Sample to see the pre-packaged rules. I wanted to create a Max Length 55 rule, so I duplicated one of the existing Max Length rules and changed the name, title, Description, and the Data Parameters to have that 55 value. Save and publish the rule.

Then go to Templates and expand the template until you can select the actual field in the left sidebar tree. In the right side, go down to the Validation Rules section, Validator Bar, and find the new rule you made in the Sample folder. Click to select, then click the ">" button to select it. Adding the rule to the validator bar will highlight the field in red if trying to save while the field is too long.

Save and publish the changes on the template, and you're done!

TeamCity Build Errors

A .NET site I work on uses TeamCity to deploy changes to both staging and live servers. I was encountering build errors related to the .csproj file on the staging server and couldn't figure out what the issue was. Looking at the build log, I noticed a bunch of errors saying "the type or namespace could not be found." However when I checked the files on the staging server, everything seemed to be there.

I was also googling about TeamCity and how it works (I inherited this project and am not super familiar with TC). I discovered that when TC builds, it actually copies all the files on the server into a separate TC work directory, builds that, then if it is successful it copies the changed files back into the actual server files. This means that the failed build was happening in the work directory, not the actual website.

The next day I went back to the problem with a fresh mindset. One thing I've started doing is the "talk to the duck" strategy for troubleshooting. This technique has you talk out loud to a rubber duck, or some other inanimate object, explaining what your issue is. This has actually helped me a ton when I'm stuck on some especially difficult problem. I don't talk out loud to an object, but what I have been doing is writing out the problem on a whiteboard. It works well because it takes you out of the tunnel vision when you're bug fixing and forces you to step back and look at the problem on a more high level.

Anyway, when I wrote out the problem, it was issues with the csproj file, and assembly errors. Knowing now that TC was erroring out in the work directory, I checked the bin folder and realized that it was almost completely empty. So I manually copied and pasted the bin files from the website directory to the TC directory and tried again. There were a couple other missing files which I also copied over. Finally I hit build one last time and it was successful!

The green message box has never looked so good.

I  haven't done this yet, but I think the /bin and other missing files need to be added to the csproj. My guess is that the bin files were copied and pasted manually previously. But at some point TC probably ran a cleanup and deleted everything to build from scratch, meaning with an incomplete project file, thus causing all the build errors.

In summary, for TeamCity build errors, check the following:

• See where the errors are happening in the log file
• Check that the /bin files exist in the TC work directory
• Copy/paste any missing files to the work directory and add to the csproj

Fixing Mixed Content Insecure Errors when Loading Telerik JS scripts via a CDN

Telerik gives you the option to load its scripts via a CDN. However, if your site is running on HTTPS, you will get a mixed content error and the scripts will be blocked.

As of the 2010 version of Telerik, it's possible to load the Telerik scripts securely over HTTPS. To do this, add CdnSettings elements inside your RadScriptManager, making sure to include one each for BaseUrl and BaseSecureUrl.

<telerik:RadScriptManager runat="server" ID="ScriptManager1"> 
   <CdnSettings BaseSecureUrl="https://d2i2wahzwrm1n5.cloudfront.net" TelerikCdn="Enabled" /> 
   <CdnSettings BaseUrl="https://d2i2wahzwrm1n5.cloudfront.net" BaseSecureUrl="https://d2i2wahzwrm1n5.cloudfront.net" TelerikCdn="Enabled" /> 
</telerik:RadScriptManager>

Further Reading:
The Telerik CDN – Now with SSL support too!

Focus on a textbox using jQuery

You may want to auto focus on a textbox in cases like when you have a search textbox dropdown when clicking on a search button.

The jQuery method .focus() can help with this. However in order for it to work you may need to add in a small delay in order for the browser to pick it up.

// Click event
$('#btnSearch').click(function(){

 // focus on search bar after delay
 setTimeout(function () {
     $('#txtSearch').focus();
 }, 500);

});

Real Favicon Generator

Here's a handy tool that will help quickly generate favicon, Apple, and Windows icons for your website. Just upload your originating PNG and it will create a zip file of all the files as well as give you an HTML snippet to put in your head tags.

http://realfavicongenerator.net/

YouTube Thumbnail Image URLs

120x90 (has black bars)

https://img.youtube.com/vi/YOUTUBEVIDEOID/default.jpg

480x360 (has black bars)

https://img.youtube.com/vi/YOUTUBEVIDEOID/hqdefault.jpg

320x180

https://img.youtube.com/vi/YOUTUBEVIDEOID/mqdefault.jpg

640x480 (has black bars)

https://img.youtube.com/vi/YOUTUBEVIDEOID/sddefault.jpg

1920x1080

https://img.youtube.com/vi/YOUTUBEVIDEOID/maxresdefault.jpg

Adding a responsive YouTube video in a Foundation Reveal modal

The Foundation framework has a modal plugin called Reveal. It works pretty well and can be combined with their other plugin flex-video in order to create a responsive embedded video in the modal.

In order have the video autoplay when the modal is opened, you need to add the iframe src dynamically using javascript. Initially, set the src of the iframe to the youtube.com embed URL without the video id; if it's blank it will simply load your website in the iframe.

The trigger has a few Foundation-specific attributes to make the modal work. The "data-reveal-id" attribute tells the trigger which modal to open. That modal will have a matching id. Also, make sure to add the YouTube video ID as a "data-video-id" attribute to the trigger, as we will call on it later in the javascript code.

<!-- Trigger to Open Modal -->
<div id="btnPlayVideo" data-reveal-id="myModal" data-video-id="QH2-TGUlwu4"></div>

<!-- Video Modal -->  
<div aria-hidden="true" aria-labelledby="modalTitle" class="reveal-modal" data-reveal="" id="myModal" role="dialog">
    <div class="flex-video">
        <iframe allowfullscreen="" frameborder="0" height="315" src="//www.youtube.com/embed/" width="420"></iframe>
    </div>
    <a aria-label="Close" class="close-reveal-modal" href="https://www.blogger.com/null">×</a>
</div>"

In your javascript, add the code to update the iframe src when the trigger is clicked. You will also need to add code to reset the iframe src. This will make the video stop playing when the modal window is closed.

// Video Modal
$('#btnPlayVideo).click(function(){
   var videosrc = '//www.youtube.com/embed/' + $(this).attr('data-video-id') + '?autoplay=1';       
   $('#myModal iframe').attr('src', videosrc).attr('data-src',videosrc);
});

// clear iframe on close to kill video
$(document).on('close.fndtn.reveal', '[data-reveal]', function(){
 $('#myModal iframe').attr('src', '//www.youtube.com/embed/');
});