• 04 May 2012

    A Review of Sitefinity's Module Builder - Part 2

    In my last blog post, I looked at how easy it was to create a slideshow module using Sitefinity’s Module Builder. Overall, the experience was a huge improvement on having to create the entire module through code. With the whole process being quicker and easier, the workflow for site development was hugely decreased.

    So that’s it then? Well... no, unfortunately after some further experimenting and pushing the customisation of the Module Builder, I discovered that you could only go so far.

    Moving on from the slideshow module, my next task was to create a protected downloads module which used jQuery to create a hover effect. When the front image was hovered, another area would appear containing a title, summary and “download” button which, when clicked, would present the user with a popup requesting their email address before enabling the file download to begin. This email address would then be validated and stored.

    Using Sitefinity’s Module Builder, I was able to quickly configure the module and add the fields required. On this occasion I added an additional “document” field by selecting the “Media” section. This would be the downloadable document available to the user. Again, the creation of the module was quick and only required a small amount of tweaking to customise the layout and ensure that the jQuery ran as expected.

    Protected Downloads Example

    Everything was set in place. I had a fully functional download box which presented the user with a download button when the main image was hovered over. On clicking the button, this would then display the document (in this instance a PDF). Happy with the progress, I then started to look at the “protected” element of the file download, requesting the user's email address before they were able to download the document.

    After staring blankly at the “AssetField” Sitefinity had created within the template, I looked at ways to create a server side “onClick” event which would trigger a popup causing the download to wait. Already faced with a situation where I would have to begin coding I tried a variety of different methods, but to no avail. It soon became apparent that what I was seeking to implement would not be possible without getting my hands dirty. However, an additional obstacle loomed.

    Without having full access to the code behind files, it appeared to be impossible to create my protected downloads without having to revert back to developing within Visual Studio. In fact the only way to create what I required was to either resort back to previous methods of creating the entire module from scratch, or to create a folder named “SfCtrlPresentation” which contained the .ascx and code behind file. I would then need to paste the template code created by the Module Builder and use the module GUID to reference my new template rather than editing the “LayoutTemplatePath”, which doesn’t exist if you have used the Module Builder. This appeared to be more of a messy work around which defies the whole purpose of using the Module Builder.

    Please don’t get me wrong, I still believe that the Module Builder is highly valuable for creating modules to handle items such as slideshows etc. However, I feel this could be hugely enhanced by either providing access to the code behind files, should it be required, saving creation of a new user control within Visual Studio, or by enabling a developer to enter a “LayoutTemplatePath” without having to worry about creating a “SfCtrlPresentation” folder using the horrible GUID. This additional control would certainly allow the Module Builder to become seriously powerful allowing for full custom functionality with a more fluid workflow and less programming.

    Love or Hate

    All in all, on one hand I found using the Module Builder to be a pleasant and more simplistic experience, yet on the other hand it is still too restrictive in cases where you would like to take customisation further.

    Read More

  • 03 May 2012

    A Review of Sitefinity's Module Builder - Part 1

    So... Sitefinity’s Module Builder: “the state-of-the-art module builder which allows you to build your own content types without programming”. A big promise, but does it work?

    Casting our minds back a little, back to when Sitefinity 4.4 was released, I take a look at the Sitefinity Module Builder to see how effective it is at reducing the amount of programming required for simple modules.

    When Sitefinity 4.4 was announced, it boasted a range of new features and improvements to the globally used CMS platform. With a huge emphasis on making it easier and more simplistic to develop websites and applications, most excitement revolved around the news on Sitefinity’s new Module Builder.

    The Sitefinity Module Builder claimed that you would be able to build complete custom modules without having to get your hands dirty with programming. Avoiding the standard method of creating custom modules, the Module Builder indicated that it could drastically improve the workflow of site development.

    Sitefinity CMS

    Generally, as a Web Designer/Front End Developer (with minimal development knowledge), I would create my custom modules directly in Visual Studio. This would usually be a problematic process trying to overcome build errors and paying regular visits to Google with the hope of discovering a new method to achieve a fully functional module. Set in my ways, despite the Module Builder being released, I plodded along with my Visual Studio-based custom modules. This was until I attended the Sitefinity and Beyond conference at the British Museum in London on 17th April. Up on stage Hristo Borisov (Sitefinity Business Analyst) was going through the processes of creating a new custom module using Sitefinity’s Module Builder. Shortly after he had started, he was able to show us a fully functional product listing with use of jQuery for effect. It looked so easy that I was eager to try it for myself.

    Sure enough, back in the office I set to work on a dummy site with the intention of putting the Module Builder to good use. I revisited some of the things I had developed before on previous sites where it had appeared that HTML was the only solution (not very client friendly). I started with a full page, automatic, clickable slideshow. After naming it (appropriately named “Mega Slideshow”), I began adding my fields. With “Title” already existing, I continued to build brick by brick: “MainContent”, “SubHeader” and “SlideImage”. Now, with my fields complete, my module was ready to be populated. The fields made it a breeze to fill out and in almost no time at all I had created a range of slides to display within my slideshow.

    Slideshow Example

    I proceeded to my page where I was able to simply drag the control onto the page and immediately see my content appear, although the functionality still needed to be applied. By clicking the “Edit” button on the control, I was then able to navigate through and select the default module template. By copying the existing template code, I was able to create a new template within Sitefinity and then paste the code, with the correct fields, into the nicely laid out internal code editor (although IntelliSense would be nice*). To assist with customising the template, Sitefinity also provides an “Other data” drop down where code is automatically generated for pasting by simply clicking on a data name.

    Sitefinity's Template Editor

    It’s fair to say that I had to tweak the code a little purely for design purposes and had to add an extra asp hyperlink, but aside from this, the end result was a complete, fully functional slideshow complete with image, title, content and a “Learn More” link. With a drastically reduced development time it’s clear to see just how powerful the Sitefinity Module Builder can be at improving site development workflow.

    In part 2, I will be looking at how far the customisation for the Module Builder can be pushed and what areas could be improved by Sitefinity to fully complete the Module Builder.

    *Telerik's Ivan Osmak got in touch to remind us that IntelliSense is supported in Thunder, the Visual Studio plugin. Thanks!

    Read More

  • 12 Dec 2011

    Adding a Custom 404 Page with Sitefinity

    It's always annoying when you mis-type a URL, or click on a long-dead link to be confronted with a horrible error message:

    .Net 404 error page

    It looks unprofessional (especially if you are a web development company), scary and leaves the visitor with nowhere to go. Much better would be your own customised 404 page, gently directing the site visitor to a more appropriate place. To get this working in a Sitefinity site you need to do three things:

    1. Create a 404 page in Sitefinity. You can just make a plain, unadorned page but this "not found" area is a great place to funnel customers back to where they need to go (or where you'd like them to go!). There's lots of articles around on how to make use of your 404 page, such as this 404 guide from GetElastic.

    If you have no other ideas, just add contact links, top-level navigation links or links to social media. Call the page whatever you like but for the purposes of this guide I'll pretend you called it "404.aspx".

    2. Change the web.config. Add the following line to the web.config file in the custom errors section:

    <error redirect="/404.aspx" statuscode="404"></error> 

    This will capture some of the errors. Try visiting yoursite.com/SomeNonexistentPage.aspx and you'll be presented with your custom 404 page. Great!

    No time to party yet though - if you knock the ".aspx" off the end of your address, you'll get yet another horrid message:

    IIS 404 error page

    What's happened here is we've stopped the first kind of error message which is generated by .Net. It's now bounced down the line to IIS which has also thrown it's own error-handling page. To get round this one...

    3. Redirect 404 errors to your Sitefinity page. Open your site in IIS and look for the following icon:

    IIS .Net Error Pages Icon

    You should be presented with the following dialogue box:

    IIS Add Custom Errors

    In the Status Code type "404" and in Absolute URL the full link to your error page e.g. "http://www.yoursite.com/404.aspx".

    OK this screen and try it again. You should be getting your custom 404 page in all situations now! Very handy.

    Read More

  • 17 Oct 2011

    5 Top Tips For Web Designers

    kitten-lightspeed

    Light Speed IT's latest addition to the web design team, Alex, shares with you his five top tips to consider when designing a web site for a client. With over 2 years experience, Alex boasts a wealth of expertise within the creative sector.

    Alex: My five top tips are as follows;

    1. Know Your Audience. there's no point writing about fluffy kittens and puppies if the user is looking to buy a pair of trainers.
    2. Research. Once you know what you want your website to do, it's a good idea to look at other similar sites to see what areas they have focused on and how.
    3. Design a user friendly website that is easy to navigate. It ‘s great having a pretty website, but not much good if people can't use it!
    4. Test you website across other browsers, this allows you to know that your website will display the same whether it is being viewed on Chrome, Firefox, Internet Explorer or Opera.
    5. Try not to over load your web pages with too many pictures etc. This can cause slower load times...which is infuriating for users, not to mention that it loses companies millions in revenue.

    Ok, so there's a lot more to web design than this, but if you consider these five tips each time you start a new design project, you'll be on the right track. Take a look at some of the design work that we have done for our clients, or click here to get a quote.

    Read More

Get a feed of Alex Hewitt-Clay's blog posts