Liveupdate PollGadget

Here come my contribution to the gadgets competition in the “Open gadgets 2009” category. The gadget works with EPiServer XForm to get live results on a poll or question from the site. Meaning as people vote or answer your question on the site you can follow the result live on the dashboard. You can connect the gadget to any XForm and onthe XForm you can use any any field you wish to follow live. You also have the ability to turn off the live update if there is any performance issue or so. (I have tried to keep it pretty optimized so this will hopefully never be a problem). To configure the gadget you just use the edit menu on the gadget (The little arrow in the upper right corner of the gadget) and set its properties. This means you can have many of this gadgettype with different data working at the same time on the dashboard. It also only updates if there is any change in the data and never updates if the gadget is not visible (it is hidden on another tab or such).

Since I am very early with this gadget I give the possibility for others to see my code use parts of it to help with their development of the gadget. So I hope I get some competition credits for being early!! =)

Functionality

I will try to explain the functionality a little more in detail by explaining on how configure your own poll. Once the gadget is installed (see the installation instructions further down) you are now able to make your own polls.

First set up a new page (use the XForm page template or the demo) in the XForm properties create a new XForm and in this make sure you have a heading (and have “heading” as class since I currently search for this to be able to display heading in the gadget). Create a field like a radio or check boxes or what you like and note down what name you give it. Now save everything and view it in view mode. Should look something like this:

After this you go to the dashboard and add a new poll gadget. Edit the gadget and fill in the information. The pageId of your new page, the property name for the form (probably XForm if you use public templates) and the field name that you noted down earlier. Currently there is only 1 chart type (the pie chart).

Now save your settings and you should have a gadget with no data. So go to the page in view mode and do a few vote to get some data. And watch the magic.

Business Value

I think the business value of this gadget is pretty high. I can see a lot of scenarios where you would like some fast responses to questions be it on an external site or an intranet. This gives the possibility to follow these live and take actions when needed. It also looks pretty cool on the dashboard which might help partners sell EPiServer to customers that like flashy things =)

Technical Overview

The Poll gadget uses Google chart API as a graphical representation and renders the result as an image. This is the only external reference that is used in this gadget. The data comes as said from the XForms in EPiServer that uses data store as storage in EPiServer 6. The new data store should make these kinds of requests fast. The settings for the gadget is also stored in the new data store. The gadget also uses Linq to XML to get hold of the questions from the form XML. The ajaxrequest that is sent between the client and server to update the chart only send a small id to the server and gets json object with a link back.

Installation Instructions

1. Follow the CTP2 installation instructions to install CTP2 CTP2 install instructions. Also install Globalized public template content.
2. Open the poll zip file and extract the content of in into the public templates folder for your CTP2 site.
3. Convert the project file to MVC project. Info on how to do this you can find here: How to create a gadget – By Ted Nyberg Also do the step with web.config (adding the public template assembly).
4. Open the project in Visual Studio and include the 4 folders Content, Controllers, Models and Views to the project by right clicking and choose “Include in Project” on the folders.
5. Add reference to EPiServer.Shell, EPiServer.Data (found by browse to bin folder), system.web.mvc and system.runtime.serialization (found on the .NET tab).
6. Build the solution, go the the dashboard and you will see your poll gadget. (Even though it has no data yet, since you probably haven’t visited the demo page to use the Xform)

Feel free to ask any questions about the installation and I will try to help and update this. (Sorry for not beeing the ultimate installer guy and making some cool installer).

Download the Code here: Download

How to find information on EPiServer Problems

When working with EPiServer at least earlier a big problem has been finding good help when you need to develop something. Like “How do I <insert problem> in EPiServer. Is there any examples I can look at?”. Some things might still be a problem to find but it is alot of information out there, you only need a way to find it. I will try to write of some ways to find the information you need.

Google

Off cause Google is always a good place to start. If you are lucky there is some nice results there and you can go home and develop happily. Sometimes though the really good results is not on the first page (might be some hard to find blog like mine) or are a part of a big result from like EpiServer world which might not show unless you go deeper into all results with multiple pages.The information probably is there somewhere in a result string but might be faster and easier to instead go down and check the top sources themselves directly instead.

EPiServer World

EPiServer World is a very good place to search for information. First it have a lot of information in blogs. A lot of very good developers have a alot of nice blog posts about various problems that they have found solutions on. To find information in the blog i suggest doing a search on EPiServer world page. You will also find results from forum posts, articles and episerver.com (White papers and such). And if you don’t find the result here or in any of the below links its a good thing to post a question in the forum. That way also other developers can see the question and answer of the problem you have, so they can find in when they need.

