Jump to content

Widget to display a student's form


ann

Recommended Posts

Hi

I would like to create a widget that displays a student's form group. I understand this functionality was available in Frog 3

Before I start can anyone tell me if it is even possible. I haven't done much with HTML and CSS so I'd be on a bit of a learning curve (I used to programme in COBOL in the good old days !)

 

Ann

Link to comment
Share on other sites

Hi Ann, 

It should certainly be possible. You would need to do a request to our groups.getfor API: /api/2/?method=groups.getfor

You then pass an identity param (which is the uuid of the user you want the groups for) and a group_type param, which you set as 'registration'  That should get the group back. You can then get the name from that group and display somewhere. You can get the uuid of the user by having your widget listen to the select user widget, so you could search for users. Or you could just make it use the current user. Depends on what you want to do with the widget.

If I get some time today, I'll try and knock up an example FrogCode widget for you, that's if @Graham Quince doesn't beat me to it :)

Adam

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hey Ann,

I put together a quick and dirty widget that should do the job. It has zero formatting and style - that could be added later. It should give you a good starting point. And if you ask @Graham Quince nicely, I'm sure he'll help out!

reg.PNG

 

It doesn't look like much, but it does the job :) When you select a user it will find the reg-group for that user and display it below. If it can't find a registration group it will display a nice message about them not having one.

Should get you started.

 

Widget.JS

Com.Frog.Utils.require(
    '//package/widgets/7BF661392001B4AA9D22EF07A135500A0EA17A0C6D1D5598/assets/styles/main.css',
    '//package/widgets/7BF661392001B4AA9D22EF07A135500A0EA17A0C6D1D5598/assets/views/main.ejs',
    '//package/widgets/7BF661392001B4AA9D22EF07A135500A0EA17A0C6D1D5598/widget.ejs',
    '//package/widgets/7BF661392001B4AA9D22EF07A135500A0EA17A0C6D1D5598/models/registration.js'
).then(function() {
    Com.Frog.Controllers.Widget.extend('Widget.RegistrationGroup', {
    }, {
        prefs: {},
        
        selected_user_uuid: null,

        packageID: '7BF661392001B4AA9D22EF07A135500A0EA17A0C6D1D5598',
        /**
         * Constructor. Runs when the widget is first loaded.
         *
         * @method init
         */
        init: function() {
            //default to the current user to start with
            this.selected_user_uuid = FrogOS.getUser().uuid;   
            this.render();
        },
        
        /**
        * Udate the selected user and re-render the widget when a new user is selected.
        */
        'broadcast.selectedUser': function(el, ev, options) {
            if (options.model.attr('uuid') === this.selected_user_uuid) {
                return;
            }
            this.selected_user_uuid = options.model.attr('uuid');
            this.render();
        },
        
        render: function() {
            
            if (this.selected_user_uuid === null) {
                return;
            }
            
            this.showLoader();
            var params = {
            	identity: this.selected_user_uuid,
                group_type: 'registration'
            };
            
            Widget.Models.Registration.getGroupsForUser(params).done(function(reg){
                var reg_group_name = 'No Registration Group Found';
                if (reg.length > 0) {
                    reg_group_name = reg[0].name;
                }
                this.element.html(
                    this.view('main.ejs', {
                        registration_group_name: reg_group_name
                    })
                );
            }.bind(this)).always(function(){
                this.hideLoader();
            }.bind(this));
        },
  
        /**
         * Event fired by the Site Controller.
         *
         * @event 'widget.live'
         */
        'widget.live': function(el, ev, data) {
            this.render();
        },

        /**
         * Event fired by the Site Controller. Tells the widget that the site is in Edit Mode.
         *
         * @event 'widget.edit'
         */
        'widget.edit': function(el, ev, data) {
            this.element.html(
                this.view('./widget.ejs')
            );
        },

        /**
         * Event fired by the Site Controller. Tells the widget that something has been changed during editing.
         *
         * @event 'widget.updated'
         */
        'widget.updated': function(el, ev, data) {}
    });
});

 

models/registration.js

Frog.Widget.Model('Widget.Models.Registration', {
    getGroupsForUser: function(params) {        
        return this.api('groups.getFor', params,
            {
            "dataType": "json registration",
            "type" : "GET",
            "converters": {
                "json registration": function( res ) {
                    var reg = Object.values(res.data);
                    return Lib.Models.Group.models(reg);
                }
            }
        });
    }
}, {});

