Jump to content
Graham Quince

FrogCode widget - Data to Form

Recommended Posts

data_to_form.png

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.

  • Like 1
Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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>

 

Link to comment
Share on other sites

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

  • Haha 1
Link to comment
Share on other sites

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

2022-07-07 11_54_00-Frog OS.png

Link to comment
Share on other sites

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>');
                }

 

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.

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