Jump to content

Using the HTML Widget to redesign dashboards


clangstaff

Recommended Posts

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.

Staff Hub.jpg

Student Hub.jpg

  • Like 2
Link to comment
Share on other sites

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>

 

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...