How to push a button from serverside using ScriptManager and UpdatePanel control.

I was playing around with an idea that it could be fun to press client-side logoff button from the server-side. Like if you dont push the logoff button i will push it for you,.. noition..(c: To achive that i devised a way to “inject” javascript in to an UpdatePanel using ScriptManager.. so cool,.. it is kind of nougty i guess..
her’s how it’s done:
aspx

<asp:ScriptManager ID="scmAJAX" EnablePartialRendering="true" runat="server"/>
<asp:UpdatePanel ID="upnl_Mask" runat="server" UpdateMode="Conditional" >
<ContentTemplate>
<asp:label ID="lbl_Mask" runat="server"></asp:label>
</ContentTemplate>
</asp:UpdatePanel>

aspx.cs

string jscript = @"$(window).ready(function (){ $("".btnLogoff INPUT"")[0].click();});";
ScriptManager.RegisterClientScriptBlock(lbl_Mask, lbl_Mask.GetType(), "youLoggedOffDoode", @"javascript:" + jscript, true);

lbl_Mask.StatusText = "You are termibated"; // sara Coner sead that
upnl_Mask.Update();

i am using JQuery in my javascript,. but i bet you could do something like this “document.getElementById(‘logoff_btn’).click()” to click the button,.. but then you have to get your asp:button ClienID,.. like this “document.getElementById(‘” + logoff_btn.ClientID + “‘).click()” .. the DOM ready event is a Whole other story..

Advertisements

Releace of my own Umbraco based webpage.

For little bit more then the past month time I’ve been working on designing and developing my own webpage. For this task I’ve chosen Umbraco CMS engine, beacouse of it’s similarities with Sitecore, but allso because it is free to use. I’ve was pleasantly surprised on the helpfulness of the Umbraco community, and i like to contribute my knowledge to further Umbraco development by posting articles about it on my blog.

To differ my self from all the other mass-produced templated webpages outhere, I’ve designed and implemented my own look and feed for my webpage.
my webpage design
The main idea behind this webpage is to make a content driven webpage not a blog. I’ve written an article about how this webpage came to being and i am going to write further articles in the future on how i did it. More about the nuts and bolts of it all. (c: So sign up for an RSS feed, so you can keep up.

here are some highlights of the implementation.

  • youtube integration
  • Custom developed tag based article system
  • Lucene index search results
  • Tag and Related articles lists.
  • Umbraco based contact form(creates nodes in umbraco, so i can see a feed of all new items when logged in)

If you have any comment’s pleas tell me i wood like to hear your opinion.

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:

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,..

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:

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.