Symphony.

Can this extension be used on frontend too?

No. There’s a complete separation between backend and frontend in Symphony. All this extension could do is modify the XML you’re processing (wich doesn’t make sense without you changing your XSLT to make use of it).

I guess this extensions mostly consists of some JS and CSS. You can try to reverse-engineer the code and include it in your frontend yourself.

Can this extension be used on frontend too?

Sure, all it does is providing two jQuery plugins and some stylesheets. Here’s the list of resources you need to include in your pages:

symphony.button.css
symphony.checkbox.css
symphony.checkbox.js
symphony.selectbox.css
symphony.selectbox.js
symphony.textbox.css

While buttons, textinputs and textareas only need some custom CSS rules, selectboxes and checkboxes are initialised as ordinary jQuery plugins. Example:

$('input[type="checkbox"]').symphonyCheckbox();
$('select').symphonySelectbox();

Let me know if you encounter any problems.

D’oh, I though I fixed that! Which browser/version are you using? Is that screenshot coming from Symphony 2.2 or lower?

That is Symphony 2.1.2 in Google Chrome 9.0.597.102.

Thanks for making my admin area look prettier. The extension page says unsure for 2.2.1 compatibility. That can be changed to compatible. I just installed it in 2.2.1 and every admin page I looked at is prettier now =)

Thanks for the extension. It's a nice touch.

I'm not able to use it together with language extensions completely, however.

Language extensions add a selectbox here and there, and they seem to clash with this extension. When I switch languages to any installed language extension, and save, all backend selectboxes dissapear (I'm guessing the styled selects never appear), and I have to comment out some css to get the unstyled selects to show up, allowing me to switch the language back to English.

Needless to say, it works fine in English, and the issue is only with select boxes.

Any idea what this might be?

Any idea what this might be?

Not yet, but I'll investigate. Thanks for reporting that! :)

Better Forms updated to version 1.1.1 Beta on 26th of June 2011

• Fixes a bug occurring on Ajax pages.

Lovely!

But what’s the compatibility problem with Subsection Manager? Just a z-index-problem, or worse?

Actually it's not really about "compatibility". Subsection Manager already replaces its selectboxes with a complex UI built on top of Stage. That UI features inline editing of subsections, search and so on. Because of that, Better Forms should not interfere with those selectboxes as their have their own, custom treatment.

Not sure if it is your extension or my extension, but with the 'Author Roles'-extension something goes terribly wrong when trying to stylize the checkboxes.

Not sure if it is your extension or my extension, but with the 'Author Roles'-extension something goes terribly wrong when trying to stylize the checkboxes.

Enhanced checkboxes need some love, I'll update my extension as soon as I reappropiate my life after exams. ;)

as soon as I reappropiate my life after exams

Real life is scary. Run away!

Just to check, will this ever be part of symphony itself? I think it would be quite a useful feature instead of just an extension.

[...] will this ever be part of symphony itself?

I can't tell you for sure, but a Symphony 2.3 meeting is coming and I think there are good chances that form controls will be given a makeover.

UI Experiment: Fancy Forms updated to version 1.1.2beta on 20th of December 2011

• Added extension.meta.xml.
• The extension has been renamed "UI Experiment: Fancy Forms" (it was previously called "Better Forms").

I really like this extension, though I have a problem with implementing it on the frontend. Although I've included all the resources required I have problem with displaying select drop down properly.

I would much appreciate a sample code of properly deployed select field. Thanks in advance.

Hi Duncan,

There might be several causes to your problem, but I've identified two big issues that could stop people just like you from implementing Fancy Forms on the frontend.

Issue #1: Failing to include all the required code

Description: Even if symphony.selecbox.js can be used on the frontend, it still makes use of jQuery. Moreover, it has to be properly initialised inside a $(document).ready() call.

Solution: In your master.xsl file just include the following:

  <link rel="stylesheet" type="text/css" media="screen" href="{$root}/extensions/fancy_forms/assets/symphony.selectbox.css" />
  &lt;script type="text/javascript" src="{$root}/symphony/assets/jquery.js">&lt;/script>
  &lt;script type="text/javascript" src="{$root}/extensions/fancy_forms/assets/symphony.selectbox.js">&lt;/script>
  &lt;script type="text/javascript"><xsl:comment>
        (function($){
               $(document).ready(function(){
                     $("select").symphonySelectbox();
               });
         })(jQuery);
  //</xsl:comment>&lt;/script>

Issue #2: Calls to the Symphony JS object

Description: In order to allow translations of its copy, the Selectbox plugin makes use of the Symphony object to add and get strings from the language dictionary. However, the Symphony object is not available on the frontend and wouldn't be needed at all.

Solution: You'll have to create a duplicate version of symphony.selectbox.js where:

1. There are no calls to Symphony.Language.add(...);
2. Every call to Symphony.Language.get('my string') is replaced with 'my string'.

That should be enough to get Fancy Forms working on the frontend. I'll make sure the README is updated with futher details.