Jump to content
ann

Widget to display a student's form

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

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

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.



  • Similar Content

    • By Sean_M
      Hello
      Wondering if anyone could help with an issue which popped up for some of our users (just students by the looks of it), seemly out of nowhere with no known changes to permissions, policy settings, etc.
      Student users are having the error, screenshot attached, "You do not have the required access to open menu.docs.network_drive.user_drive.default.".  When navigating to a page with the Network Files widget to their Home folder. Or in FrogDrive > Home Drive.
      I've checked the policy permissions for FrogDrive and Network Files apps/widgets, file paths in Users is correct, permissions of the folder on the file server. Nothing out of place as far as I can see.
      What setting am I missing to check? 
       
      Many thanks
      Sean

    • By Marcus Goluch
      Hi,
       
      I am going to ask a few questions regarding widget development:
      what DB software do you use (mogo, mysql, plaintext)? what npm module is used to manage this database? with out using any thing like frog forms, frog data viewer, csv files, frog documents of any kind. Could I please get access to give my widgets an actual database table? Can we get the ability to read console print outs from the server side code execution of widgets? Can we please get some form of API access for the server side part of EJS templates, mainly for use with databases.  
      Essentially as somebody who has limited experience developing web apps, I find that the current widget system of having to hack in things from locally hosted files, or using the client to connect to a Document based database hosted on 365 is too janky. Client side access for rendering inside an EJS template is exactly what I want but I don't have the tools available to do the really cool stuff I want to do.
       
      In a nut shell you can't watch Doctor Who on BBC one if you have a Television, but no TV channels. EJS is our television but right now we have no decent channels to watch.
       
      I know, I make a post about this every year but, Frog Code seriously needs to start being worked on again, right now we can not even delete our demo widget projects. I think Frog Code needs a road map and a clear plan, or it needs to be removed if you have no plans on finishing this feature.
       
      Sorry to sound like a brat, but I feel this is a seriously huge missed opportunity.
       
      Thank you
    • By Graham Quince
      Here's a new FrogCode widget:
      https://www.frogeducation.com/community/frogcode/frogcode-showcase/visitor-log
      We worked with George Bligh from Greenshaw on this widget.  When someone views a page with this widget on, it records their visit.  Anyone with Edit and Manage rights gets a button which displays a list of all visitors, their profile, their children (if a parent), how many times they have visited the site and the time and date of their last visit.

      (This widget uses the datastore - a little known about feature of Frog's API.)
       
      Updates
      This latest version 2.2 includes a "copy to clipboard" button, which allows you to copy the whole table and paste it into a spreadsheet program like Excel.
      The second new feature includes the ability to alter the Datastore's reference.  So if you wish to reset the log, instead of deleting the widget and adding it again, you can now change the reference and the information will remain stored.
       
    • By Graham Quince
      The brilliant @Simon Law has built a new widget which adds a site's menu to a page, to save us all from having to do this manually using text widgets.
      You can download this from the showcase page:
      https://www.frogeducation.com/community/frogcode/frogcode-showcase/navigation
    • By Graham Quince
      When I posted the snippet to allow you to restyle of My Notes, I hadn't thought that it wasn't as straight forward to change the title of Phrase of the Day. This bit of CSS is the easiest way I've found of changing all Phrases of the Day, although if you combine it with the the technique(?) mentioned in the restyling My Notes, you can restyle individual widgets in the same way.
      <style> .widget_phrase-wrap .header { height:50px; overflow:hidden; } .widget_phrase-wrap .header h2::before { content: 'My own title \a'; white-space: pre; } </style>  
×
×
  • Create New...