Announcements Widget for Home Page

[franke]

We've given our faculty the option to put a widget on their homepage that populates all the Announcements that are made in the course so it's a streamlined list for students.  It's been a helpful addition, so I wanted to share the code so others can do the same!

Here's what it looks like on the homepage:

The code can be found here.  Add this code to your global javascript.  This script is provided with no guarantees or support, so use it at your own risk!

[mlattke]

You're my hero.  :smileycool:  Thanks so much for sharing this!! 

[G_Petruzella]

 @franke ​​, very awesome. I love seeing creative and useful stuff like this. Thank you!

[franke]

No problem!  Glad I could help :smileyblush:

[franke]

My pleasure  @G_Petruzella 

[tfreeman]

If it's put into the Global JavaScript then would everyone with a Front Page as their option for their home page choice have this in that page automatically?

[mlattke]

I have the same question.  I tried adding it, but couldn't figure out how to get the announcements widget to show up.  I didn't  have a lot of time to look at it, so I just took it out, but it seems like a really cool idea!

[jordan]

This is incredible  @franke ​! It is people, and institutions like yours that make Canvas the great learning platform that it is today! Thanks for sharing this! I look forward to having some time after InstructureCon 2015​ to play with this.

[G_Petruzella]

tfreeman​​,  @mlattke ​, I don't think so - I believe individual faculty would still need to add the snippet of html onto their Front Page to pull in the functionality from the javascript. Or, I suppose, if an institution were using a course template to populate new courses, adding the snippet to the template's Front Page would place the widget onto the Front Page of every course which was built with that template.

[franke]

Hi tfreeman and  @mlattke  sorry I'm late in getting back to your questions!  So, @Gerol is correct, you do need to add the html snippet to a homepage for it to display.  If the intuition is using a course template to populate new courses, adding the snippet to the template's Front Page places the widget into each page built with that template, so faculty don't have to add it themselves.  We're using it in our instance with a home page template for all online courses (Continuing Professional Studies).  Here's our template:

[franke]

Thanks Deactivated user​ I have learned a lot from other colleges too so I figured I'd share one of the resources that has worked for us!

[anthonem]

 @franke ​ -- this is so cool! I see the javascript to add to our global override. I wasn't able to find mention here about the code snippet to add to a course Front Page so the Announcement widget shows up. Looking through the javascript...it looks like we need to add the #cc-homepage-announcements ID to a div -- is that right?

[mlattke]

 @franke ​ and  @anthonem ​, that is exactly what I was wondering.  I loaded the js into our global javascript, but noted that I needed a code snippet to embed it on the home page.  I didn't spend a lot of time looking at the js to try to figure out what the code snippet should be, but I look forward to exploring it more, b/c it is a super neat idea.  =D

[G_Petruzella]

 @franke ​​,  @anthonem ​​,  @mlattke ​​ -

Emily's right, adding the ID to a div is exactly the hook you need to put into the Page's html. Over in another conversation, the awesome  @jblumberg ​ shared a link to a resource page he composed for his institution detailing how this works - including the javascript + the html.

[G_Petruzella]

 @franke ​​,  @anthonem ​​,  @mlattke ​ -

Whoops, read too fast...I see it was actually you, Mark, who made the ID link. 🙂

[mlattke]

Thanks,  @G_Petruzella ​! That related conversation and resource page are super helpful!

[anthonem]

Awesome, thanks  @G_Petruzella !

[franke]

Thanks  @G_Petruzella  , Josh and I work together at Champlain College and we were both unaware the other had shared the info for the code/Announcement widget.  So, it's great to have them both linked and get all the info out there for others!  Let either of us know if we can help with any other questions:)

[baxl]

This is great!  One thing though, I was able to see the widget and styled it, but it's not populating the announcements.  I created a couple test announcements and put a fake student in the course, but the announcements didn't populate.  Any idea why it's not populating?

[baxl]

Nevermind!  It took about 15 minutes before it showed up, and now it's working.  Thanks for sharing!

[jtorres1]

This is fantastic! I successfully added the widget and it's working beautifully. I did have one question though. We have enlarged the widget to make it the feature of our home page and I was wondering if there is a way to keep our box the size we have, but somehow change how far down the scroll bar with move - it's currently only covering half of the box rather than scrolling the entire height we have set. I've attached a photo to show the height of our box and where the scroll bar stops. I hope this makes sense. Thanks!

