A Widget Builder for Sitefinity (Preview)

By February 27, 2013Uncategorized

In a previous post, I showed how to create JavaScript widgets in Sitefinity using shared content blocks. This enabled you to create widgets like image carousels and blog rotators on-the-fly without having to compile or deploy. It was so useful in production and we received a lot of good feedback from the community. This is why we felt it deserved to evolve more and began creating a full-fledged Widget Builder for Sitefinity!

The idea is simple… when writing a web-based widget or control for a website, you need a mixture of HTML, CSS, and JavaScript. A portion sometimes goes in the page head, another in the body, and maybe some in the footer. You can think of jsFiddle if you’ve used it before: put the HTML in the HTML area, the CSS in the CSS area, and the JavaScript in the JavaScript area, then run it. It only made sense to do something like this for Sitefinity. Here is a sneak peek:

We were able to achieve this by leveraging the Module Builder in Sitefinity and create a new module that represent our “widgets”. Each widget has some HTML, CSS, and JavaScript as its fields as you see above. Then we have a control in the page toolbox that allows you to select the widget you just created:

On the frontend, the control renders the widget onto the page with all the its fields injected in the correct designated areas on the page: head, body, and footer.

Check out the HTML source code to see it match up to the widget fields and their rendered location on the page:

<!DOCTYPE HTML>
<html>
<head>
    ...
    <meta type="something" />
    <link rel="stylesheet" type="text/css" href="http://someone.test.css" />
    <link rel="stylesheet" type="text/css" href="/FalafelSitefinity/test2.css" />
    <script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script>
    <style type="text/css">
        .custom-section {
            background: yellow;
        }
    </style>
    ...
</head>
<body>
    ...
    <!-- "HTML" FIELD IN THE BODY -->
    <div class="carousel-inner">
        <div class="loading-page"></div>
    </div>
    <a class="carousel-control left" href="#myCarousel" data-slide="prev">‹</a>
    <a class="carousel-control right" href="#myCarousel" data-slide="next">›</a>
    </div>
 
    ...
    <!-- "TEMPLATE" FIELD IN THE BODY -->
    <script id="home_slider_template" type="text/x-kendo-template">
        #
        for (var i = 0; i < data.length; i++) {# < div class = "item" > #
            if (data[i].Link) {# < a href = "#= data[i].Link #" > #
            }# < img src = "#= data[i].Url #"
            class = "bigImage"
            alt = "#= data[i].AlternativeText #" / > #
            if (data[i].Link) {# < /a>
          #}#
          #if (data[i].Description) { #
            <div class="carousel-caption">
               <h4>#= data[i].AlternativeText #</h4 > < p > # = data[i].Description# < /p>
            </div > #
            }# < /div>
        # } #
    </script>
 
    ...
    <!-- IN THE FOOTER -->
    <script src="//ajax.googleapis.com/ajax/libs/ext-core/3.1.0/ext-core.js" type="text/javascript"></script>
     
    <div id="widget-footer">
        This is a test.
    </div>
     
    <!-- "SCRIPT" FIELD IN THE FOOTER -->
    <script type="text/javascript">
        //<![CDATA[
        require([
            'jquery',
            'kendoweb',
            'api',
            'bootstrap'], function ($, kendo, Api) {
            Api.getImagesByAlbum('home-slider')
                .done(function (data) {
                var template = kendo.template($('#home_slider_template').html());
                $('#myCarousel .carousel-inner')
                    .html(template(data))
                    .parent()
                    .carousel({
                    interval: 6000
                })
                    .find('.item:first-child')
                    .addClass('active');
            });
        });
        //]]>
    </script>
</body>
</html>

Tada! It’s Sitefinity and JavaScript in perfect matrimony. It works great in the page designer too! This was just to give you a glimpse of what’s to come and hopefully simplify the way we make powerful, rich client-side widgets with Sitefinity. Widget Builder is still in beta, but please contact us if you would like to test it out.

Stay tuned for the release of Widget Builder for Sitefinity!!…

***UPDATE*** The widget builder has been released as Falafel Tornado! Check it out here:
http://www.falafel.com/store/sitefinity-add-ons/falafel-tornado-for-sitefinity

The following two tabs change content below.