tag:blogger.com,1999:blog-48971383731024108562024-02-07T14:22:00.934-05:00Amy's Sitecore Adventures!Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.comBlogger17125tag:blogger.com,1999:blog-4897138373102410856.post-21255916699150990742018-04-18T17:35:00.000-04:002018-06-23T17:36:12.407-04:00 Determining Page Editor Status with Javascript<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD64Bk-NCzNJDlHy1BfUePSe8Hh2VS0tkCZuSyUr1L3NqTFVShlmwUj7NKoRDMDLHr1QTkWXU8eH26A4_TZIrfzGe4Q_j559v90KlJM_CPN0mDDMEVsKhIEMm8UdPpmfQaMSz0Jzv-P2RW/s1600/Are+we+in+thePage+Editor_.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="800" data-original-width="800" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjD64Bk-NCzNJDlHy1BfUePSe8Hh2VS0tkCZuSyUr1L3NqTFVShlmwUj7NKoRDMDLHr1QTkWXU8eH26A4_TZIrfzGe4Q_j559v90KlJM_CPN0mDDMEVsKhIEMm8UdPpmfQaMSz0Jzv-P2RW/s640/Are+we+in+thePage+Editor_.png" width="640" /></a></div>
<br />
Often you’ll need to know if you are inside or outside the Experience/Page Editor in order perform an action. If you are on the server-side in code-behind you can check the <span style="font-family: Courier New, Courier, monospace;">Sitecore.Context.PageMode </span>to determine which mode you are in. But what about at runtime? Javascript per usual can save the day! Though you can find PageModes through the Sitecore object if it is available to the browser, it may not be there. Depending on how things have been set up with your solution, the Sitecore object may not return a null as would be expected when checking to see if you can access it. <b>Instead Sitecore may be undefined. </b><br />
<br />
Contrary to some examples on the web with only null checks, this quick little change in your script can correctly let you know if you are in the page editor:<br />
<br />
<script src="https://gist.github.com/aspenamy/b3cf65f00a3416a51fea0d11920dbe04.js"></script>
Just take a look to see if <span style="font-family: Courier New, Courier, monospace;">isPageEditor</span> is true or false and you’re set!<br />
<div>
<br /></div>
Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com2tag:blogger.com,1999:blog-4897138373102410856.post-51823798149705396352018-03-08T15:21:00.000-05:002018-06-23T15:45:57.745-04:005 Tips and Tricks for Renderings Using Ajax<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ntrpxJ4BPbxVK_HhT1RXZj_SOOh2l0JOxgzWjajG4r0LgichD8Qu9r7pylwKIdAMcLghEipzdOVah77NcWY-04wX2rCq02eNvRgiAr86PR6xpstge37Okpofbm2jMw-Z8vtBf9AWSIzH/s1600/See+the+sights.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="1080" data-original-width="1080" height="640" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6ntrpxJ4BPbxVK_HhT1RXZj_SOOh2l0JOxgzWjajG4r0LgichD8Qu9r7pylwKIdAMcLghEipzdOVah77NcWY-04wX2rCq02eNvRgiAr86PR6xpstge37Okpofbm2jMw-Z8vtBf9AWSIzH/s640/See+the+sights.png" width="640" /></a></div>
<br />
Eventually a component on a page is going to need to pull in some new information and you don't always want to reload the whole page. Making use of Ajax allows you to avoid a full reload but when you use Ajax with Sitecore there are a few important things to keep in mind:<br />
<ol>
<li>Make sure you set up your controller to function with the Ajax call. Are you sending back some data, the whole rendering, or are you just updating something internally? Be ready to handle whatever is coming into or out of the controller. Note that if the Ajax function is posting data you must add [HttpPost] before the controller method.</li>
<li>Regardless of how you get to your controller - there won’t be Sitecore context! Your controller has no idea what the user was doing or where they were on your site when the Ajax call was made. You need to pass all the information in your model to the controller including the data item and anything else relevant for your controller to give context. One way to give context is to output a relevant ID (or the Sitecore Context ID) somewhere on the page. You can then grab the value via javascript to pass back to the model for when you lose context.</li>
<li>Data can get complicated when passing back and forth between controller and JS - create a model which represents the data you’re working with to keep things clearer. The simplest way to do this is to use strings/integers etc for the fields you need to pass back and forth via JSON. Something like Quicktype.io ( https://app.quicktype.io/ ) can help you quickly generate C# models from your JSON (or other) data to use with the controller on the server side.</li>
<li>Event binding can be lost if content is being reloaded via Ajax depending on how it was bound initially. If you have other javascript tied to any part of the component or page that’s being updated - either make sure that your javascript around those components is bound to something other than itself (such as the body tag), or that you run the js again once the call is complete. Otherwise, you’ll find the js runs once, and then isn’t firing since it was being bound to items that no longer exist.
<br /><br />For example, some jQuery to bind to body for a click event: <span id="docs-internal-guid-2d7062bb-2de0-5f65-b2e4-b7c567de16f5"><span style="font-family: "arial"; font-size: 11pt; vertical-align: baseline; white-space: pre-wrap;"><img height="159" src="https://lh5.googleusercontent.com/zkpr1p4f5dlm1y2xO42nFnQCd8d59cViReUJQpTMI8TPfevxGIMpdXRXrm9dXwS0VsDiT7v0texMvH2lJRYpLbwkQfIyCVrG7Ra2HBOQL9lilbxHG8qFT5UNreknzE8TkSsjR1no" style="-webkit-transform: rotate(0.00rad); border: none; transform: rotate(0.00rad);" width="326" /></span></span><br /> An example ajax call: <script src="https://gist.github.com/aspenamy/a1d541911fc34f2c147cac808aca0ffb.js"></script></li>
<li>Don’t load your entire site to test a single controller, use Postman (or something similar) to test out your controller without needing to hit the page! This way, you can make sure your Ajax calls will work with the controller. <a href="https://www.getpostman.com/">https://www.getpostman.com/</a></li>
</ol>
<br />
<div>
<br /></div>
Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com1tag:blogger.com,1999:blog-4897138373102410856.post-46543759764777827992017-10-06T18:20:00.000-04:002017-10-06T18:28:23.403-04:00Getting More from the RTE: Snippets and StylingDevelopers often push aside the rich text editor because we would rather of use separate components with data sources. However, sometimes we need to rely on the rich text editor to empower the content editor to edit more directly or to reduce complexity on the page. We can use snippets to reduce complexity or give the editor more options by inserting some predefined HTML into the rich text editor. In this example, we will learn how to get more out of the rich text editor by changing which editor we use, adding new snippets, and styling the added content.<br />
<br />
First we need to switch from the default basic rich text editor to either one of the other existing editors or to a custom editor.<br />
<br />
The Rich Text Default view - just the basics:<br />
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdDtrxOYorVZW-dThqjheNLqUxeo2gWjDkjEo84gvlzXMw4oiBVhKmKm-_08vgvMMIDjhOxdv_u6zg7rnD1dtBNy9u4jnuFCp3f0ADA-W75IUYuG7NVluND7OKfuDN5-TaLl4FXH3ETK6/s1600/basiceditor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="146" data-original-width="596" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpdDtrxOYorVZW-dThqjheNLqUxeo2gWjDkjEo84gvlzXMw4oiBVhKmKm-_08vgvMMIDjhOxdv_u6zg7rnD1dtBNy9u4jnuFCp3f0ADA-W75IUYuG7NVluND7OKfuDN5-TaLl4FXH3ETK6/s1600/basiceditor.png" /></a></div>
<div class="separator" style="clear: both; text-align: left;">
<br /></div>
<div class="separator" style="clear: both; text-align: left;">
We can change the default editor on a field-by-field basis. Update the Source Property for the Rich Text field so that it references the specific rich text editor we want to use in the core database:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2CQOMlKbNZktqhOkSkL0WGZYLuon_h2Ymp8SKXLbHHbF8EMfY_2UF-6HxZ_bsLnV4TPF21kaIEsJq-9zfC3FIX_R435LZ1uIL1uuuuI4Nxz3B5ETIDjNSWfgYej3RAah-I6x2BAJMPl_x/s1600/defaultlist.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="137" data-original-width="843" height="104" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh2CQOMlKbNZktqhOkSkL0WGZYLuon_h2Ymp8SKXLbHHbF8EMfY_2UF-6HxZ_bsLnV4TPF21kaIEsJq-9zfC3FIX_R435LZ1uIL1uuuuI4Nxz3B5ETIDjNSWfgYej3RAah-I6x2BAJMPl_x/s640/defaultlist.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
On your template, enter the item path for the editor of your choice into the source field for the rich text field.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh66Io6WP9tntmtbGnnZDVI_YZsTlegX1qf6uvTkl30iqk1bSmb7R2DU9a1FjNRsi_Pe_jFKu6oUyUS2DcKAKyoaWTUOQK4Idwe49D31oZ8OSgoNyYEKDoffYQo5ttzV3zUrzTfOZLJaLZ1/s1600/sourceset.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="64" data-original-width="610" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh66Io6WP9tntmtbGnnZDVI_YZsTlegX1qf6uvTkl30iqk1bSmb7R2DU9a1FjNRsi_Pe_jFKu6oUyUS2DcKAKyoaWTUOQK4Idwe49D31oZ8OSgoNyYEKDoffYQo5ttzV3zUrzTfOZLJaLZ1/s1600/sourceset.png" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
For a site-wide approach, you can change the Sitecore.config file on the setting “HtmlEditor.DefaultProfile” to update all rich text fields by default: </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-S-3BeeO76XgPu8DHiMBxmkq6pNo7_9DkbHdRaldtSjRic8xbqypYu6YE07xuAHR9TMGpMtWGSrO5svfgidPYJdWZNQBQ1p6ilgUwwfO-QUVa0DdPvX3tnuy7Vwc3oDb41xpnieHVhaL/s1600/defaultprofile.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="101" data-original-width="1221" height="52" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgq-S-3BeeO76XgPu8DHiMBxmkq6pNo7_9DkbHdRaldtSjRic8xbqypYu6YE07xuAHR9TMGpMtWGSrO5svfgidPYJdWZNQBQ1p6ilgUwwfO-QUVa0DdPvX3tnuy7Vwc3oDb41xpnieHVhaL/s640/defaultprofile.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
With the updated rich text editor, we can now see our Snippets Option:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWFWjYfONIs1mgDzX0IL3Qwvvm5Op_RcfhqZ4xAAbW-FLxFW_h-AGeU_lUJUk1LUAanGZEEVvqZ5BvHZ1MAuefgroyJ8gMoYNfoNfkX81g2GFhlB70_p8xkWq5GLQg7wepKSH4LEhc6Xp/s1600/expandedrtered.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="155" data-original-width="886" height="110" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjIWFWjYfONIs1mgDzX0IL3Qwvvm5Op_RcfhqZ4xAAbW-FLxFW_h-AGeU_lUJUk1LUAanGZEEVvqZ5BvHZ1MAuefgroyJ8gMoYNfoNfkX81g2GFhlB70_p8xkWq5GLQg7wepKSH4LEhc6Xp/s640/expandedrtered.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Snippets are simply blocks of raw html that can be placed on the page and controlled in the Core database. Once you know what html you need to add, it’s very easy to create a new one in Core by navigating to the Snippets folder within the Html Editor Profile you’re currently using and either adding it via the menu, or by duplicating and modifying an existing snippet.</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegFBhHxM0zeTSsqMo4YnfHHMhO7Hsjm-c6GMo-kJ85EOhtsVW57Jj-PnxtjG8zi9q_fMZS_QQSfVCUakmLsY91wKop_4fEEWPZHQYmJPw8mAoHR7T919usOylEVpsU8t9b2f4jRAJeYwm/s1600/snippetcreation.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="358" data-original-width="733" height="311" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgegFBhHxM0zeTSsqMo4YnfHHMhO7Hsjm-c6GMo-kJ85EOhtsVW57Jj-PnxtjG8zi9q_fMZS_QQSfVCUakmLsY91wKop_4fEEWPZHQYmJPw8mAoHR7T919usOylEVpsU8t9b2f4jRAJeYwm/s640/snippetcreation.png" width="640" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Once we save our snippet and head back to the Master DB and open the rich text editor, we’ll see our new Fancy Blockquote Snippet!</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicpG7HM0htApx5CX4Ri2VHkZrIXm14MqkggW-5nntkLgpqraWbUa4hdjhmuvXIm99R4-pq7qPZmkK4csdjgtT9dUfha4gU8u-Bi-8_BJum5dcveG67kiSKas-rYpUHoa2QAVfyBtRp-GI8/s1600/snippets.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="114" data-original-width="271" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicpG7HM0htApx5CX4Ri2VHkZrIXm14MqkggW-5nntkLgpqraWbUa4hdjhmuvXIm99R4-pq7qPZmkK4csdjgtT9dUfha4gU8u-Bi-8_BJum5dcveG67kiSKas-rYpUHoa2QAVfyBtRp-GI8/s1600/snippets.png" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
Clicking on our new snippet will insert it into the text at the cursor location, but currently it isn’t all that fancy:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYsizXIW4xF6gQTbsoCTO1MlFbQRfklH25IbhR0_tuqEXbxJQVylh52E9XzObx8I3j_icuXqjOij9zvy7Yx4NTdrQPzjCK9j4kGPWeEqtRXDh4TJyEKJakndI2bC8TkYQ0Ijd0xs53Zrl/s1600/nostylebq.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="96" data-original-width="480" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuYsizXIW4xF6gQTbsoCTO1MlFbQRfklH25IbhR0_tuqEXbxJQVylh52E9XzObx8I3j_icuXqjOij9zvy7Yx4NTdrQPzjCK9j4kGPWeEqtRXDh4TJyEKJakndI2bC8TkYQ0Ijd0xs53Zrl/s1600/nostylebq.png" /></a></div>
<div class="separator" style="clear: both;">
<br /></div>
<div class="separator" style="clear: both;">
We can stop here and call it a day but if we want our styling to appear within the editor as we are editing we need to make a final update to the sitecore stylesheet used by the editor.</div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
To make this update we can either edit the default style sheet (modify default.css) or reference our own to include the styling used by your snippets (and anything else you’d like represented). The stylesheet is defined once again in Sitecore.config as “WebStylesheet.” </div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikUUaceJuq03mhqzLz_Azz4BNqAeYDLNolHWhJXKbGAdJf2sHTKyZI9bu6J3fj0InrmIX6plPZeyQB_zhPugEg6cYXiIAOZQxElOlAOIzDQmLb3FP0kQH90B0eg9a5XDVBt7DJQY3sxWeM/s1600/stylesheet.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em; text-align: center;"><img border="0" data-original-height="127" data-original-width="1122" height="72" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikUUaceJuq03mhqzLz_Azz4BNqAeYDLNolHWhJXKbGAdJf2sHTKyZI9bu6J3fj0InrmIX6plPZeyQB_zhPugEg6cYXiIAOZQxElOlAOIzDQmLb3FP0kQH90B0eg9a5XDVBt7DJQY3sxWeM/s640/stylesheet.png" width="640" /></a></div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
Once the file is updated you’ll immediately see your classes represented in both the page editor preview as well as the editor:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXpEVzl-6DVlmiIbfNy1H2-mLeyMXEw66NzZqRKAVm0JPmyxPM5o-6TohrwEnNKaIRlxySTYWLho-JvYSWd9Y7X9TzweDXyDNRf5ulqSNsjBnEmpG8LamAC9iEQPz8-rJuv47SUp5YUfSv/s1600/fancybqinpageeditor.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="226" data-original-width="600" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXpEVzl-6DVlmiIbfNy1H2-mLeyMXEw66NzZqRKAVm0JPmyxPM5o-6TohrwEnNKaIRlxySTYWLho-JvYSWd9Y7X9TzweDXyDNRf5ulqSNsjBnEmpG8LamAC9iEQPz8-rJuv47SUp5YUfSv/s1600/fancybqinpageeditor.png" /></a></div>
<div class="" style="clear: both;">
<br /></div>
<div class="" style="clear: both;">
In the editor:</div>
<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg35zE9sMSIn2L0vuy9w6q4jJu97ISgQhOa625hTCTMfRdsJhqshl6L7Iz4ZkS5x8zYANWxp0V2hXqmEgKeyojkKx4iCBIMmUmUFiZf8Yg2LQf2EwyPZ4FUKKV1Ul8DFIRSx3fOUV547jdV/s1600/fancybqineditor.jpg" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" data-original-height="224" data-original-width="451" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg35zE9sMSIn2L0vuy9w6q4jJu97ISgQhOa625hTCTMfRdsJhqshl6L7Iz4ZkS5x8zYANWxp0V2hXqmEgKeyojkKx4iCBIMmUmUFiZf8Yg2LQf2EwyPZ4FUKKV1Ul8DFIRSx3fOUV547jdV/s1600/fancybqineditor.jpg" /></a></div>
<div class="" style="clear: both;">
And that’s it - snippets are an easy way to add some quick and editable html! With the updated stylesheet you can view your content appropriately to get a little more mileage from your rich text fields when you need to use them!</div>
Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com4tag:blogger.com,1999:blog-4897138373102410856.post-10271806144351107022017-09-12T14:33:00.000-04:002017-09-12T15:12:55.039-04:00Null Explosion Prevention with Datasources!Sometimes bad data can sneak into the smallest of things and wreak havoc on a site bringing up a dreaded error page (hopefully captured and prettified). We’re going to cover two examples of sneaky bad data blowing up a component and how we can address the problem.<br />
<br />
The scenario here revolves around an invalid datasource and a component making use of Glass - this bad data can come about from a publishing issue (such as publishing the page which references a datasource that hasn’t been published or wasn’t in the final workflow step to allow publishing), or some other kind of issue (an invalid item ID, a deleted item still being referenced etc).<br />
<br />
1. Getting the Item<br />
In the code for our rendering, we want to grab that datasource item to help out our model, so we did the following:<br />
<br />
<script src="https://gist.github.com/anonymous/c490c9862bd36a7367e984e98ed88b2f.js"></script>
This confirms that the Guid is a valid format - but doesn’t confirm that it’s a valid item in the database before we pass it to GetItem to grab and cast to our Item_Type.<br />
It wouldn't be unreasonable to expect GetItem to throw a null, which is exactly where I ran into trouble. Instead of returning a null, it blows up and you’ll never reach the next line.<br />
<br />
To avoid this error remove references to GetItem<T>, confirm that your item exists, then use Cast<T> instead.<br />
For example:<br />
<br />
<script src="https://gist.github.com/anonymous/378864a297963020b32b6df79129bdca.js"></script>
<br />
2. View Rendering Issue<br />
In our same scenario we can come across another issue with the use of View Renderings - this view rendering has a datasource passed to it (instead of using the context item).<br />
For example:
<br />
<script src="https://gist.github.com/anonymous/83b3d184481265a7eb41cfd6330c1793.js"></script>
The usual expectation is that the model would return null if we had some kind of issue with the datasource. However, in this situation the bad datasource will blow the rendering up before ever trying to check that If Statement.<br />
<br />
The problem isn’t with the view rendering, but getting the rendering within the pipeline. Sitecore will check to see if there’s a value (Sitecore.Mvc.Pipelines.Response.GetRenderer) and send it back. So, if the datasource is set but wrong, instead of returning null it just sends back the bad data. It attempts to use the default model and promptly blows up - expecting a different model that’s never properly sent.<br />
<br />
To fix this, we can override GetViewRenderer with a custom pipeline- modified from this thread:<br />
<a href="https://github.com/mikeedwards83/Glass.Mapper/issues/163">https://github.com/mikeedwards83/Glass.Mapper/issues/163</a><br />
<br />
<script src="https://gist.github.com/anonymous/a03fb3f2fffa3acaf833aca6a62ba04d.js"></script>
This will prevent your view renderings from blowing up from a busted datasource as long as you have the regular null checking on the model set up!Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com3tag:blogger.com,1999:blog-4897138373102410856.post-23358280995397652912011-03-22T15:26:00.001-04:002011-03-22T15:26:45.416-04:00Using the Source Property<p>For each of the properties in your template you can set a source for it, this isn’t always used but can improve user experience drastically when done throughout a site. The source field comes in to play whenever you are using any of the following fields: Droplink, Droplist, Droptree, File, Grouped Droplink, Grouped Droplist, Image, Multilist, Treelist, Rich text field and a number of others. <p>There are various ways of setting these up to achieve different results – but in general you are using the source to limit the set of items that can be used, and this requirement can also help you determine what kind of field to use. For example, if you have a Set of items all split down into sub folders and want the content editor to make use of the tree, you could use a TreeList or Drop Tree, but if you just want a set of items without the opportunity to see where those items are – multilists or droplinks are the way to go. For Images you’re generally just specifying where to look for and put the images within the media library, and for Rich text fields the source determines the type of editor to use (if not the default). <p>There are a number of options for setting the source property but not all can work with every field. <p><strong>Setting the Root Node:</strong> To do this you just give the full path to the item you want to use as the ‘root’. This works with just about every field that pulls options and you can easily grab the path from the content pane when you select your desired item(looking at the Item Path). Ie: if you have a treelist and you only want to show the categories item and its children, you’d put in the path to that item:<em> <strong>/sitecore/content/Data/Categories</strong></em> <p><strong>Sitecore Query:</strong> This applies to a smaller set of fields (the List Fields), but gives a lot of power and is what I’ll mainly be going over. The fields you can use this with are: Checklist, Droplink, Droplist, Grouped Droplist, Grouped Droplink, or Multilist. You can also use the fast query: this has some limitations over just using sitecore query but gives benefits of better performance and using less memory. <p>Treelists are also a little special and can use parameters(I think some other fields will work with this as well, but I most often end up using the query on other items so I don’t have a ton of experience with this), you can specify the root item, what templates/items to display or ignore and which they can select, for example: <p><em><strong>DataSource=/Sitecore/Content/Home/Root/Node&IncludeTemplatesForSelection=desiredTemplate1,desiredTemplate2&ExcludeTemplatesForDisplay=secretFolder&ExcludeItemsForDisplay=secretItem&AllowMultipleSelection=true</strong></em> <p>The above sets the root node to /Sitecore/Content/Home/Root/Node and allows the user to select items using desiredTemplate1 or desiredTemplate2, it also excludes secretFolder and secretItem from showing up in the list as well as allowing the user to choose more than one of the same item. <h4>More on Sitecore Query</h4> <p>Using the query option over simply setting a root node improves the experience for your clients as well as helps to keep your data accurate. If you don’t want them to be able to pick a certain template or value or need to select something dependent on a specific axes – using sitecore query will make it possible. <p>In the source field, your queries need to begin with <em><strong>query:</strong></em> followed by your query. I’m going to go over a few examples I’ve found useful, but for a more detailed explanation of using Sitecore Query take a look at the <a href="http://sdn.sitecore.net/Reference/Sitecore%206/Data%20Definition%20Reference.aspx" target="_blank">Data Definition Reference</a>, there is a <strong>Sitecore Query</strong> section that explains all the details! <p>So, a few useful tidbits: <p><strong><font size="5">*</font> </strong>grabs all the children of a node: <strong><em>query:</em></strong><strong><em>/sitecore/content/home/dessert/*</em> </strong> <-- the * grabs every child and / followed by text denotes the exact item name you’re looking at. So you could also mix this up a bit and return <strong><em>query:</em></strong><em><strong>/sitecore/home/*/pie/*</strong></em> <-- this will grab all the items that have a parent pie from any item under home with the pie grandchild.</p> <p><strong><font size="4">.</font></strong> references the context item, this can be handy if you need to find the ancestors, children or anything along the axes (if you need just the parent, use:<font size="4"> ..</font> ): <strong><em>query:</em></strong><em><strong>./pies/*</strong></em> <-- if we were the dessert item, this would grab all the grandchildren with the parent pie. <p><strong><font size="4">//</font></strong> is the descendant axis – this should be used Very sparingly but can be done the following way: <strong><em>query:</em></strong><em><strong>/sitecore/content/home//pie/*</strong></em> <-- this grabs all the items with a parent pie under home. So that would include, <strong><em>home/pie/*</em></strong>, <strong><em>home/anything/pie/*</em></strong> and so on. The fear with using this is that you’re going to return the whole tree or a whole section which might have thousands of items, so when considering using the descendant axis or any query, be mindful of the result set you will get. <p><strong><font size="4">@</font></strong> denotes a field, and <font size="4"><strong>@@ </strong></font>denotes an xml attribute for the item, you’ll probably be using mainly <em><strong>@@templatename</strong></em> or <strong><em>@@templateid</em></strong>. <p>For example: <strong><em>query:</em></strong><strong><em>/sitecore/content/home/dessert/*[@pastry=’1’]</em></strong> <-- this grabs all the items under desserts which have the checkbox ‘pastry’ checked (so it might return pies). <p>Sitecore query also supports the xpath axes, allowing you to use things like ancestor-or-self, following and preceeding (siblings) and so on: <p><strong><em>query:./ancestor-or-self::*[@@templatename='Site']/Data/Touts/*</em></strong> <p>For a more practical example in a multisite solution, the above takes the current item, finds an ancestor or itself that represents the top ‘site’ item and then find the Data folder and then grabs all the children of the Touts folder. <p>Logical operators can be used to combine options as well, so we could look for <strong><em>query:</em></strong><strong><em>./*[@@templatename='template1' or @@templatename='template2']</em></strong> or something more like <strong><em>query:</em></strong><strong><em>./pies/*|./cakes/*</em></strong> <-- this would give both children of pies and cakes instead of choosing one or the other. <p>There are also functions you can use (<a href="http://www.brainbell.com/tutorials/XML/Using_XPath_Functions.htm" target="_blank">here’s a link</a> with a listing of a number of useful functions), primarily I end up using: <strong><em>position()</em></strong>, <em><strong>last()</strong></em>, and <strong><em>contains()</em></strong> <p>To use them, you’d do something like <strong><em>query:./*[position()=1] </em></strong><-- grabs the first item <p><em><strong>query:./*[position()=last()]</strong></em> <-- grabs the last item <p><strong><em>query:./*[contains(@ingredients,’apple’)]</em></strong> <-- grabs the items with ‘apple’ in their ingredients field, this could also be written as: <strong><em>query:./*[@ingredients = '%apple%']</em></strong> <p>To test out any query, you can always open up the developer center and then open the xpath builder. You do not need<strong><em> query:</em></strong> before your query but you do need to include <strong><em>fast:</em></strong> if you want to use the fast query. <p>These queries can become pretty complex depending on your needs, but that initial work can leave content editors with a very easy to use and understand set of items and fields. Leave a comment if you know of any good query examples or are wondering how to form a query to meet your needs (I’ll try to help)!</p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com38tag:blogger.com,1999:blog-4897138373102410856.post-47508567714717333152011-03-07T17:51:00.001-05:002011-03-07T17:51:51.395-05:00Getting Started with Breadcrumbs<p>Breadcrumbs have been covered by just about everyone so there are lots of examples that all seem to do things a Little differently. With that in mind I’m going to keep this short with my example and two other examples I’ve found that might also meet your needs and cover the basics for just about every xslt breadcrumb example you’ll find.</p> <p>The general idea: you’re at item c, in your tree the path is something like: /sitecore/content/a/b/c and you want to display a pretty html list for a » b » c anywhere on your site. You’ll always be dealing with the ancestors of your current item so you’ll be making use of $sc_currentitem/ancestor-or-self::… somewhere.</p> <p>You’ll need to go through each ancestor item and display it, probably checking to see if you’re at the last item so you don’t display a ‘»’ after the final item. You also need to make sure to not display unwanted ancestors in your breadcrumb, being /sitecore and /content in our case.</p> <p>So onto the examples!</p> <p>First is the Sitecore breadcrumb xslt example: <a href="http://sdn.sitecore.net/Articles/XSL/Breadcrumb%20Example.aspx">http://sdn.sitecore.net/Articles/XSL/Breadcrumb%20Example.aspx</a><br> You will need a login to sdn to view this, but the magic is that it does a for-each across ancestor-or-self::item and then has an if statement to make sure that position()> 2 (this avoids the sitecore/content portion) and avoiding folders and there is the requisite check for position()!=last() so that we do not have the extra » after c. </p> <p>Next up is Brian Pedreson’s breadcrumb example <a href="http://briancaos.wordpress.com/2009/02/09/breadcrumb-in-sitecore/">http://briancaos.wordpress.com/2009/02/09/breadcrumb-in-sitecore/</a><br>Similar to the above, however in this case he only selected items which had the appropriate template and a check to make sure the items should be in the navigation at all:<br><strong>select="$sc_currentitem/ancestor-or-self::item[sc:IsItemOfType('mypages',.) </strong>and <strong>sc:fld('ShowInMenu',.)='1']"</strong></p> <p>I am certain there are many many more breadcrumb examples, but these were the first I was able to find easily to share.</p> <p>Finally, my contribution to the breadcrumb party:</p><pre class="code"> <span style="color: blue"><</span><span style="color: #2b91af">xsl:template </span><span style="color: red">match</span><span style="color: blue">=</span>"<span style="color: blue">*</span>" <span style="color: red">mode</span><span style="color: blue">=</span>"<span style="color: blue">main</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">div</span><span style="color: blue">><br /> <</span><span style="color: #a31515">ul </span><span style="color: red">class</span><span style="color: blue">=</span>"<span style="color: blue">breadcrumb</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:variable </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">ancestors</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$sc_currentitem/ancestor-or-self::item[ancestor-or-self::item/@template='home page']</span>" <span style="color: blue">/><br /> <</span><span style="color: #2b91af">xsl:for-each </span><span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$ancestors</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">li</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:choose</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:when </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">position()=last()</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">sc:text </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Breadcrumb Title</span>" <span style="color: blue">/><br /> </</span><span style="color: #2b91af">xsl:when</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:otherwise</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:text </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Breadcrumb Title</span>" <span style="color: blue">/><br /> </</span><span style="color: #a31515">sc:link</span><span style="color: blue">> </span>»<br /> <span style="color: blue"></</span><span style="color: #2b91af">xsl:otherwise</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:choose</span><span style="color: blue">><br /> </</span><span style="color: #a31515">li</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:for-each</span><span style="color: blue">><br /> </</span><span style="color: #a31515">ul</span><span style="color: blue">><br /> </</span><span style="color: #a31515">div</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:template</span><span style="color: blue">><br /></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p>To satisfy the condition of not showing /sitecore or /content, I am only grabbing ancestors (or self) who have the ancestor (or is the item) that has the special template for the Home item. This excludes anything above the home item, but includes the home item too so that it can be listed. And we end up with a » b » c.</p><br /><p>Hope this can be helpful if you are getting started with breadcrumbs!</p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com1tag:blogger.com,1999:blog-4897138373102410856.post-54619443582054470912011-02-24T17:04:00.001-05:002011-02-24T17:04:31.355-05:00Links as Items Redux!<p>Previously I had posted on how to set up items in your content tree to act as external links to other pages (for use with Navigation mainly – for example if you have a blog elsewhere but still want it listed in the main navigation). However, Ivan Buzyka pointed out some issues with the simple implementation so I added creating a better redirect to my ‘to do’ list for the blog. The time has come! <p>Let’s pretend we are modifying an existing site, we don’t want to change the navigation so that won’t be covered here – we just want to update our layout to work a little more universally. Our new items need to be able to link to an internal, external or Media item reliably for display in our navigation. Our template will consist of similar things to last time: <p>Link: General Link <p>Nav Title: Text -> standard values: $name <p>In Navigation: Checkbox ->standard values: checked <p>Create the template, add in standard values for it with the above settings and now we can create our Layout which should be assigned to the standard values of the new template. <p>In my layout is the following (inside the page load):<pre class="code"><span style="color: #2b91af">String </span>url;<br /><span style="color: #2b91af">Item </span>extItem = Sitecore.<span style="color: #2b91af">Context</span>.Item;<br /><span style="color: #2b91af">LinkField </span>extLink = (<span style="color: #2b91af">LinkField</span>)(extItem.Fields[<span style="color: #a31515">"Link"</span>]);<br /><span style="color: blue">if </span>(extLink != <span style="color: blue">null</span>)<br />{<br /> <span style="color: blue">if </span>(extLink.IsInternal && extLink.TargetItem != <span style="color: blue">null</span>)<br /> {<br /> url = Sitecore.Links.<span style="color: #2b91af">LinkManager</span>.GetItemUrl(extLink.TargetItem);<br /> }<br /> <span style="color: blue">else if </span>(extLink.IsMediaLink && extLink.TargetItem != <span style="color: blue">null</span>)<br /> {<br /> url = Sitecore.<span style="color: #2b91af">StringUtil</span>.EnsurePrefix(<span style="color: #a31515">'/'</span>, Sitecore.Resources.Media.<span style="color: #2b91af">MediaManager</span>.GetMediaUrl(extLink.TargetItem));<br /> }<br /> <span style="color: blue">else<br /> </span>{<br /> url = extLink.Url;<br /> }<br />}<br /><span style="color: blue">else <br /></span>{<br /> <span style="color: #2b91af">Item </span>homeItem = Sitecore.<span style="color: #2b91af">Context</span>.Database.GetItem(Sitecore.<span style="color: #2b91af">Context</span>.Site.StartPath);<br /> url = Sitecore.Links.<span style="color: #2b91af">LinkManager</span>.GetItemUrl(homeItem);<br />}<br /><span style="color: blue">if </span>(!<span style="color: #2b91af">String</span>.IsNullOrEmpty(url))<br />{<br /> Response.Redirect(url);<br />}</pre><a href="http://11011.net/software/vspaste"></a><br /><p>To step through it: we’re setting the default to bring the user back to the home page just in case something goes wrong. From there, we check to see if the Link field exists and what type of link it is.<br /><p>For an internal link, we grab the url for the item itself, and for the media item, we’re grabbing the url for the Media item to be displayed (or pdf etc.), and if it’s external – we’re just redirecting them to the url they specified.<br /><p>If we stopped here, everything would be working great as long as the content was entered appropriately, however, that doesn’t always happen and we’d like to avoid this going boom. To do that we can add a simple validator: open up the content tree within Sitecore and then head to your template, expanding out the children and select the Link field item.<br /><p>Scroll down to Validation in the Data section.<br /><p>We want to make sure that the Link field is Always one of the following: and Internal link, a Media item, or an external Link. Also, we want it to have Some value.<br /><p>Within <em>Validation</em> you’ll need to put the actual content you want to validate, and <em>ValidationText</em> is what will appear if that is not met. This will pop up when the user tries to save the item with an improper value. <br /><p><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="validation" border="0" alt="validation" src="http://lh3.ggpht.com/_6mCz8UoQlS0/TWbV7gOWT0I/AAAAAAAAAMU/MspJ7NqpfqE/validation%5B6%5D.jpg?imgmax=800" width="585" height="183"> <br /><p>Shown above is the Validation and our error message: linktype is how we can determine what sort of link it is, and is generated automatically when a user selects their link (unless they are editing raw values). Our validation just makes sure that the linktype text contains one of those three options (internal, media, or external) and as long as one of those match the text in the raw value for the field we have a valid link. <br /><p>This helps prevent a scenario where the user has used one of the other options for an external link which would stop the page from going anywhere.<br /><p>You can also add in some of the default validation options – I'd recommend adding the Required field validator as well.<br /><p>If you have any tips to help improve this further please let me know! </p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com4tag:blogger.com,1999:blog-4897138373102410856.post-79375403253184487922011-02-18T16:46:00.001-05:002011-02-18T16:46:09.268-05:00Adding your own Icons<p>I have returned from blogger oblivion – stay tuned for more frequent updates! I’m looking forward to meeting people at Dreamcore this year – I’ll be sure to update as that is happening. <p>Back to the topic: adding your own icons! As you may have noticed, items can be configured to have an icon – and Sitecore provides an extensive list of them. But you may want to add your own for whatever reason. To do this you’ll need an image suitable for making into an icon, and the ability to resize this image to the correct sizes (Paint.net, Photoshop, GIMP).<a href="http://lh5.ggpht.com/_6mCz8UoQlS0/TV7on0jHmiI/AAAAAAAAAMM/gO8DxS0cIPA/s1600-h/logo%5B4%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; margin-left: 0px; border-left-width: 0px; margin-right: 0px" title="logo" border="0" alt="logo" align="right" src="http://lh4.ggpht.com/_6mCz8UoQlS0/TV7ooAhVMvI/AAAAAAAAAMQ/sCvwAopgz2o/logo_thumb%5B2%5D.png?imgmax=800" width="127" height="127"></a> <p>For our example we’re making an Arke Icon and we're going to say our largest icon will be 128x128, so we have a transparent png called logo.png to work with: <p>The image you want to use should have a transparent background unless you want the icon to be a square, and ideally not overly detailed as it will be very small. <p>Next, we need to make this image into various sizes, and put logo.png into the appropriately named directories, the structure is as follows (if you have several icons, just do the same thing by putting multiple icons into each size folder): <ul> <li>ArkeIcon <ul> <li>16x16 <ul> <li>logo.png</li></ul> <li>24x24 <ul> <li>logo.png</li></ul> <li>32x32 <ul> <li>logo.png</li></ul> <li>48x48 <ul> <li>logo.png</li></ul> <li>128x128 <ul> <li>logo.png</li></ul></li></ul></li></ul> <p>Zip this all up with the same name as the containing folder, so ArkeIcon.zip <p>Upload this new zip file to <em><strong>/sitecore/shell/Themes/Standard/</strong></em> and make sure the permissions are correct for your installation (check the other files such as Application.zip for a comparison). <p>Back within your content editor: each item has an Icon field and you can now enter in your custom icon by entering: <strong><em>ArkeIcon/16x16/logo.png</em></strong> <p>Once you do this, the new icon will show up in the list of recently used icons as well. <p>As for adding the new icon set to the list of usable icons – that’s a little more tricky since the list is specified statically (if you know a good way of changing this please share). <p>You can however modify the existing sets/zips of images, such as the aforementioned application.zip – just add your image to the appropriate directories and you can use it just like all the other icons!</p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com4tag:blogger.com,1999:blog-4897138373102410856.post-73242850234068128022010-10-13T12:03:00.001-04:002010-10-13T12:03:19.347-04:00Setting and Customizing the Rich Text Field Editor<p>When it rains it pours… I’ve been so busy that I haven’t had a chance to update this as much as I’d like! However, here’s a little tidbit that I struggled with before learning the better way of doing it through Sitecore training: how to make the rich text editor a bit snazzier! <p>This is well documented in the Sitecore documentation and elsewhere, but I always forget where so this post is definitely for my own benefit (and anyone else like me who doesn’t know where to look right away). <p>There are two ways of changing around the rich text editor that I’ll cover, I’ll start with the easier one: <p><strong>1. Setting the source property for the rich text field on your template</strong> <p><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="templatesource" border="0" alt="templatesource" src="http://lh3.ggpht.com/_6mCz8UoQlS0/TLXX8G6NeJI/AAAAAAAAAK0/ZpDxA0WnNXY/templatesource%5B18%5D.jpg?imgmax=800" width="600" height="22"></p> <p>I was pretty thrilled to learn this, just go into your content editor or template manager, open up the template with the rich text field that you want to set this for and choose one of the following options as the source (in <em>italics</em>).</p> <p><strong>Rich Text Default:</strong></p> <p><em>/sitecore/system/Settings/Html Editor Profiles/Rich Text Default</em> <p>This is the default (shocking!) and the control portion looks like the following:<img style="border-right-width: 0px; display: block; float: none; border-top-width: 0px; border-bottom-width: 0px; margin-left: auto; border-left-width: 0px; margin-right: auto" title="rtdefault" border="0" alt="rtdefault" src="http://lh5.ggpht.com/_6mCz8UoQlS0/TLXX9IeXY9I/AAAAAAAAAK4/D1yNp44PXAg/rtdefault%5B7%5D.jpg?imgmax=800" width="263" height="30"> <p><strong>Rich Text Full:</strong> <p><em>/sitecore/system/Settings/Html Editor Profiles/Rich Text Full</em> <p>This is a much more filled out editor shown below: <p><a href="http://lh4.ggpht.com/_6mCz8UoQlS0/TLXYAlpEfKI/AAAAAAAAAK8/QjTGMbAFLnY/s1600-h/rtfull%5B7%5D.jpg"><img style="border-bottom: 0px; border-left: 0px; display: inline; border-top: 0px; border-right: 0px" title="rtfull" border="0" alt="rtfull" src="http://lh4.ggpht.com/_6mCz8UoQlS0/TLXYDKDewRI/AAAAAAAAALA/9EyUrOnRQxk/rtfull_thumb%5B5%5D.jpg?imgmax=800" width="619" height="74"></a> <p><strong>Rich Text Medium:</strong> <p><em>/sitecore/system/Settings/Html Editor Profiles/Rich Text Medium</em> <p>This is the middle of the road editor, more than just the default and less than the Full version. <p><a href="http://lh3.ggpht.com/_6mCz8UoQlS0/TLXYFWE8LVI/AAAAAAAAALE/hugk8U8-HMA/s1600-h/rtmedium%5B5%5D.jpg"><img style="border-bottom: 0px; border-left: 0px; display: block; float: none; margin-left: auto; border-top: 0px; margin-right: auto; border-right: 0px" title="rtmedium" border="0" alt="rtmedium" src="http://lh3.ggpht.com/_6mCz8UoQlS0/TLXYJIgdKjI/AAAAAAAAALI/drVh1gyNR0w/rtmedium_thumb%5B3%5D.jpg?imgmax=800" width="600" height="51"></a> <p>Our next method of changing the rich text editor comes about when the above (or the ones not listed: IDE, Mail) do not meet your needs, or if they Almost do but need to be adjusted. <p><strong>2. Modifying the default rich text editor</strong> <p>To do this you need to switch to the Core Database – at the bottom right in Desktop view is a little grey icon: click that and choose Core from the popup. <p>Once the screen refreshes open up the Content Editor and we need to browse to the HTML Editor Profiles (the paths above are where we are going). If you want to change the properties of the default editor for all rich text fields Copy the Rich Text Default and rename it (just in case!) and then you can pick and choose items from the other Profiles – just copy them over to the Rich Text Default item. <p><a href="http://lh3.ggpht.com/_6mCz8UoQlS0/TLXYMKMxyXI/AAAAAAAAALM/_DaPlgaOb9w/s1600-h/rtfull-folder%5B5%5D.jpg"><img style="border-right-width: 0px; margin: 0px 15px 0px 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="rtfull-folder" border="0" alt="rtfull-folder" align="left" src="http://lh3.ggpht.com/_6mCz8UoQlS0/TLXYRdso-aI/AAAAAAAAALQ/sVk8kNGndR8/rtfull-folder_thumb%5B3%5D.jpg?imgmax=800" width="159" height="322"></a> As seen on the left there are a number of folders and then sets of toolbars: the toolbars are where the magic is at and the folders contain data that can be displayed and modified. </p> <p>For example, you can change the inline styles that are available by selecting the inline style item, and then changing the children (or adding new children for your own custom styles). </p> <p>If you wanted to add Inline styles to your Rich Text Default you can do the following: make sure to copy the Inline Styles folder to Rich Text Default, and then make sure to add the drop down option for css (called Css Class in Toolbar 3 from Full) to the toolbar in Rich Text Default.</p> <p>Each toolbar is separated by a solid line around it or displayed on a new row on the edit screen and you can add, copy, modify or rearrange items as you wish like any other set of items. They can be deleted as well, so it’s always a good idea to keep a copy of the profile you’re editing if something goes wrong.</p> <p>I hope that helps anyone else who has wanted to make changes to the default rich text editor and wasn’t sure where to begin! Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com2tag:blogger.com,1999:blog-4897138373102410856.post-49775467556130307312010-09-16T16:57:00.001-04:002010-09-17T10:33:23.534-04:00Custom Error Pages<p><a href="http://lh6.ggpht.com/_6mCz8UoQlS0/TJKErAt3fII/AAAAAAAAAKs/SmK1sE6K41k/s1600-h/whoops%5B11%5D.png"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="whoops" border="0" alt="whoops" src="http://lh5.ggpht.com/_6mCz8UoQlS0/TJKEtOFmlII/AAAAAAAAAKw/IoDU3fDZhPg/whoops_thumb%5B7%5D.png?imgmax=800" width="619" height="268"></a> </p> <p>One of the important steps of any website is setting it up to fail Nicely. Sitecore has done a lot of this for us with their error pages, but that may not be the look you want your visitors to see! And what if Sitecore isn’t able to help at all? Not so pretty with ASP.NET error pages…</p> <p>But do not fear! With the configuration files Sitecore makes available, this is a snap to set up and fix.***</p> <p><em>***You Will need to change the web.config file, so please back it up before making any changes suggested here!</em><br></p> <p>The first and hardest step – make your error/not found pages that you want your visitors to see – these can be html pages, aspx pages, or even an existing page within Sitecore. </p> <p><em>Quick Edit!--</em> <em>As a commenter pointed out: using Sitecore pages for your 404/page not found type errors can allow you to make use of the Sitecore features for multilingual sites as well as analytics. Not to mention, it makes it very easy for business users to make the changes.</em></p> <p>Usually Sitecore will handle your errors nicely, but if .NET explodes you will need to display something to the user that will Not fail, so I’d <strong>VERY STRONGLY</strong> recommend an html page for errors and not aspx pages: if there’s an error in the error page, you’re back to square one. </p> <p>Upload these files to your Website directory or a subfolder within it – for our example we have saved the files in Website/ErrorPages/.</p> <p>If you’re using Sitecore Items, set those up within your content tree and publish them (somewhere other than where your html error page resides to keep things simple).</p> <p>Now for the magic: In the website folder is a folder called App_Config and inside that is the Include folder. This folder automagically updates the web.config with new settings – it doesn’t require anything to be restarted and immediately takes effect. Also – using these files instead of modifying the web.config directly means you can make web.config type changes in packages without completely destroying the site.</p> <p>There should be a file in that directory called: SitecoreSettings.config.example</p> <p>This is what we will be changing into SitecoreSettings.config and adding our custom ‘not found’ page details. </p> <p>Currently the file looks like this, along with some comments describing the use of the file at the top:<pre class="code"><span style="color: blue"><</span><span style="color: #a31515">configuration </span><span style="color: red">xmlns:patch</span><span style="color: blue">=</span>"<span style="color: blue">http://www.sitecore.net/xmlconfig/</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">sitecore</span><span style="color: blue">><br /> <</span><span style="color: #a31515">settings</span><span style="color: blue">><br /> <!-- </span><span style="color: green">REQUIRE LOCK BEFORE EDITING<br /> If true, the user must have a lock on a document before<br /> he can edit it, otherwise it is always ready for editing<br /> </span><span style="color: blue">--><br /> <</span><span style="color: #a31515">setting </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">RequireLockBeforeEditing</span>" <span style="color: red">value</span><span style="color: blue">=</span>"<span style="color: blue">false</span>"<span style="color: blue">/><br /> <br /> </</span><span style="color: #a31515">settings</span><span style="color: blue">><br /> </</span><span style="color: #a31515">sitecore</span><span style="color: blue">><br /></</span><span style="color: #a31515">configuration</span><span style="color: blue">></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p>We are going to erase this, and put in the following:<pre class="code"><span style="color: blue"><</span><span style="color: #a31515">configuration </span><span style="color: red">xmlns:patch</span><span style="color: blue">=</span>"<span style="color: blue">http://www.sitecore.net/xmlconfig/</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">sitecore</span><span style="color: blue">><br /> <</span><span style="color: #a31515">settings</span><span style="color: blue">><br /> <</span><span style="color: #a31515">setting </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">ItemNotFoundUrl</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">patch:attribute </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">value</span>"<span style="color: blue">></span>/ErrorPages/404.html<span style="color: blue"></</span><span style="color: #a31515">patch:attribute</span><span style="color: blue">><br /> </</span><span style="color: #a31515">setting</span><span style="color: blue">><br /> <</span><span style="color: #a31515">setting </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">LinkItemNotFoundUrl</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">patch:attribute </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">value</span>"<span style="color: blue">></span>/ErrorPages/404.html<span style="color: blue"></</span><span style="color: #a31515">patch:attribute</span><span style="color: blue">><br /> </</span><span style="color: #a31515">setting</span><span style="color: blue">><br /> <</span><span style="color: #a31515">setting </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">LayoutNotFoundUrl</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">patch:attribute </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">value</span>"<span style="color: blue">></span>/ErrorPages/404.html<span style="color: blue"></</span><span style="color: #a31515">patch:attribute</span><span style="color: blue">><br /> </</span><span style="color: #a31515">setting</span><span style="color: blue">><br /> <</span><span style="color: #a31515">setting </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">ErrorPage</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">patch:attribute </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">value</span>"<span style="color: blue">></span>/ErrorPages/Error.html<span style="color: blue"></</span><span style="color: #a31515">patch:attribute</span><span style="color: blue">><br /> </</span><span style="color: #a31515">setting</span><span style="color: blue">><br /> </</span><span style="color: #a31515">settings</span><span style="color: blue">><br /> </</span><span style="color: #a31515">sitecore</span><span style="color: blue">><br /></</span><span style="color: #a31515">configuration</span><span style="color: blue">></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p>The above basically tells the web.config file to update the specified settings with our new and improved values. <br /><p>You can choose other files to use or have different files for each – and these special pages do not stop any logging from happening on the server – they simply give a better experience for your users when your site is having some trouble. <p>ItemNotFoundUrl and LinkItemNotFoundUrl will come up when a visitor tries to access an item that doesn’t exist or hasn’t been published (it doesn’t exist yet on the web database). This replaces the default value of: /sitecore/service/notfound.aspx with our own /ErrorPages/404.html <br /><p>You’ll notice that the default is pulling from /sitecore/service ß if you have blocked this directory or don’t have it available, you will need to make the changes above so that users see Some kind of page instead of a browser default. <br /><p>LayoutNotFoundUrl will come up when the user tries to visit an item that does exist, but no layouts have been assigned to the item so Sitecore doesn’t know what to display for the user. This replaces /sitecore/service/nolayout.aspx in the default web.config file. <br /><p>ErrorPage should come up whenever there is a generic error within Sitecore – the default setting we are overwriting is: /sitecore/service/error.aspx <br /><p>Save your new file without the .example extension and you should now see your custom error pages whenever you try to access missing items! <br /><p>The next step is the change to the web.config for handling errors when sitecore can’t handle them for us – save a backup of your web.config and then open it up in an editor. <br /><p>Here is what we are looking for:<pre class="code"><span style="color: blue"><!-- </span><span style="color: green">CUSTOM ERROR MESSAGES<br /> Set customError mode values to control the display of user-friendly <br /> error messages to users instead of error details (including a stack trace):<br /><br /> "On" Always display custom (friendly) messages <br /> "Off" Always display detailed ASP.NET error information.<br /> "RemoteOnly" Display custom (friendly) messages only to users not running <br /> on the local Web server. This setting is recommended for security purposes, so <br /> that you do not display application detail information to remote clients.<br /> </span><span style="color: blue">--><br /> <</span><span style="color: #a31515">customErrors </span><span style="color: red">mode</span><span style="color: blue">=</span>"<span style="color: blue">On</span>" <span style="color: blue">/></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p>Search for customErrors to find it quickly. It may also have one of the above settings, RemoteOnly or Off. I would recommend On or RemoteOnly if you won’t have visitors accessing the site locally. <br /><p>We want to change the setting to also include a redirect to our new Error page:<pre class="code"><span style="color: blue"><</span><span style="color: #a31515">customErrors </span><span style="color: red">mode</span><span style="color: blue">=</span>"<span style="color: blue">RemoteOnly</span>" <span style="color: red">defaultRedirect</span><span style="color: blue">=</span>"<span style="color: blue">/ErrorPages/Error.html</span>"<span style="color: blue">/></span></pre><br /><p>Now, if anything serious should happen, your users will not end up seeing an ASP.NET error page telling them it is broken and will instead get to see a page of your choice! This should Not point to a page you have in Sitecore since it will not work in the case of ASP.NET failing. <br /><p>Anyone have any tips on making the user experience better in the case of errors? </p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com7tag:blogger.com,1999:blog-4897138373102410856.post-17670140173302622782010-09-01T23:00:00.004-04:002010-09-06T10:43:25.361-04:00Sitecore Training: Sitecore 6.2 .net Developer Series Experiences<a href="http://www.flickr.com/photos/edwinsail/128739161/in/pool-11658759@N00" target="_blank"><img alt="128739161_5a5c4eaf3d_z" border="0" height="346" src="http://lh5.ggpht.com/_6mCz8UoQlS0/TH8dnS1AQ1I/AAAAAAAAAKQ/wgDqcNHPCCE/128739161_5a5c4eaf3d_z%5B19%5D.jpg?imgmax=800" style="border-width: 0px; display: block; float: none;" title="128739161_5a5c4eaf3d_z" width="600" /></a><br />
<br />
At the beginning of August, I was able to go out to Mill Valley, CA for the .net developer series training at Sitecore USA Headquarters. The course was 4 days of Sitecore goodness, with a certification and a day of hands-on building with Sitecore. Once I found out I would be heading to training, I spent a fair bit of time trying to find out what it would be like and searched for details of the certification without much luck. So for those out there who want to know a little bit more before you’re in the thick of things, here is what happened for me!<br />
<br />
The quick and dirty description, for those who want to avoid the wall of text: I’d say this training is a must for any developer switching over to Sitecore – without it, it can be really hard to get the whole picture of the product and really see what it is capable of. Even for those of us who had been using Sitecore for a bit before training (there were a number of us in the class), it was very useful to see how to do things the ‘Sitecore way’ and to learn a few things that are just not available through searching alone. The Fundamentals day will introduce you to what Sitecore is all about and why you should be so excited to use it – it will also show you how to begin using it as a developer or user. The two developer days will give you a good background for doing most tasks that will be requested from clients, and the day of prototyping will give some hands-on practice in doing just that. Also, certification will grant you access to other areas of SDN and the ability to request support through them for the product. It’s also part of your company becoming a Sitecore Partner.<br />
<br />
So... here are my experiences, from beginning to end... after the cut!<br />
<a name='more'></a><br />
Before the training, I received instructions on how to prepare my laptop and install the starter kit – the instructions were all straightforward and they set up a time to contact them for help if I needed any assistance with getting ready. I didn’t encounter any issues and it was smooth sailing! I’d recommend taking a look through the starter kit website to get a little bit familiar with it since you’ll be using it a lot.<br />
<br />
Flying out of Atlanta to California, I arrived on the Sunday before Monday training began and was able to take a look around. I stayed at the Larkspur Hotel, which is just a short drive from the training location and decently close to a number of amenities. Driving into Mill Valley, one thing I did notice is that parking is at a premium – I ended up eating mostly near the training location or at the hotel restaurant (which was actually amazing if you enjoy Italian food). Day one was a little difficult finding food in the direction I went, but as I said, near the training location were a number of things; notably on the other side of the highway from training you can find a Starbucks, as well as the Harmony restaurant (all-day Dim Sum) and an ‘In n Out’ burger place.<br />
<br />
Back to Sitecore!<br />
<br />
<h4>Day one – Sitecore Foundations!</h4>Arriving at the Sitecore offices, I was directed upstairs to the training room, which was a modest size and had rows where you could set up your laptop and take a seat. We all set up nametags and our instructor (Craig) introduced himself, then we all gave our introductions and picked out our choice for lunch from a local restaurant menu. Books were passed around for the slides we’d be looking at so that we could follow along and make notes, which were definitely worth hanging onto as they will work as a good resource for others who may not be able to make it to a training course. After the intros, we got right into things and were given a good overview of what Sitecore is, how it works, and how we can use it. It was a general introduction and not very specific – some of the students were only attending that day, in order to get more familiar with the product. If you’re already familiar with Sitecore it’s a good review, and if you’re new, try to follow along as well as possible because the next two days will definitely push that knowledge!<br />
<h4>Day 2 – Sitecore .net Developer Day 1</h4>This is where things really got started! We all came in as before, picked out lunch from a different menu (the lunches were phenomenal), and then received our new book for the next two days… it’s a much bigger book! The format for these days was a little different: Craig would give us a demo of the topic and then go through the associated slides with more details. After that, we would flip to the back of the book and do exercises to implement what was shown or simply to get a feel for it (all the steps were given as well as code to complete each exercise). Each set of exercises would have some optional ‘intermediate’ and ‘advanced’ options. I’d really recommend doing these as they are some good practice and some of the topics come up on the test. Plus, it’s much easier to remember them when you’ve spent time typing it all up. ;) Another recommendation is that if you find something handy/useful/test-worthy, make a note of it/sticky tab the page or something for quick reference later. After the exercises we’d have a break before going on to the next section - 5 minutes, sometimes shorter or longer depending on how long everyone took for the exercises.<br />
<h4>Day 3 - Sitecore .net Developer day 2 (Test Day! ...Maybe!)</h4>We came in for the 2nd day and it was the same as the day before – a quick pace of demo, slides, and exercises. At the end of the day we did a review of everything we had covered and then a review of what was expected for the certification. Our class did our test on the morning of the last day, but I think that will depend on your instructor and the class.<br />
<br />
Now for what I know I was looking for: <i><b>Certification Test Information!</b></i><br />
<br />
This may change, but when I took it: the test was 40 questions, multiple choice with 3 answers each. You had 55 minutes to complete the test and it was done online, where you had access to all of your resources except each other and other people (no IM’ing was allowed). Although the 'open-book' aspect makes it sound like it would be easy, do keep in mind that the test is only 55 minutes, which doesn’t give a lot of time to look up answers or get your Google on. In order to pass and thus be considered certified, you needed to answer 28 questions correctly.<br />
<br />
Most of the questions I saw (they are pulled from a pool of questions, so every test is different – you could get lucky and get all the ‘easy’ questions, or unlucky and get all the hard ones) were variations of something like this: Bob has a layout and he wants to do X - what is the best way? Then you’re given 3 plausible answers and you need to choose the best. Usually one is a little more clearly wrong than the other two, and of the others, you’re wise to consult the Best Practices notes from your book to decide on which will be the best/fastest/most accurate. There were also a fair number of code questions with the same approach, but since we had the starter kit, you could just cut and paste to try things out if the answer wasn’t clear and you were doing decently on time.<br />
<br />
Once you've complete the test, the instructor will send you an email which lets you know: if you passed or not, what you got wrong, and the correct answers for any of those missed questions. If you didn’t pass, you can take the test again in 24 hrs at the earliest. If you fail it again, you can petition to take it once more, but they’d rather you re-do the course at that point, to make sure that you have a good grasp of the concepts.<br />
Once day 3 ended, we all went back to our hotels and partied (or played D&D over Skype if you’re me).<br />
<br />
<h4>Day 4 – Day of Prototyping (and taking the test for some)</h4>As mentioned, we started this day by taking the test after filling out our lunch requests. A couple other things about testing: to begin the test, everyone gets a login and then you log in again with your SDN email and password - make sure this is working before you head out to training! That done, the test begins and an hour later you get to know your fate.<br />
<br />
Afterwards, there was a brief break to recover from test-taking and we began the day in earnest. Our task was to build out a site for an organization: the class was broken up into teams (green team!) of two and each assigned a portion of the site to complete once the class at large determined the site architecture to use (this was a democratic decision with the instructor and class). We could use all of our resources and the instructor was available to help as well – it was a good chance to get ‘real world’ experience with the product and I think was very helpful for some of the students who were newer to<br />
Sitecore to actually see it in use.<br />
<br />
After that, we all headed home and got to enjoy the very long drive through San Francisco rush hour to the airport while dreaming of all the things we could do with Sitecore.Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com5tag:blogger.com,1999:blog-4897138373102410856.post-8760060672921733102010-08-24T10:29:00.001-04:002010-08-24T10:29:13.975-04:00Saving Images for the Web in Photoshop<p>Recently we ran into a problem where we had uploaded some images and they were using CMYK – which will not work on some browsers and can result in images not being shown or displaying as broken. To avoid this you can easily save your images in a format that is more ideal for the web (RGB).</p> <p>To do this in Photoshop (CS4 shown, it’s similar for other versions) just do the following:</p> <p>1. Open your original file, adjust according to your needs.</p> <p>2. When ready, click File -> Save for Web and Devices</p> <p><a href="http://lh4.ggpht.com/_6mCz8UoQlS0/THPXMxtl3mI/AAAAAAAAAIw/bU-1FGGixOU/s1600-h/clip_image0013.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="clip_image001" border="0" alt="clip_image001" src="http://lh5.ggpht.com/_6mCz8UoQlS0/THPXNZH0BpI/AAAAAAAAAI0/sAKZAOUjoFk/clip_image001_thumb.jpg?imgmax=800" width="236" height="244"></a></p> <p>3. When that comes up, make sure the checkbox to convert to sRGB is checked and it is in the format you desire (small note: PNG files will not work properly in IE6).</p> <p><a href="http://lh4.ggpht.com/_6mCz8UoQlS0/THPXN2Rl7XI/AAAAAAAAAI4/P6UYjxmcq-I/s1600-h/SaveForSettings4.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="SaveForSettings" border="0" alt="SaveForSettings" src="http://lh5.ggpht.com/_6mCz8UoQlS0/THPXONKBg2I/AAAAAAAAAJA/OeWZMoY_bN8/SaveForSettings_thumb2.jpg?imgmax=800" width="238" height="391"></a> </p> <p>4. Click Save! </p> <p>You now have an image that will work properly!</p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com0tag:blogger.com,1999:blog-4897138373102410856.post-67178917551110027012010-08-24T10:25:00.001-04:002010-08-24T10:25:38.759-04:00A Simple Site Map<p>Similar to creating a menu – creating a site map is even easier, there are modules that can do this but with a little preparation it can be very easy to create yourself.</p> <p>To start we are assuming every template used for the pages includes some ‘base template’ for common aspects for all pages. </p> <p>To do this, create (or select if already created) the Base Template with the information you want to have and to that base template, add: </p> <p>InSiteMap: Checkbox</p> <p>Then create or modify the Page templates with the other information you want. From those templates, click to the Content tab, and select the Base template to be included:</p> <p><a href="http://lh4.ggpht.com/_6mCz8UoQlS0/THPWYD6w6TI/AAAAAAAAAIo/eVwaNkDZtzI/s1600-h/sitecoretemplatecontent3.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="sitecoretemplatecontent" border="0" alt="sitecoretemplatecontent" src="http://lh4.ggpht.com/_6mCz8UoQlS0/THPWYXX3hbI/AAAAAAAAAIs/IN8ijRXoN8o/sitecoretemplatecontent_thumb1.jpg?imgmax=800" width="493" height="318"></a> </p> <p>In the Standard values for the base template, you may want to have InSiteMap checked so that it will be on by default for all the pages.</p> <p>For the sitemap itself, we’re going to create a rendering and then we can place it wherever we would like.</p> <p>The rendering creates a basic nested list of all the items that have InSiteMap checked.</p><pre class="code"><span style="color: blue"><</span><span style="color: #2b91af">xsl:template </span><span style="color: red">match</span><span style="color: blue">=</span>"<span style="color: blue">*</span>" <span style="color: red">mode</span><span style="color: blue">=</span>"<span style="color: blue">main</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">ul</span><span style="color: blue">><br /> <</span><span style="color: #a31515">li</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:link </span><span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$home</span>"<span style="color: blue">><br /> </span>Home<br /> <span style="color: blue"></</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:variable </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">hasSubItems</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$home/item[sc:fld('InSiteMap',.) = '1']</span>"<span style="color: blue">/><br /> <</span><span style="color: #2b91af">xsl:if </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">$hasSubItems</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:call-template </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">subitems</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:with-param </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">itemparent</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$home</span>" <span style="color: blue">/><br /> </</span><span style="color: #2b91af">xsl:call-template</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:if</span><span style="color: blue">><br /><br /> </</span><span style="color: #a31515">li</span><span style="color: blue">><br /> </</span><span style="color: #a31515">ul</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:template</span><span style="color: blue">><br /><br /> <</span><span style="color: #2b91af">xsl:template </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">subitems</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:param </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">itemparent</span>" <span style="color: blue">/><br /> <</span><span style="color: #a31515">ul</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:for-each </span><span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$itemparent/item[sc:fld('InSiteMap',.) = '1']</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">li</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:text </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Page Title</span>" <span style="color: blue">/><br /> </</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> </</span><span style="color: #a31515">li</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:variable </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">hasSubItems</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">item[sc:fld('InSiteMap',.) = '1']</span>"<span style="color: blue">/><br /> <</span><span style="color: #2b91af">xsl:if </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">$hasSubItems</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:call-template </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">subitems</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:with-param </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">itemparent</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">.</span>" <span style="color: blue">/><br /> </</span><span style="color: #2b91af">xsl:call-template</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:if</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:for-each</span><span style="color: blue">><br /> </</span><span style="color: #a31515">ul</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:template</span><span style="color: blue">><br /></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p>Above we list the link to the home item in an unordered list:</p><pre class="code"><span style="color: blue"> <</span><span style="color: #a31515">sc:link </span><span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$home</span>"<span style="color: blue">><br /> </span>Home<br /> <span style="color: blue"></</span><span style="color: #a31515">sc:link</span><span style="color: blue">></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p><sc:link> with no parameters will link to the current item that is being processed by the xslt file – if not specified by any settings this will default to the page that the rendering is on. Since the current page is Not actually the home page, we are choosing to use $home as the source for the link (if the source for the link was actually in a field in the item you’d used field=”field name”). </p><br /><p>Moving on, if there are any items under home that are listed as ‘InSiteMap’ it will call our template named subitems and pass the value for the parent of the item.</p><pre class="code"><span style="color: blue"> <</span><span style="color: #2b91af">xsl:variable </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">hasSubItems</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$home/item[sc:fld('InSiteMap',.) = '1']</span>"<span style="color: blue">/><br /> <</span><span style="color: #2b91af">xsl:if </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">$hasSubItems</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:call-template </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">subitems</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:with-param </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">itemparent</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$home</span>" <span style="color: blue">/><br /> </</span><span style="color: #2b91af">xsl:call-template</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:if</span><span style="color: blue">></span></pre><br /><p>Here the variable <em>hasSubItems</em> is created and the value for this is determined by any items within $home containing the field InSiteMap being checked (=’1’ – unchecked would be =’0’).</p><br /><p>If we have any items that will be in the sitemap under $home, we call our template.</p><br /><p>Within the template, we create a new unordered list, and then go through each item which will be listed in the site map and display a link using the ‘Page Title’ (this is any field that we want to have displayed to represent the item). We then check to see if we have any subitems to display and run the template again! With a bit of recursion, we head through all the items on the site as long as they and their parents have InSiteMap checked.</p><br /><p>All that is left is adding the rendering to a page to be seen, and it will display a nested list of the pages on the site to be styled as needed! </p><br /><p>Alternately, instead of checking for a selected checkbox, it could run through all pages with a specific template(or selection of templates) if you did not need to worry about excluding any specific pages that are using it.</p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com1tag:blogger.com,1999:blog-4897138373102410856.post-32989530960550864872010-08-24T10:23:00.001-04:002010-08-24T10:23:08.999-04:00External and Internal Links as Items<p>I ran into a problem creating the navigation for the footer rendering on a page – On there I needed to have links to the following pages: terms, contact, careers, and the sitemap. The problem arose when trying to add ‘Contact’ and ‘Careers’: ‘Contact’ was a few levels down in the tree of content items and ‘Careers’ was an external page. Initially, I had a checkbox in the template of each page for if the item was in the footer (ie: InFooterNav checked) and then the XSLT file would go through the entire list of items to find what would be in the footer navigation. It wasn’t an ideal solution when so few items had the tag in the entire site and it did not help with my external link at all. Thus was born: The Link Template!</p> <p>The new template basically consisted of:</p> <p>Link Data:</p> <ul> <li>Link: General Link<font color="#804000"> //This is the link to our item or the URL for the external page </font> <li>Nav Title: Single Line Text <font color="#804000">//The title we want to have displayed in our menu – this is the same as in my regular items</font> <li>Target: Single Line Text (or a drop down list) <font color="#804000">//The target if we want to open the page in a new window – **this can be skipped since general link has this option</font> </li></ul> <p>Properties:</p> <ul> <li>InFooterNav: Checkbox <font color="#804000">//Just a checkbox to see if this link is going to be in our footer, this is the same as regular items.</font> </li></ul> <p>Within the Standard Values I assigned a new layout for the items with the following code within:</p><pre class="code"><span style="background: #ffee62"><%</span> Sitecore.Data.Items.<span style="color: #2b91af">Item </span>item = Sitecore.<span style="color: #2b91af">Context</span>.Item; <br /> Response.Redirect(((Sitecore.Data.Fields.<span style="color: #2b91af">LinkField</span>)item.Fields[<span style="color: #a31515">"Link"</span>]).Url); <span style="background: #ffee62">%></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p>The above redirects the user to whatever URL was provided within the “Link” field.</p><br /><p>I then created a bunch of items with the appropriate links in the folder where other footer only type items also lived – for our example let us say “/sitecore/content/Home/Footer/”</p><br /><p>To retrieve my footer items I now only had to check that folder and not search the entire site to actually see if the box is checked.</p><br /><p>And a little more useful - using this template, I could put a link to any external page under any item – allowing me to have external links within my navigation such as Careers.</p><br /><p>The above layout will work fine for my footer, but what if you wanted links to open in other windows? Or didn’t want to take the extra step of creating a layout? The rendering can be changed to make use of our new template:</p><pre class="code"><span style="color: blue"> <</span><span style="color: #a31515">ul</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:for-each </span><span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$home/Footer/item[sc:fld('InFooterNav',.) = '1']</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">li</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:choose</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:when </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">@template = 'link template'</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:variable </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">linkTarget</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">sc:fld('Target',.)</span>" <span style="color: blue">/><br /> <</span><span style="color: #a31515">sc:link </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Link</span>" <span style="color: red">target</span><span style="color: blue">=</span>"<span style="color: blue">{$linkTarget}</span>" <span style="color: blue">><br /> <</span><span style="color: #a31515">sc:text </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Nav Title</span>" <span style="color: blue">/><br /> </</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:when</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:otherwise</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:text </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Nav Title</span>" <span style="color: blue">/><br /> </</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:otherwise</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:choose</span><span style="color: blue">><br /> </</span><span style="color: #a31515">li</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:for-each</span><span style="color: blue">><br /> </</span><span style="color: #a31515">ul</span><span style="color: blue">></span></pre><br /><p><a href="http://11011.net/software/vspaste"></a></p><br /><p>Above we have a choose statement to determine if this is using the new link template or not (called “Link Template” but listed in lowercase):</p><pre class="code"><span style="color: blue"><</span><span style="color: #2b91af">xsl:when </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">@template = 'link template'</span>"<span style="color: blue">></span></pre><br /><p>Then we create a variable for our target and create the link based on our General Link field called “Link” by specifying it for field:<a href="http://11011.net/software/vspaste"></a></p><pre class="code"><span style="color: blue"><</span><span style="color: #2b91af">xsl:variable </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">linkTarget</span>" <span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">sc:fld('Target',.)</span>" <span style="color: blue">/><br /><</span><span style="color: #a31515">sc:link </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Link</span>" <span style="color: red">target</span><span style="color: blue">=</span>"<span style="color: blue">{$linkTarget}</span>" <span style="color: blue">><br /> <</span><span style="color: #a31515">sc:text </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Nav Title</span>" <span style="color: blue">/><br /></</span><span style="color: #a31515">sc:link</span><span style="color: blue">></span></pre><br /><p>Otherwise if it is a normal item in the tree, we give it a normal link and continue to the next item!</p><pre class="code"><span style="color: blue"><</span><span style="color: #2b91af">xsl:otherwise</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:text </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Nav Title</span>" <span style="color: blue">/><br /> </</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /></</span><span style="color: #2b91af">xsl:otherwise</span><span style="color: blue">></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p>** General Links can specify the target for you so a lot of the above isn’t necessary as long as you’re using sc:link!</p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com4tag:blogger.com,1999:blog-4897138373102410856.post-41033058012992824102010-08-24T10:08:00.001-04:002010-08-24T10:13:17.273-04:00A Simple Single Level Menu with Rounded Edges<p>After taking some time to figure this out, I thought I’d share my approach to a simple single level menu rendering with rounded edges. Initially, the idea here is very straight forward – create a list, style it, voila! Unfortunately, Round edges and dynamic content make it a little less forgiving. </p> <p>Here is an Example of what we are trying to achieve: </p> <p><a href="http://lh3.ggpht.com/_6mCz8UoQlS0/THPSSbfuUxI/AAAAAAAAAIg/rKbj8OKpNMo/s1600-h/menubar%5B5%5D.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="menubar" border="0" alt="menubar" src="http://lh5.ggpht.com/_6mCz8UoQlS0/THPSSvl7R8I/AAAAAAAAAIk/hyy0MFRUVZc/menubar_thumb%5B3%5D.jpg?imgmax=800" width="431" height="72"></a> </p> <p>Each of these items would be a sub item in the site, all at the same level under ‘/Sitecore/Content/Site’ </p> <p>In our XSLT rendering we need to grab the list, and apply the appropriate styles to the appropriate items, notably: The first item needs to have a round corner on the left, the Last item needs to have a round corner on the right, and the inner items need to have borders around them all – and we need to be able to Hover for a different effect. </p> <p>To do this I did the following: </p><pre class="code"><span style="color: blue"><</span><span style="color: #2b91af">xsl:template </span><span style="color: red">match</span><span style="color: blue">=</span>"<span style="color: blue">*</span>" <span style="color: red">mode</span><span style="color: blue">=</span>"<span style="color: blue">main</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">ul </span><span style="color: red">id</span><span style="color: blue">=</span>"<span style="color: blue">MainNav</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:for-each </span><span style="color: red">select</span><span style="color: blue">=</span>"<span style="color: blue">$SiteContent/item[sc:fld('InTopNav',.) = '1']</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:variable </span><span style="color: red">name</span><span style="color: blue">=</span>"<span style="color: blue">EdgeClass</span>"<span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:if </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">position()='1'</span>"<span style="color: blue">></span>FirstItem<span style="color: blue"></</span><span style="color: #2b91af">xsl:if</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:if </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">position() = last()</span>"<span style="color: blue">></span>LastItem<span style="color: blue"></</span><span style="color: #2b91af">xsl:if</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:variable</span><span style="color: blue">><br /> <</span><span style="color: #2b91af">xsl:if </span><span style="color: red">test</span><span style="color: blue">=</span>"<span style="color: blue">position() = last()</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">li </span><span style="color: red">class</span><span style="color: blue">=</span>"<span style="color: blue">preLastItem</span>"<span style="color: blue">><br /> <</span><span style="color: #a31515">span</span><span style="color: blue">></span>.<span style="color: blue"></</span><span style="color: #a31515">span</span><span style="color: blue">><br /> </</span><span style="color: #a31515">li</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:if</span><span style="color: blue">><br /> <</span><span style="color: #a31515">li </span><span style="color: red">class</span><span style="color: blue">=</span>"<span style="color: blue">{$EdgeClass}</span>" <span style="color: blue">><br /> <</span><span style="color: #a31515">span</span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:link </span><span style="color: blue">><br /> <</span><span style="color: #a31515">sc:text </span><span style="color: red">field</span><span style="color: blue">=</span>"<span style="color: blue">Nav Title</span>" <span style="color: blue">/><br /> </</span><span style="color: #a31515">sc:link</span><span style="color: blue">><br /> </</span><span style="color: #a31515">span</span><span style="color: blue">><br /> </</span><span style="color: #a31515">li</span><span style="color: blue">><br /> </</span><span style="color: #2b91af">xsl:for-each</span><span style="color: blue">><br /> </</span><span style="color: #a31515">ul</span><span style="color: blue">><br /></span><span style="color: blue"></</span><span style="color: #2b91af">xsl:template</span><span style="color: blue">></span></pre><a href="http://11011.net/software/vspaste"></a><br /><p>The above runs through every item which has InTopNav checked in that level (if you had /SiteCore/Content/Site/Home and then all the items under Home, it would be a bit different) </p><br /><p>In terms of what happens when this runs: </p><br /><p>1. First item is read and link displayed -- given the “FirstItem” class. </p><br /><p>2. 2<sup>nd</sup> item is read -- link is displayed with No class assigned. </p><br /><p>… </p><br /><p>N. Last item is read: $EdgeClass is now “LastItem”, list item with a period is displayed followed by the list item for the last link -- given the “LastItem” class. </p><br /><p>All that is left is styling the menu: I created extra wide images for the left rounded edge, right rounded edge and the general middle links so that they could overlap and slide around depending on the length of the text and set them as the background images for the links (ie: #Menu li.FirstItem a). </p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com0tag:blogger.com,1999:blog-4897138373102410856.post-4129895518413324732010-08-24T09:47:00.001-04:002010-08-24T10:14:20.797-04:00Web Forms for Marketers: Send Email<p>To have the save action for your form actually send email, you will need to change one of the settings, otherwise you will receive this error whenever submitting the form: </p> <p><font color="#ff0000">We experience a technical difficulty while processing your request. Your data may not have been correctly saved.</font></p> <p>Also in your log (/data/logs/newest log file) you will see this error after the form has been submitted:</p><pre class="code">Exception: System.Net.WebException<br />Message: The remote name could not be resolved: 'example.host'<br />Source: System<br /> at System.Net.ServicePoint.GetConnection(PooledStream PooledStream, Object owner, Boolean async, IPAddress& address, Socket& abortSocket, Socket& abortSocket6, Int32 timeout)<br /> at System.Net.PooledStream.Activate(Object owningObject, Boolean async, Int32 timeout, GeneralAsyncDelegate asyncCallback)<br /> at System.Net.PooledStream.Activate(Object owningObject, GeneralAsyncDelegate asyncCallback)<br /> at System.Net.ConnectionPool.GetConnection(Object owningObject, GeneralAsyncDelegate asyncCallback, Int32 creationTimeout)<br /> at System.Net.Mail.SmtpConnection.GetConnection(String host, Int32 port)<br /> at System.Net.Mail.SmtpTransport.GetConnection(String host, Int32 port)<br /> at System.Net.Mail.SmtpClient.GetConnection()<br /> at System.Net.Mail.SmtpClient.Send(MailMessage message)<br />WARN Web Forms for Marketers: an unhandled exception: Failure sending mail. has occured while trying to execute an action.<br /></pre><a href="http://11011.net/software/vspaste"></a><br /><p>In your content tree, browse down to: /sitecore/system/Modules/Web Forms for Marketers/Settings/Actions/Save Actions/Send Mail</p><br /><p>Under that item there will be a submit section with parameters:</p><br /><p><a href="http://lh5.ggpht.com/_6mCz8UoQlS0/THPNUj4b4fI/AAAAAAAAAIY/hZPFjSuFr64/s1600-h/wffmpara4.jpg"><img style="border-right-width: 0px; display: inline; border-top-width: 0px; border-bottom-width: 0px; border-left-width: 0px" title="wffmpara" border="0" alt="wffmpara" src="http://lh3.ggpht.com/_6mCz8UoQlS0/THPNU_XQJfI/AAAAAAAAAIc/TWvvqOBdH70/wffmpara_thumb2.jpg?imgmax=800" width="508" height="140"></a> </p><br /><p>Just replace example.host with your SMTP host information for the server, and form@example.host with the address you want to send mail from – save, and republish!</p><br /><p>That should correct the error above and, barring any other issues, hopefully the form will be working as intended!</p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com58tag:blogger.com,1999:blog-4897138373102410856.post-84064083394004335452010-08-23T22:56:00.001-04:002010-08-23T22:56:27.687-04:00Hello World!<p>I’ve been itching to get this going for some time now, and decided to simply take the plunge! I’ll be initially importing my previous posts from the <a href="http://blog.arkesystems.com" target="_blank">Arke Systems Blog</a> and then should have some more new tidbits shortly after. </p> <p>I am somewhat new to the blogging world (and newly certified with <a href="http://www.sitecore.net" target="_blank">Sitecore</a>) and my hope is that this can eventually become a handy resource for others getting started with our favorite CMS! Initially there was a lot of struggle for me to find out basic information on how to do seemingly simple things (training really is the best way to go), so I’ll be posting a lot of small tips as I go along, and if I gloss over anything – comment!</p> <p>One thing I'm really hoping for from this blog is some feedback – so please, comment and let me know where things can be improved or if this was useful at all – or if you’d like me to post about a particular topic.</p> <p>Looking forward to the future!</p> Amyhttp://www.blogger.com/profile/05576127292842766437noreply@blogger.com3