Bad Widget Class Name Given - Our Experience with Widgets on any SilverStripe Page

Today we took widgets out of their usual stomping ground of the "blog" and introduced them into the wild of other Page Classes.

To do this:

class Page extends SiteTree {
 
...
    static $has_one = array(
    "WidgetArea" => "WidgetArea",
    );
     
    function getCMSFields() {
    $fields = parent::getCMSFields();
    $fields->addFieldToTab("Root.Content.Widgets", new WidgetAreaEditor("WidgetArea"));
    return $fields;
    }
....
}

And then in your template file just add $WidgetArea where you would like them to appear, and you're done! Easy.

The problems begin when you start adding widgets. We started with:

LatestBlogPost
childrenpages
HtmlContentWidget - (eventually replaced with "widgets_content")
twitter
youtube-1.0.0

At first, all seemed great. Except for HtmlContentWidget. The TinyMCE applet wasn't loading by default (you had to save & refresh the page first) which wasn't ideal. Then we noticed that trying to insert an image would throw up the error: "Error details: DOM.get(this.id) is null" (this has been submitted as a SilverStripe bug but never officially solved)

After some searching through SilverStripe forums we found this solution: http://groups.google.com/group/silverstripe-dev/msg/1a3b1292c4f46117

We removed "HtmlContentWidget" & installed the attached files ("widgets_content" & "widgeteditor") from the above link and suddenly our problems were over. Or so we thought.

After testing further, we found that when adding other widgets now, occasionally we'd receive "Bad Widget Class Name Given" It seemed to be due to the new "widgeteditor" that we had installled as part of the previous fix. It was changing the way widget IDs were handled and as such the "drag & drop" feature were no longer active and adding more than one widget often caused the "Bad Widget Class Name Given" error. That then resulted in us being able to save the page.

There are lots of forum posts on SilverStripe.org that discuss this issue, our simple solution was to remove the "widgeteditor" folder from our site, but leave in the new "widgets_content".

So far, all tests have passed and our client is happily adding widgets as I type.

Watch this space...

Recap

To summarise, we ended up by leaving the core folders & files as they, and just using the following widgets:

www.clickheredigital.co.uk/ftp/widgets/widgets_childrenpages.zip

www.clickheredigital.co.uk/ftp/widgets/widgets_content.zip

www.clickheredigital.co.uk/ftp/widgets/widgets_LatestBlogPost.zip

www.clickheredigital.co.uk/ftp/widgets_twitter.zip

www.clickheredigital.co.uk/ftp/widgets_youtube-1.0.0.zip

Mostly these are standard as downloaded from SilverStripe.org (however the widgets_content is from http://groups.google.com/group/silverstripe-dev/msg/1a3b1292c4f46117 and we updated widgets_youtube and widgets_childrenpages slightly, as they were quite outdated)

Update

We've just come across a bug with this still, when dragging and dropping widgets containing the tinyMCE editor, we see: "t.win.document is null" and are unable to save the page.

However, this problem doesnt seem to apply to Chrome browsers.

A quick search on the web finds this: http://readystate4.com/2009/05/15/tinymce-typeerror-twindocument-is-null-in-firebug-console/#comments

I can see those lines used within the "widgeteditor" folder that we tried earlier, but of course that threw up the "bad class name" error. If anybody can rework those 2 lines of code into the current CMS/javascript/WidgetAreaEditor.js file, I think we could be sorted...

Posted by Ryan Badger on 18 January 2012 | 0 Comments

Tags: silvestripe, widgets, Bad Widget Class Name Given, web developers in shoreditch