Announcements Widget for Home Page

franke
Community Contributor
31
8358

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
mlattke
Instructure
Instructure

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

G_Petruzella
Community Champion

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

franke
Community Contributor

No problem!  Glad I could help :smileyblush:

franke
Community Contributor

My pleasure  @G_Petruzella 

tfreeman
Community Novice

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
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!

jordan
Instructure Alumni
Instructure Alumni

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
Community Champion

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
Community Contributor

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:

unnamed.gif

franke
Community Contributor

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
Community Contributor

 @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
Instructure
Instructure

 @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
Community Champion

 @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
Community Champion

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

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

mlattke
Instructure
Instructure

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

anthonem
Community Contributor

Awesome, thanks  @G_Petruzella !

franke
Community Contributor

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
Community Contributor

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
Community Contributor

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

jtorres1
Community Contributor

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

jtorres1
Community Contributor

I figured it out! Thanks.

mpilati
Community Explorer

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
Community Champion
mpilati
Community Explorer

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
Community Champion

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
Community Novice

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

awilliams
Instructure Alumni
Instructure Alumni

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
Community Champion

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

franke
Community Contributor

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  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

jblumberg
Community Contributor

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
Instructure Alumni
Instructure Alumni

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.