[jtorres1]

I figured it out! Thanks.

[mpilati]

I was so excited to find this, but then hit a serious roadblock - "This script is provided with no guarantees or support, so use it at your own risk!"

Is there anything like this that does not require adding an unsupported script at the level of the instance? We don't have local support that is comfortable doing something with that sort of warning on it.

Help?

[dhulsey]

Yes! Try ishar-uw​'s soultion:

https://community.canvaslms.com/message/7070#comment-43776

[mpilati]

Thanks so much for this referral - I THINK I have it working - but I am not entirely sure. Oh - yeah - now it is. The delay for new announcements to show is quite long..

But it works! Thanks!

[dhulsey]

Yes. The delay is something about how often the RSS feed updates. There are ways for Instructure to make that quicker, but I am not sure how popular use of the RSS feeds is.

Anyway, I am glad you got it working, Michelle!

[denise_kreiger]

Hi - I was able to add the Announcements widget to my Home page (Front Page) and I can see it in Teacher mode. I also added an Announcement (in Announcements) and saved it (didn't see an option to "publish" it so figured it's not needed). Back to Home page/front page - the new Announcement doesn't display - and I waited over 30 minutes for it to display (someone said it took 15 minutes to display). I'm in teacher mode and the course is not published (it's a 'template' course that I'm building from scratch).

Any ideas as to how to make the Announcement display in the widget on the course homepage? Thanks, Denise

Just to add, I used Josh Blumberg's code to create the widget (which displays - the announcement doesn't display):

<div class="img-rounded" style="float: right; background-color: #fffbcf; width: 315px; height: 260px; border: 1px solid black; margin: 10px;">

<h3 style="color: #ffffff; background-color: #2a4e57; text-align: center; margin: 0px; padding: 0px;">Announcements</h3>

<div id="cc-homepage-announcements" style="height: 200px; overflow-x: hidden; overflow-y: auto; padding: 6px; text-align: left;"> </div>

</div>

Back to Top

---

Comments are closed.

Subscribe to the News by Email

---

News Categories

Canvas Tips Canvas Updates Teaching Tips Training

---

Recent News Posts

• Enable Students to Export Canvas Content for Offline Viewing May 4, 2016
• Getting Around a Crocodoc Error in Firefox April 27, 2016
• 4/23/2016 Canvas Production Release Notes April 27, 2016
• 3/31/2016 Canvas by Instructure Release Notes (Android 5.4) March 31, 2016
• Canvas Production Release Notes 3/12/16 March 21, 2016

---

Need Canvas Technical Support?

• Call 877-399-9103
• Click on “Help” in the left bottom corner of any Canvas page
• Visit the Canvas Support Site
• Email support@instructure.com
• Available 24/7

---

[awilliams]

It seems like this has stopped working with the latest release. I'm not positive that the two are related but the timing makes me think it was.  @franke ​,  @mlattke ​,  @G_Petruzella ​,  @dhulsey ​ is this just on our end or are you experiencing it as well?

[dhulsey]

I'm not using it right now. We moved to a standardized homepage.

[franke]

Hi Adam,

The widget is still functional on our end.  Sorry to hear it isn't on yours   I do know that  @jblumberg  is working on an updated  code, so I'll share if he does this and maybe this will fix the issue.  Sorry I can't help more right now!

[jblumberg]

Adam,

It is hard to know what is happening.  If you are comfortable in the inspector for your browser I would go to that.  You should be able to check:

Does the console have any errors when the page loads?

Can you find the code for the announcement widget in the global.js?

I hope this helps,

Josh

p.s.  I wrote this widget so that it uses the RSS feed... it really should be rewritten to use API calls, but I have never gotten around to it. 

[Stef_retired]

For anyone interested in this topic, be sure to RSVP to the CanvasLIVE event Ask Me Anything: Kate McGee, Product Manager, Commons+Content, which is coming up on Thursday, October 20, 2016. Kate is going to be answering questions about Canvas Commons, master courses, templates, and the content authoring tools in Canvas--and, well, anything! If you’re interested, but your schedule doesn’t allow you to attend in real time, RSVP "no" or "maybe" so you can receive any post-event updates.