K.Ermit Posted June 10, 2020 Posted June 10, 2020 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?
Graham Quince Posted June 10, 2020 Posted June 10, 2020 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. NOTE: 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. https://schools.frogeducation.com/community/frogcode/frogcode-showcase/data2form 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. 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. 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> <script> 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) { getAppointment(child.uuid,child.displayname,'parent'); }) }); } else { getAppointment(user.uuid,user.displayname,'child'); } 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:"); } $('.Time').append(myData[roll_number].time); $('.Date').append(myData[roll_number].data); $('.Room').append(myData[roll_number].room); }); } </script> 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: Open the browser's developer console and switch to the network tab. Open the Users App Search for a student and click on their name Use this logo to clear the information in the Network Tab In Users, Click on Additional Information A line of text, beginning with ?method=users.getDataInCategory appears in the network area. This is the API call. Click on Preview and expand the params section 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. ANOTHER NOTE 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:"); } $('.Time').append(myData[childUPN].time); $('.Date').append(myData[childUPN].data); $('.Room').append(myData[childUPN].room); } AND YET ANOTHER 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. FINAL REMINDER 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. 1
ADT Posted June 10, 2020 Posted June 10, 2020 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! 1
Graham Quince Posted June 10, 2020 Posted June 10, 2020 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. 1
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now