Weather widget | Community Development | Sandbox ConnAct

The following is an example of creating a custom widget in  Page Builder using the Raw HTML widget, HTML, and Javascript. It demonstrates the power of Page Builder and how it opens you up to unlimited possibilities in pulling in data and information from anywhere and displaying it however you want.

This is a local weather widget that uses the current logged in users zip code from their profile. It gives you an example of using HTML, Javascript, and the Communifire REST API to build a custom widget.

Here is what the widget looks like when rendered on the page:

How to Create

1. In Page Builder, drag and drop a Raw HTML widget onto the layout designer

2. Click on the widget to open its properties

3. In the Raw HTML text area, paste the following code (below)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.simpleWeather/3.1.0/jquery.simpleWeather.min.js" type="text/javascript"></script>

<script type="text/javascript">

    if ("geolocation" in navigator) {
        $('#weather').show();
    } else {
        //$('#weather').hide();
        alert("not working");
    }

    // current date
    var d = new Date();
    var month = d.getMonth() + 1;
    var day = d.getDate();
    var dateOutputString = (('' + month).length < 2 ? '0' : '') + month + '/' + (('' + day).length < 2 ? '0' : '') + day + '/' + d.getFullYear();

    // day of week
    var days = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
    var dow = new Date().getDay();
    var dayOfWeek = days[dow];
    var currentTimeString;

    function getTime() {

        // current time
        var currentTime = new Date();
        var currentHours = currentTime.getHours();
        var currentMinutes = currentTime.getMinutes();

        // Pad the minutes and seconds with leading zeros, if required
        currentMinutes = (currentMinutes < 10 ? "0" : "") + currentMinutes;

        // Choose either "AM" or "PM" as appropriate
        var timeOfDay = (currentHours < 12) ? "AM" : "PM";

        // Convert the hours component to 12-hour format if needed
        currentHours = (currentHours > 12) ? currentHours - 12 : currentHours;

        // Convert an hours component of "0" to "12"
        currentHours = (currentHours == 0) ? 12 : currentHours;

        // Compose the string for display
        currentTimeString = currentHours + ":" + currentMinutes + " " + timeOfDay;
        $('.ax-weather-time').html(currentTimeString);

    }

    $(document).ready(function () {

        getTime();
        setInterval(getTime, 1000);
        
        // Communifire REST API Call
        $.ajax({
            type: 'GET',
            url: '/api/users/' + CF_USERID + '/address/default',
            data: {},
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (response) {
                //alert(response.ResponseData.PostalCode);
                loadWeather(response.ResponseData.PostalCode);
            }
        });
    });

    function loadWeather(location, woeid) {
        $.simpleWeather({
            //zipcode: location,
            location: location,
            woeid: woeid,
            unit: 'c',
            success: function (weather) {
                html = '<div class="ax-widget-weather-time">';
                html += '<div class="ax-weather-location">' + weather.city + ', ' + weather.region + '</div>';
                html += '<div class="ax-weather-date">' + dateOutputString + '&nbsp;&nbsp;' + dayOfWeek + '</div>';
                html += '<div class="ax-weather-time">' + currentTimeString + '</div>';
                html += '<div class="ax-weather-currently">';
                html += '<div class="degrees">' + weather.temp + '&deg; ' + weather.units.temp + '</div>';
                html += '<div class="des">' + weather.currently + '</div>';
                html += '<div class="highlow">' + weather.high + '&deg;&nbsp;/&nbsp;' + weather.low + '&deg;</div>';
                html += '</div>';
                html += '<img class="ax-current-weather-img" src="' + weather.image + '" />';
                html += '</div>';

                $("#weather").html(html);
            },
            error: function (error) {
                $("#weather").html('<p>' + error + '</p>');
            }
        });
    }

</script>

<div class="axero-widget ">
    <div class="axero-widget-header">
        <h3>Local Time and Weather</h3>
    </div>
    <div class="axero-widget-content axero-widget-content-padded">
        <div id="weather"></div>
    </div>
</div>

4. Save the widget

5. Save the page

6. View your page