Jump to content
clangstaff

Using the HTML Widget to redesign dashboards

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 post
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 post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


×
×
  • Create New...