assets/views/main.ejs

<div data-name="Widget.RegistrationGroup" class="widget-content">
    <div class="registration-group-content">
      <%= registration_group_name %>
    </div>
</div>

 

  • Like 1
  • Thanks 1
Link to comment
Share on other sites

Hi Adam

Thanks for this but I can't get it to work. two issues. If I try run code it just changes the run code triangle into a square and then does nothing but it also seems to stop any preview of any other widget. I was able to preview a test widget before I tried previewing the new widget (I've named it student's tutor group), but after trying and failing to preview the "student's tutor group" widget it wouldn't preview the test widget either.

I completely overwrote the widget.JS file and the assets/view/main.ejs  with your code

I created a "models" folder directly under top level 'student's tutor group' folder then I created a file registrations.js and pasted in the code

I saved the widget (I even change the version number )

Is there something else I should have done?

 

Thanks

Ann

 

 

 

 

Link to comment
Share on other sites

Hey Ann, 

I've just sat down with @Graham Quince and we've sorted this for you. The issue is that you needed to use your own package ID and widget names etc, and not the ones in my example - we've updated your widget so it works now! Sorry, I should have mentioned not to use the same ID's as in my file :) 

If you refresh your platform and check the widget now, it should work. Then you should be able to customise it how you want it. Remember, you'll need to add a select user widget to the page when you come to preview it!

Hope this helps!

 

  • Thanks 1
Link to comment
Share on other sites

HELP! I've broken Frog!

 

Since using this widget strange things have ben happening.

I can't edit any sites now - they won't open in edit mode (not even a newly created one) I could earlier but they were behaving strangely e.g. file uploaded pop up didn't go away when clicking done but allowed me to upload and link an additional file to a different file link widget 

the widget was available then disappeared

 

I complete closed everything and restated my computer but the problem still occurred

 

Should I delete it (after taking a copy of the code)

 

Ann

 

Edited by ann
additional information
Link to comment
Share on other sites

7 minutes ago, ann said:

HELP! I've broken Frog!

 

Since using this widget strange things have ben happening.

I can't edit any sites now - they won't open in edit mode (not even a newly created one) I could earlier but they were behaving strangely e.g. file uploaded pop up didn't go away when clicking done but allowed me to upload and link an additional file to a different file link widget 

the widget was available then disappeared

 

I complete closed everything and restated my computer but the problem still occurred

 

Should I delete it (after taking a copy of the code)

 

Ann

 

Which page have you used this widget on? I'll log in to your platform and have a look for you. I can't see any reason why this would break anything though, so the problem you are having is quite strange!

Link to comment
Share on other sites

I'm fairly sure it was "ace test tutor group" but I've got a feeling that there is nothing on the site anymore

 

Oh and frog drive won't open either - I just get no response when I click on it

Edited by ann
more info
Link to comment
Share on other sites

12 minutes ago, ann said:

I'm fairly sure it was "ace test tutor group" but I've got a feeling that there is nothing on the site anymore

This is a bit odd. Did you try and 'deploy' the package from the frog-code editor?

Link to comment
Share on other sites

Hi @ann,

The problem looks like it is connected to the other widget you tried to install...week indicator.  Unfortunately with FrogCode widgets, you cannot rename the widget when you download it.  Right now, it needs to remains as the UUID name.  I've deleted the widget and reinstalled it for you.

 

 

Link to comment
Share on other sites

Hi we had a ticket out on the package manager app #GCJ-126-11284 this occurred when I tried to unpack the week indicator widget - could they be connected?

 

I can confirm it's now working ok. Really appreciate your help

 

Ann

Link to comment
Share on other sites

1 minute ago, ann said:

Hi we had a ticket out on the package manager app #GCJ-126-11284 this occurred when I tried to unpack the week indicator widget - could they be connected?

 

I can confirm it's now working ok. Really appreciate your help

 

Ann

That's correct :) See Grahams response above. Currently you can't rename the zip files, otherwise it causes problems. We'll look into making sure this isn't a problem in the future!  Glad to hear that everything is working now.

 

Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
×
×
  • Create New...