How to use APIs in a Widget?

Rafi.S.99
Rafi.S.99 Posts: 4 🔍
I'm trying to present some useful information in a widget.
- How many students have accessed that course
- How many students have accessed a particular content item
- Can we include User Attributes such as Gender?

Not sure where to start. Is this even possible within a widget?

Thanks in advance for your help.
Tagged:

Answers

  • Johnny.B.962
    Johnny.B.962 Posts: 81

    @Rafi.S.99,

    Yes it is possible to use APIs in a widget, you'd just have to add it into the Source Code editor part within a <script> tag. What information would be available is based on the role/permissions of the user logged in and looking at the widget. There may be multiple ways to do this, but if you use an ajax function in Javascript, that is an easy way to do it. Here's an example based on the GET to Retrieve content topic completion for particular user.

    $.ajax({
    url: '/d2l/api/le/(version)/(orgUnitId)/content/topics/(topicId)/completions/users/(userId)',
    type: 'GET',
    dataType: 'json',
    success: function(data) {
    //code to parse the response
    });

    For that call, you'd want to wrap it in a loops to pipe in topicIds for all your Content items and userIds for each of the students in the course, and then manipulate all that data in some other way that you'd want to see it in. This may take some more API calls to chain together, but it's certainly do-able if you get all the right pieces together.

    However, I will note that your first question "How many students have accessed that course" can just be seen by going to the Classlist tool in your Course and then seeing the "Last Accessed" column.

    As for pronouns, that's contained in the data for the GET data for a particular user.

    I know this isn't super detailed, but hopefully that's a good start for you!

    -Johnny
    D2L LAM

  • Rafi.S.99
    Rafi.S.99 Posts: 4 🔍

    Thanks Johnny,

    Version: is that the LE version or the API version?

    In the HTML view for the widget, is this the correct format?

    <script>
    $.ajax({
    url: '/d2l/api/le/(version)/(orgUnitId)/content/topics/(topicId)/completions/users/(userId)',
    type: 'GET',
    dataType: 'json',
    success: function(data)
    {
    //code to parse the response
    });
    </script>

  • Johnny.B.962
    Johnny.B.962 Posts: 81

    That would be the LE version, there's another API call available to get whatever our current versions are in case you want that, or you can hard code it in the url part and check on it every now and then.

    That is the correct format, you can even replace (orgUnitId) with the replacement string for it so you won't need to input that and it could be relative to whichever course you want to put it into. As for (topicId) and (userId) you'll want to just use a variable for those in your code that you are setting prior to that part of the code executing.

    -Johnny
    D2L LAM

  • Rafi.S.99
    Rafi.S.99 Posts: 4 🔍

    That's great information, thank you!

    Just one more: Can you explain the format for outputing information? Is that in JavaScript or should I look up Ajax?

  • Johnny.B.962
    Johnny.B.962 Posts: 81

    In the call that I linked to: GET data for a particular user. There is always a line at the bottom of each API call section for "Return" if the kind of call gives you any data back. In this case, you'll get the UserData JSON block which is anchor linked back to the top of that same page.

    The next step is definitely going to take a bit of familiarity with Javascript, and this is starting to go a bit beyond what we can offer in just a simple Community post. However, here's some other things to start looking up which will hopefully get you on the right track if you want to build this out yourself.

    The JSON data you get back is basically just a list of information, in our example the following part success: function(data) does the following; if the API call is successful, create a new variable called "data" and with that variable contains the UserData JSON block. After the call is successful I can then use "data" to, for example, "data.Pronouns" would give you a string of text for the Prounouns of the user you were just getting the information for, "data.FirstName" and "data.LastName" would give you their name, etc. Each of these could be used to populate other variables, create arrays to list out all the details you want since you'll want to go through many users.

    Basically, here's where you'll have to determine what you want to build, how you want to handle the data as you are getting it in the code, etc. Here's some suggested resources:

    Additionally, if you want to see someone's code who's made entire widgets based on making API calls as some reference material, here's Github from University of Groningen. They have a few widgets on here, which are complex/simpler so just look for the key elements in there which are making calls, dealing with the data afterwards, etc.

    Happy hunting!

    -Johnny
    D2L LAM

  • Rafi.S.99
    Rafi.S.99 Posts: 4 🔍

    Amazing, thank you!