FrogCode widget - Data to Form

[Graham Quince]

I've been working on this widget for some time and I think it solves a big issue for everyone.  If your experience working in school was anything like mine, at some point, you will have wanted to display personal data back to the logged in user that did not originate from the MIS.

Things like:

• Login credentials for 3rd Party systems
• Account balances for cashless catering
• Appointment times
• Times of music lessons
• Short term grades
• Personal revision links
• Tutor details
• Reward points
• After School clubs
• Exam timetables (?)

I've come up with widget which allows you to add a spreadsheet into a Form.  You do have to set the form up first (although the widget contains instructions on what you need to do).  Once the information is in, you can use Access Control to set privacy settings.

 

 

You can download the widget from this link:
https://schools.frogeducation.com/community/frogcode/frogcode-showcase/data2form

 

For those of you looking for a way to replicate Frog3 custom fields, this widget should help you achieve that.

[Graham Quince]

While the widget will display the information for you, you can use this code to retrieve it for yourself:

<div class="my_data"></div>
<script>
var myDataDiv = arguments[0].find('.my_data');
var user = FrogOS.getUser();
var formUUID = 'FORM_UUID';


    Frog.Model.api('dataviewer.gettable', {
        content_uuid: formUUID,
        current_user_only: 'false',
        form_uuid: formUUID,
        limit: 1,
        module: 'form',
        offset: '0',
        sort_dir: 'DESC',
        sort_field: 'date'
    }).done(function(response) {
        var personalData = response.data;
        $.each(personalData, function(index, entry) {
            var data = entry.fields[1].responses[0].response;
            data = JSON.parse(data);
            $.each(data, function(index, datum) {
                if (datum) {
                    myDataDiv.append(
                        index+
                        ' : '+
                        datum
                    )
                }
            }) // end of data $.each
        }); // end of personalData $.each
    }); // end of API response

</script>

 

[Graham Quince]

Here's alternative code, which displays the data in a table instead of bullet points, with the column headers added automatically:

 

<div class="my_data">

    <table class="table table-bordered hwData">
        <tr class="hwheading"></tr>
    </table>
    
    
</div>
<script>
var myDataDiv = arguments[0].find('.my_data');
var user = FrogOS ? FrogOS.getUser() : self.getUser();
var formUUID = 'C0B0354A2003E79464730F754D2A1504F1A45CECD3C9B419';


    Frog.Model.api('dataviewer.gettable', {
        content_uuid: formUUID,
        current_user_only: 'false',
        form_uuid: formUUID,
        limit: 1,
        module: 'form',
        offset: '0',
        sort_dir: 'DESC',
        sort_field: 'date'
    }).done(function(response) {
        var personalData = response.data;
        $.each(personalData, function(index, entry) {
            var data = entry.fields[1].responses[0].response;
            //console.log(data);
            myDataDiv.find('.hwData').append('<tr class="row'+index+'"></tr>');
            data = JSON.parse(data);
            $.each(data, function(index1, datum) {
                if (index == 0) {
                    myDataDiv.find('.hwheading').append('<th class="'+index1+'">'+index1+'</th>');
                }
                if (datum) {
                    myDataDiv.find('.row'+index).append('<td class="pastel_'+index1+'">'+datum+'</td>');
                }
            }) // end of data $.each
        }); // end of personalData $.each
    }); // end of API response

</script>

 

[Graham Quince]

Here's a much neater, combined version both for students (and for staff to use with the user picker widget):

<style>
    .my_data {
        border-radius: 6px;
        border: 1px solid #cccccc;
        padding: 10px;
        text-align: left;
        font-size: 19px;
        line-height: 25px;
    }

</style>

<div class="my_data"></div>

<script>
var myDataDiv = arguments[0].find('.my_data');
var FORM_UUID = 'FORM_UUID';
var USER_FIELD_UUID = 'USER_FIELD_UUID'; // Field value for the User ID, you may need to check the Developer console to confirm this UUID
var user = FrogOS.getUser();
    
function getEntries(userUUID) {
    myDataDiv.empty();
    
    var apiData = {
        content_uuid: FORM_UUID,
        current_user_only: false,
        form_uuid: FORM_UUID,
        limit: '5',
        module: 'form',
        offset: '0',
        sort_dir: 'DESC',
        sort_field: 'date'
    };
    
    if (user.profile.name == 'Staff' || user.profile.name == 'Admin') {
        apiData.filters = [{
            field_name: USER_FIELD_UUID, 
            value: userUUID
        }];
    }
  
    Frog.Model.api(
        'dataviewer.gettable', 
        apiData
    ).done(function(response) {
        var personalData = response.data;
        $.each(personalData, function(index, entry) {
            var data = entry.fields[1].responses[0].response;
            data = JSON.parse(data);
            
            $.each(data, function(index, datum) {
                if (datum) {
                    //  if (index == "Score" || index == "Grade") { // should you wish to only return some fields
                    myDataDiv.append(
                        index+
                        ': '+
                        datum+
                        '<BR>'                       
                    )                   // }
                }
            }) // end of data $.each
        }); // end of personalData $.each
    }).fail(function(e) {
        // Report Error
        console.log("failed to load data");
    });
    
};
    
