Announcements Widget for Home Page

Community Member
19 31 5,585

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:

announcement_example.jpg

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!

Tags (2)
31 Comments
Instructure
Instructure

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

Surveyor

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

Community Member

No problem!  Glad I could help :smileyblush:

Community Member

My pleasure G.Petruzella@mcla.edu

Community Member

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?

Instructure
Instructure

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!

Community Member

This is incredible franke@fau.edu​! 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.

Surveyor

tfreeman​​, mlattke@instructure.com​, 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.

Community Member

Hi tfreeman and mlattke@instructure.com 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:

unnamed.gif

Community Member

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!

Surveyor

franke@fau.edu​ -- 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?

Instructure
Instructure

franke@fau.edu​ and anthonem@seattleu.edu​, 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

Surveyor

franke@fau.edu​​, anthonem@seattleu.edu​​, mlattke@instructure.com​​ -

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@champlain.edu​ shared a link to a resource page he composed for his institution detailing how this works - including the javascript + the html.

Surveyor

franke@fau.edu​​, anthonem@seattleu.edu​​, mlattke@instructure.com​ -

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

Instructure
Instructure

Thanks, G.Petruzella@mcla.edu​! That related conversation and resource page are super helpful!

Surveyor

Awesome, thanks G.Petruzella@mcla.edu!

Community Member

Thanks G.Petruzella@mcla.edu , 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:)

Explorer III

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?

Explorer III

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

Community Member

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!Scroll Bar.png

Community Member

I figured it out! Thanks.

Community Member

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?

Learner II
Community Member

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!

Learner II

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!

Community Member

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>


Comments are closed.

Subscribe to the News by Email

Community Member

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@fau.edu​, mlattke@instructure.com​, G.Petruzella@mcla.edu​, dhulsey@nmjc.edu​ is this just on our end or are you experiencing it as well?

Learner II

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

Community Member

Hi Adam,

The widget is still functional on our end.  Sorry to hear it isn't on yours Smiley Sad  I do know that jblumberg@champlain.edu 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!2016-10-13_1633.png

Surveyor

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. 

Community Team
Community Team

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! Smiley Happy 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.

About the Author
Emily works with faculty to analyze, recommend, and implement solutions to address a wide range of instructional needs in their online courses. Emily has a bachelor’s degree in Creative Writing from Eckerd College and a Master of Arts in Teaching with Technology from Marlboro College. She recently received a Graduate Certificate in Instructional Design from University of Wisconsin at Stout.