My Sitecore 6 twitter module

For a couple of weeks ago I had fun making a twitter module for Sitecore 6.   The main goal of this module was to show of some of my skills as a Sitecore developer, and i want to share this with you (c:. Her are some of the highlights.

1. Sitecore scheduled twitter updater task, that manages import of twits from a given Twitter user
2. All twits are saved as Sitecore Items.
3. All twits are displayed with a XSLT rendering.
4. Download the package and the source files(at the end of the article)

Short description of the Sitecore Setup.

The Sitecore Scheduled task is setup to call the twitter manager webform witch gets all new twits from a twitter account which is defined by name in Sitecore. Here you can see it running on my machine
The webform called by the Sitecore scheduled task stores all the new twits as Items in the master database and publishes them to web database. These items are purely meant as data items,  so they have no renderings or layout attached to their template.  All the twit items are placed under the “global” folder item so they can be separated from all the other nondata items like my Twitter page item(described below).

An example off twits items generated by my twitter manager. Every Item is named so it will allays have a unique name.

Twitter manager webform called by the Sitecore, gets it’s twitter username from the Twitter page item, which in my example can be found under the Home root item.

Here you can see the twitter item based on the TwitterManagerPage template. Items based on this template are meant to display all twits from a given user in this case me (c:

Items based on the TwitterManagerPage template has its own icon and device setup.  So they can be used to show a list of twits items stored within the sitecore in the front-end.

Here you can see the setup of device for the TwitterManagerPage template.

To display a list of twits, I’ve made a simple layout with a placeholder, that in my case  is used to display a rendering, which renders all the twit items in the global folder as a sorted list.

her you can see the layout and rendering associated with twitter manager.

I like to keep my things neat so i’ve added a TwitterManager folder to layouts rendering and templates folders (c:
If you want to try this twitter module you can download the package that i have made here.  Remember to read the readme file which explaines in further detail the content of the pakadge and the install procidure.

When the twitter module is installed and up  runing on your Sitecore solution, you should be able to se a list with twitter entries like this one (c:

Download

TwitterManager Package[33kb],   TwitterManager source code [3mb]

if you have any questions to the source code or the description above, fill free and ask (c:

Advertisements

How XSLT macro can be used inside an umbraco richtext editor

I’ve been trying to make a simple XSLT macro, that can be used from the macro dropdown in Umbraco rich text editor. And this has proved somewhat more interesting that i have anticipated.

Making macroes in Umbraco is pretty simple and strait forward, just go under Development in Seactions and right click “XSLT files” folder in the tree menu. Choose create from the menu and type in the name of the XSLT, press ok and you are in business. If you haven’t unchecked Create macro, you’ll find your macro in the “Macros” folder, under the same name as your XSLT. Easy as eating pancakes right.. (c:

So her’s where the fun begins ,.. to make this usable from the reachtext editor, you must check the “Use in editor” chekerbox under “macro properties” tab. This is the easy setup part.

You can use your XSLT macro as it is in your .Net code by calling it like this

<umbraco:Item field="macroNameHere" runat="server"></umbraco:Item>

but here is the dangerous bit,.. If you are reading it in through XSLT,  from your richtext field,  like this

<xsl:value-of select="$currentPage/data[@alias = 'bodyText']" />

the Macro will never be rendered and the only thing you will get is this bit of code rendered as common text, Bummer )c:

<?UMBRACO_MACRO  macroAlias="macroNameHere" />

Now befour you will start tearing hair from your head, this is what you could do,.. (c:

<xsl:variable name="content" select="$currentPage/data[@alias='bodyText']"/>
<xsl:value-of select="umbraco.library:RenderMacroContent($content, $currentPage/@id)" disable-output-escaping="yes"/>

By using the RenderMacroContent you are forcing umbraco to render your macro which is allready represented by its tag in the reachtext field.

another apprach is to use the folowing code snipped witch will enchure to render our XSLT Macro automatically

<xsl:value-of select="umbraco.library:Item($currentPage/@id,'bodytext')" />

It’s less code compared to the other method, and as another small bonus the Item-extension makes sure that you can edit the content i canvas-mode as well. That option is normally not possible when rendering the content through XSLT  (c:

happy days,..

XSLT bug, xslt removes html tags by it self

And this is a fact,.. I often use  HTML  when i make my renderings for Sitecore.  If yore not care-full,.. you can end up with a site which is not W3C compliant or even worse if it messes up your design,..

So her’s the problem,. if you type something like this in your XSLT
<div class=”separator”></div>

XSLT will only render the start tag, like so
<div class=”separator” >
Bummer,..

the only solution for this is to place some kind of content inside your empty tag
like a white space,.. But be careful to put &nbsp; inside your XSLT it will result in error. Use &#160 ; in stead (c:

happy coding

EDIT:
Another solution for this was proposed by Richard Willis, thanx body
change your <xsl:output method=”xml“>  to <xsl:output method=”html“>
that will instruct the render to format your output like HTML, like we want to..

Converting twitter <created_at> date to Sitecore date format

I wanted to pull down some twits from my twitter account and show them with Sitecore CMS. When i looked at the http://api.twitter.com/1/statuses/user_timeline/maanehunden.xml
feed, i realized that i had to convert this Wed Jun 16 19:59:33 +0000 2010 wired date-format in to something mere Sitecoreish in order to save this value in a date field,..

this is what i did:

protected string DateFormat(string twitterDate)
{
   DateTime itemDate = DateTime.ParseExact(twitterDate, "ddd MMM dd HH:mm:ss zzz yyyy", CultureInfo.InvariantCulture);

   //this is an example of sitecore date format 20100621T194455
   return itemDate.ToString("yyyyMMddTHHmmss", CultureInfo.InvariantCulture);
}

Now I can use this method to format twitter date the way i wanted, end of story (c:

Searching for a new employeer

I am currently emploed at Cabana.dk but the time has come for me to explore and search for new challenges to further my development. My servises as a creative web developer are now available for hire.  Although this blog is in English, I am a danish developer resident in the city of Copenhagen, so let me know if you have a good proposition.

If you know someone who would be interested, please forward this URL: https://maanehunden.wordpress.com/2010/06/10/searching-for-a-new-employeer/

Workaround for chekcbox list validation

If you have tried to add a validator like a RequiredFieldValidator to a checkbox list asp control, you will de surprised to discover that that is not possible, and will result in error if you try. To counter this you can do two things extend checkbox list control ore make a custom validator. I chose the second solution, to keep the code to a minimum. Her’s a quick setup. I am taking advantage of OnServerValidate attribute of the CustomValidator control.

<asp:CustomValidator id="CustomCheckboxlistValidator1" runat="server"
OnServerValidate="CheckboxlistValidate"
ControlToValidate="MjauCheckboxlist "
ErrorMessage="One or more checkboxes must be chosen">
</asp:CustomValidator>

CheckboxlistValidate is the name of a javascript function that will hold the validation logic.

<script language="javascript">
function CheckboxlistValidate (oSrc, args) {
var checkboxList= document.getElementById("<%=MjauCheckboxlist.ClientID%>");
var InputElements = checkboxList.getElementsByTagName("input");
for (var i = 0; i < InputElements.length; i++) {
var input = InputElements[i];
if (input.checked) {
args.IsValid = true;
return null;
}
args.IsValid = false;
}
}
</script>

The JavaScript code is pretty simple. checkboxList variable holds the Html element with all checkboxes. From that you can derive all Imput elements and check them if they have been chosen. args.IsValid is used to set validation status. That’s it. One thing to remember thou the javascritp function must have to parameters,… oSrc – objectSource and arg – arguments. That’s about it (c:

Happy coding

mshtml – changing innerHtml of an element

This has turend out to be a wery pesky problem,.. i just wanted to add to javascript tags that i was reading from another web-page.. But as it tuns out you cant just do it,.. So if you do something like this ,.. it woud not work ,.. innerhtml will not be updated.

HTMLScriptElementClass script = (HTMLScriptElementClass)html.createElement("script"); 
script.innerHTML  = "/**/";

So i decided on another approach (c: If i could not access it, i would make my own,..

//get the html element 
HTMLScriptElementClass script = (HTMLScriptElementClass)html.createElement("script");
script.setAttribute("type", (object)"text/javascript", 0);
script.setAttribute("id", (object)id, 0);
((HTMLBodyClass)html.body).appendChild(script);
// make your own element which holds the changed element
object oScript = html.GetType().GetMethod("getElementById").Invoke(html, new object[] { (object)id });
oScript.GetType().GetProperty("text").SetValue(oScript, "/**/", null);

// remove the old element  to the DOM
html.removeChild((HTMLScriptElementClass)html.getElementById(id));

// insert your own element in to the DOM 
html.Document.Body.AppendChild (element);

well that’s how I did it ,.. and if you are wondering how to read DOM from other pages using .Net take a look at this ,.. (c:
http://cambridgecode.blogspot.com/2009/11/simple-html-parsing-code-using-mshtml.html
Cheers and out.