Using the HTML Widget to redesign dashboards

[clangstaff]

With an increased usage of Frog over the past couple of years we decided to revisit the design and structure of our school dashboards. Due to the amount of content we feature on our dashboards, the time it can take to get Frog looking how we want and some of the limitations within the existing Frog widgets we decided to code our pages using the HTML widget.

We really wanted to achieve a mobile compatible layout with easy to click buttons. One bugbear of ours was using the Text Widget we could only link text and images within the widget rather than applying a link to the whole box.

This is a work in progress but we're already much happier with the design achieved.

[Graham Quince]

Looks great Chris.  That's such a warm red you've got on the hover state.  

[clangstaff]

@Graham Quince I keep forgetting to ask - is there a way to link to FrogDrive using HTML?

FrogDrive isn't an option when using the App link option in the text editor widget.

[Graham Quince]

Hi @clangstaff

I've no idea why FrogDrive doesn't appear in that list.  How strange? 

In the meantime, this code will add a DIV which you can style, then on clicking will open FrogDrive:

<div class="FrogDriveButton">FrogDrive</div>

<script>
$(".FrogDriveButton").click(function(){
    $('.FrogDriveButton').trigger('os.internal.launchapp', {
        data: {
            name: 'resources'
        }
    });
});


</script>