Jump to content

How can I display custom, personal data to my students?

Recommended Posts

We have ( meetings planned for each student / their option choices / personal tutorial links / something else not driven by our MIS ) and wish to use Frog to display this data just for the student and their parents.  

Is this possible to do in FrogLearn?

Link to comment
Share on other sites

Lots of you have been asking for a way to get custom, personalised data to display inside Frog.  While we're looking at different development solutions, this is an approach I have been using successfully with a few schools.


Thanks to the FrogCode widget, you can now upload data into a form in Frog.  This is probably a simpler solution (and more importantly can provide data security) than the one outlined below.



NOTE about this solution
All the data is loaded into the browser.  While not easily found, it is there for someone who knows what they are doing.  It cannot be stressed enough that if you have any concerns about the contents of this data you should not use this method below.  
SIMS schools with FrogParent can use the Linked Documents tool to publish reports which are only available to the individuals involved.



Step 1 - Wrangling your data
Frog's API can be used to identify the logged in user.  We need to provide our data in a format which places one of the common identifiers first.  

Common identifiers:

  • UUID (Frog's own ID)
  • UPN
  • Roll Number (MIS ID)
  • Username

The first thing you have to ensure is that your data contains one of these fields.  The rest of this guide is going to focus on Roll Number as this is element to requires an extra step to extract.  

Open your spreadsheet program of choice, MS Excel for instance.  

In this example, we have a parents evening list.  Each child as a separate time slot and note the roll no. column.

data - example.PNG

Next we're going to use Excel's formula to reformat our data.  In a new sheet, copy the formula into the top-left cell:

="'"&Sheet1!D2&"':{'time':'"&TEXT(Sheet1!A2,"HH:mm AM/PM")&"','date':'"&TEXT(Sheet1!B2,"mm/dd/yyyy")&"','room':'"&Sheet1!C2&"','regclass':'"&Sheet1!G2&"','surname':'"&Sheet1!E2&"','firstname':'"&Sheet1!F2&"'},"

This formula might look intimidating, but it's actually quite simple:

= - opens the formula function

"'" - double quotes " are used in Excel to accept plain text.  We then use a single quote ' inside there

& - is Excel's addition.  So we have ' and then we add the contents of Sheet1!D2 to it

"':{'time':'" - this closes off our first single ' and then gets ready the first value, in this case time,

TEXT(Sheet1!A2,"HH:mm AM/PM") - points us to Sheet1!A2, where the time value is, but to ensure Excel does not give us just a number, we force it to stay in a time format.

And the rest of the row is built up in the same way.

Once completed, our row looks like:

'123456':{'time':'06:00 PM','date':'16th June','room':'Main Hall','regclass':'1st','surname':'Hartnell','firstname':'William'},

Where 123456 is William's roll number.

Drag this cell down, to replicate the contents for each row.

data - 2.PNG


Step 2 - Displaying your data
Create your site and add an HTML widget.

Paste in this code:

<div class="Greeting widget_text" style="font-size:16px;"> </div>
<div class="Time widget_text" style="font-size:16px;">Time: </div>
<div class="Date widget_text" style="font-size:16px;">Date: </div>
<div class="Room widget_text" style="font-size:16px;">Room: </div>


var myData = {
 /////// PASTE FROM HERE /////

'123456':{'time':'06:00 PM','date':'16th June','room':'Main Hall','regclass':'1st','surname':'Hartnell','firstname':'William'},

 /////// PASTE TO HERE - DELETE THE LAST COMMA!!!!!!! /////

var user = FrogOS ? FrogOS.getUser() : this.getUser();
if (user.profile.type == "admin") {
    user.uuid = "D123443432435435454354354"; // Student UUID
if (user.profile.type == "parent") {
    Frog.Model.api('users.getChildren').done(function(parentResponse) {
        var children = parentResponse.data;
        $.each(children, function(index,child) {
} else {

function getAppointment(childUUID,childName,view) {
    var self = this;
    Frog.Model.api('users.getDataInCategory', {
        user_uuid: childUUID,
        uuid: '789F77FF2004CA84FA300F17417DDB0890FECF0CD03FC350' // Users category UUID
    }).done(function(listResponse) {
        var roll_number = listResponse.data.fields[0].value;

        if (view == 'parent') {
            $('.Greeting').append(myData[roll_number].firstname+"'s appointment is at:");
        } else {
            $('.Greeting').append("Your appointment detaiils:");


Add the rows from Excel in the ///////////////// space

Make sure to delete the last comma on the last row


What this code is doing:

var user = FrogOS ? FrogOS.getUser() : this.getUser();   - gets the currently logged in user


if (user.profile.type == "admin") { - if the user is an Admin, use a student's Frog ID to test the system


if (user.profile.type == "parent") { - if the user is a Parent, use Frog's getChildren API to identify and list their children.


getAppointment(user.uuid,user.displayname,'child'); - runs a function, passing it the user's UUID, their displayname and if they are a child or parent.  For parents this will run for each child.

Frog.Model.api('users.getDataInCategory', {  - Frog's API to get the information displayed in the Users' App, under the Additional Information category

uuid: '789F77FF2004CA84FA300F17417DDB0890FECF0CD03FC350' // Users category UUID - this is different in each school.  To get this UUID, do the follow:

  1. Open the browser's developer console and switch to the network tab.
  2. Open the Users App
  3. Search for a student and click on their name
  4. Use this logo to clear the information in the Network Tab
  5. In Users, Click on Additional Information
  6. A line of text, beginning with ?method=users.getDataInCategory appears in the network area.  This is the API call.  
  7. Click on Preview and expand the params section
    API category.PNG

  8. Copy this UUID and paste replace the Users Category UUID with it.

var roll_number = listResponse.data.fields[0].value; - this line retrieves the student's roll number, which we can now use to identify the row of data in the object we created earlier.

$('.Time').append(myData[roll_number].time); - The first element identifies the DIV we created at the very top of the code.  We then append the corresponding information into that DIV based on the roll number.

Student UPNs are available in FrogOS ? FrogOS.getUser() : this.getUser(); as user.pupil_number (also username as user.username), so you can use a cut down version of the getAppointment function:

function getAppointment(childUPN,childName,view) {

        if (view == 'parent') {
            $('.Greeting').append(myData[childUPN].firstname+"'s appointment is at:");
        } else {
            $('.Greeting').append("Your appointment detaiils:");



It's worth checking your code with a tool likehttps://esprima.org/demo/validate.html
This is check for errors and breaks.  

O'Brien and similar names will need to have their ' replaced.

Make sure you delete the last comma from your Excel code.

Use with caution regarding personal data.  I'm not going to demonstrate in this tutorial where exactly you can find the data, but it is there. 

  • Like 1
Link to comment
Share on other sites

19 minutes ago, ADT said:

With Quincey help we have use this to display a letter to Students/Parents letting them know about a personal 1 to 1 meeting with a member of staff in school!!!  Thanks again!

You weren't the only ones, this week alone I've had requests from 3 other schools.

Plus, once I got you started you did most of it yourself, which gave me the idea to share it as a tutorial.

  • Thanks 1
Link to comment
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.

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...