getEntries(user.uuid);
    
$('div[data-content-uuid="75BD91D02002887198A0CF29FBAE2E0C598CBA9CDECD6026"]').on('broadcast.selectedUser',function(el, ev) { 
    var user_uuid = ev.model.uuid;
    getEntries(user_uuid);
});

    
    
</script>

 

[ADT]

4 minutes ago, Graham Quince said:

Here's a much neater, combined version both for students (and for staff to use with the user picker widget):

<style>
    .my_data {
        border-radius: 6px;
        border: 1px solid #cccccc;
        padding: 10px;
        text-align: left;
        font-size: 19px;
        line-height: 25px;
    }

</style>

<div class="my_data"></div>

<script>
var myDataDiv = arguments[0].find('.my_data');
var FORM_UUID = 'FORM_UUID';
var USER_FIELD_UUID = 'USER_FIELD_UUID'; // Field value for the User ID, you may need to check the Developer console to confirm this UUID
var user = FrogOS.getUser();
    
function getEntries(userUUID) {
    myDataDiv.empty();
    
    var apiData = {
        content_uuid: FORM_UUID,
        current_user_only: false,
        form_uuid: FORM_UUID,
        limit: '5',
        module: 'form',
        offset: '0',
        sort_dir: 'DESC',
        sort_field: 'date'
    };
    
    if (user.profile.name == 'Staff' || user.profile.name == 'Admin') {
        apiData.filters = [{
            field_name: USER_FIELD_UUID, 
            value: userUUID
        }];
    }
  
    Frog.Model.api(
        'dataviewer.gettable', 
        apiData
    ).done(function(response) {
        var personalData = response.data;
        $.each(personalData, function(index, entry) {
            var data = entry.fields[1].responses[0].response;
            data = JSON.parse(data);
            
            $.each(data, function(index, datum) {
                if (datum) {
                    //  if (index == "Score" || index == "Grade") { // should you wish to only return some fields
                    myDataDiv.append(
                        index+
                        ': '+
                        datum+
                        '<BR>'                       
                    )                   // }
                }
            }) // end of data $.each
        }); // end of personalData $.each
    }).fail(function(e) {
        // Report Error
        console.log("failed to load data");
    });
    
};
    
getEntries(user.uuid);
    
$('div[data-content-uuid="75BD91D02002887198A0CF29FBAE2E0C598CBA9CDECD6026"]').on('broadcast.selectedUser',function(el, ev) { 
    var user_uuid = ev.model.uuid;
    getEntries(user_uuid);
});

    
    
</script>

 

Bit slow at Frog Towers at the moment @Graham Quince..... ?

[C Wilson]

We'd like to use the Data-to-Form widget for a potential "hybrid" Results Day.

The only snag is I'd like to hide subject headings if their is no data in the cells eg Alan Aardvark does English, Maths, Science, Computing but Andrew Aardvark does just English, Maths, Science but Andrew would see the Computing column as it's included in the spreadsheet. As you can imagine we'd end up with quite a few empty subject columns for the majority of students.

I've tried adding some CSS to the code but can't quite achieve what I want... can anyone suggest a way to do this?

Example attached with what I want removing.

Ps. do Frog Tags still exist?? 🤔

@Graham Quince

[Graham Quince]

I think CSS is probably the way to go.  If you add the subject headings to the table cells as a class, you should be able to hide them, something like:

$.each(data, function(index1, datum) {
    var subjectClass= index1.replace(' ','');
    if (index == 0) {
        myDataDiv.find('.hwheading').append('<th class="'+subjectClass+'">'+index1+'</th>');
    }
    if (datum) { 
        myDataDiv.find('.row'+index).append('<td class="pastel_'+index1+' '+subjectClass+'">'+datum+'</td>');
    }

Alternatively, you should be able to add an option into the If statement to determine if it should draw the heading and cell:

                if (index == 0 && datum) {
                    myDataDiv.find('.hwheading').append('<th class="'+index1+'">'+index1+'</th>');
                }
                if (datum) {
                    myDataDiv.find('.row'+index).append('<td class="pastel_'+index1+'">'+datum+'</td>');
                }

 

[Graham Quince]

@C Wilson - yeah unfortunately no Frog Tags, but that's partly why I created the Data-to-Form widget, so we could get that functionality from Frog3 back.