EPiServer Wiki

EPiServer Wiki is a newly started  wiki that will grow lot ain the future when people start using (at the moment it is pretty unknown). To contribute to this wiki you only need an EPiSevrer World account and then you can start write good information. i hope this will be a huge database of good stuff about EPiServer. Go there and try a search and see if you get the result you want. At the moment there is no developer information but I hope that will change.

EPiServer SDK

EPiServer SDK in an early version was extremely flat and really did not give that super much information. Sure you could find some nice information there depending on what you where looking at but it had a lot lacking. This have improved some lately and there are more helpful information here now even if it still lacks a bit. There are people that have as a job to create SDK content here so more come up every day.

EPiCode, EPiServer LABS and EPiServer Research

EPiCode, EPiServer Labs and EPiServer Research is a great place if you are looking for some modules that you think would be good or other new and cool features that is not officially supported but would fit your project perfectly. Most projects you find on these sites are Open Source projects that you can download, install and use on your site. It is very good to have some basic knowledge on the projects here so that you don’t do the same work yourself that have already been done. Its very much worth the time to visit these!

Livechat with EPiServer developers, support and partners

Livechat with EPiServer developers is a very nice way if you need fast information on a problem and have not been able to find in in your searches. In this IRC channel you will find EPiServer employees, EPiServer Partners and more that discuss EPiServer all day long so this is a really nice place if you have an urgent question. Or want to help other people with their urgent questions.

I hope I have helped you to find the solution to your EPiServer problem!

Websites and Accessibility

I have just been to a workshop on accessibility lead by two persons with different sight handicaps. One that are working and using dayly readspeakers and one that uses zoom tool at work to be able to read and navigate the content of a website. They told us alot about what to take into consideration when creating a site and also what to stop doing. It was only a 2 hour workshop but it was very insightfull and told alot. The readspeaker that they used was JAWS and the zoom tool was Dolphin.

Some information from the meeting

Spending time on a website for functionality that reads the content automatically without using a readspeaker tool like JAWS is a big waste of time for their targetgroup. If the have disability, they have their own tools and if they are on a computer without their tools they wont be able to get to the browser or go the the webpage anyways. There might be other uses for such a tool like targetgroups that are weak in the language of the webpage and might benefit for hearing it instead of reading it, but most likly are not worth the developing time.

There are however alot to think about when building a webpage that have  abig beneficial effect towards readspeakers and I will lise some of them here.

Use  headings in a good structured way. Many sightdisabled persons navigate webpages using headings. Headings give a good structured overview of the page and what content it contains. Readspeakers have good tools for jumping between headings and this is the primary way they navigate a page. Also FireFox, Opera (and maybe more browsers) have toosl for testing this by only displaying a index of all headings on a page, try this to see that the page looks good and understandable (where to get what information) with only headings.

Another good thing is bringing back Anchor links to part of the page and have a index in the top (remember to have good titles on the links). That way  they can find what information or section of the page they need easily.

For zooming tools the website should not have too much empty spaces, flash/silverlight applications and such. If flash/silverlight is needed onthe page try different zoom tools on the page so that the applications zoom good. (sometimes they can even crash the zoom tool).

For more advanced help with accessibility you should really look inteo WAI-ARIA. Their comment on WAI-ARIA was that they ahd not had any experience with it but they said it sounded great, and a thing they really look forward too in the future. WAI-ARIA is still a very new technology to use and as such might be hard to find examples on how to, but it is worth looking in to if you want an accessible website.

Links

General information

W3C information on all WAI standards

WAI-ARIA information

Here is a link on for figuring out which browsers today have support for WAI-ARIA. Im not sure though on which rate this page is updated.

WAI-ARIA browser support

Video: Todd Kloots: “Developing Accessible Widgets Using ARIA”

EPiServerdagen 2009

EPiServerday 2009 had some seminaries with accessibility in swedish. So if you understand swedish here are some links for these:

PDF: Presentationerna för seminariet dag 2 accessibility i och med EPiServer

Video: Tillgänglihet 2010 – så skapar du webbplatsen alla kan använda

Video: Checklista inför de nya kraven på tillgänglighet 2010

Video: 2000-talet tillgänglighet på webben (With: Olle Ohlsson, W3C)

Video: EPiServer CMS och Tillgänglighet (With: Peter Sunna, EPiServer )

I hope that information will be usefull to you also, and please ask any questions you have and I might be able to help. I might continue and post more about this in the future.