Not so long ago when Jason announced IgniteUI and a plethora of other goodness he mentioned a tool called Configurator that would help you code (or not code really) widgets included in the suite. As as he put it, for all of you server-side developers with desire to fire up your pages with some HTML5 and jQuery that sounds fantastic!

“Configurator for IgniteUI jQuery widgets?  Where?  Why is it not in my install folder/IDE?”

So yeah, there’s that. It’s not something you’d find in the installation of IgniteUI. It’s a live tool actually and there’s actually a link for that in the post in case you missed it.

You could always follow the direct link to the Configurator which is http://labs.infragistics.com/jquery/configure/, but it’s not all too confortable and far from enough don’t you think? Well we agree and we are moving forward with the Configurator making it easily accessible from the IgniteUI home page:

There you go, now you know where you can find it when you feel like some fiddling.

Note: This is in a early stage (hence the big ‘BETA’ stamp on it). While we welcome you to give it a try, you shouldn’t expect correct behavior in all cases.

The Goal

Speaking of  fiddling the experience does remind me a bit of a reverse JFiddle – where you start from the results you want to see and get the code as a result. And that’s exactly what this tool is all about - it’s all “Developers, developers, developers!” deal with this one. And if you are like me and you love to learn by example and in our line of work that is by code. Then getting a ‘default settings’ code with very little knowledge of the IgniteUI controls – sure we want that. Also improve the learning curve of the controls? Why yes please! Experienced developers could instead use it instead to grab a quick piece of code to begin molding to their needs? Sure! There are a whole bunch of ideas behind such a tool that are just awesome. And you can say that yes we have samples (which I might add are quite awesome!) but they can’t cover all the events a control has as it would just not make sense in a real case. Also there are sometimes more properties that can be stuffed in there as well. And yes we do have rich API reference that lists all options and events, but hey what if you could see what they do instantly? What if the demo-ing control could also be modeled to your specification and data model? Well that’s the goal! To let you access and customize controls in a familiar fashion and with boosted speed and ease.

The Configuration ‘studio’

It’s kind of weird to have a getting started guide for a tool that is partly here to help with get star.. you get the point! Well ‘Introduction’ then. Firstly, you don’t really need to worry about resources and stuff, just follow the link and tweak/fiddle! Once there you will see the ‘studio’ has three main areas – toolbox with IgniteUI controls, live workspace and Visual Studio style properties and events tabs ( nice touch with familiar experience there):

Furthermore, on the matter of properties – the configurator is aware what are the default options for the controls so when met they will be omitted to produce clearer code. Let me give an example – as with the editor above you can set the vote count to 6 or 7 and that will reflect in the code, however when you enter back 5 the property won’t be in the source anymore as that is the default option to begin with. And once you are happy with the result you can hit “Source” and grab the corresponding code:

Note: While the code field is editable as I said this is like a reverse fiddle – the source is generated from the design rather than the other way around and changes made in code will just be lost once you switch to design. This is somewhat of a limitation regarding events as you can see – you get a handler function prepared for you, but since the tool can’t anticipate what it should do it is empty.

So we heard you like Grids…

So while the Configurator has a lot of catching up to do, but there has been a special focus on our powerful and feature rich jQuery Grids! And by feature rich in this case read “a plethora of settings to customize each” – I don’t even know if there is a golden middle between ease of use and freedom for the developer, I guess IgniteUI grid features being separate widgets helps some, but it does sometimes make it hard to find what you are looking for. For that reason the grids are sometimes difficult to configure and this is where this tool shines. Currently it does have some quirks still so I’ll attempt to guide you. Once you have picked a control you get it in a ‘sample’ version with some dummy data..that unfortunately isn’t being pre-populated in the options to the side. So if you want to get some customizations rolling, first make sure you have your data set. Simple walkthrough with a grid:

• Start by setting the data source type and response key (if any, as with lack of scheme it is used to parse the data) before you paste actual data because for now the workspace is not equipped with a reset button and the grid will error out attempting to parse the data:

Also for advanced features it’s best to also set the primary key. After that you can paste your data in the data source field. Here’s mine and you can reuse or just provide your own:

The grid is auto-generating columns  by default and once the source field loses focus the grid should appear.

• Tweak options. Keep in mind field blurs cause the demo grid to reload with the new settings and produce errors if vital ones are missing/incorrect. Also enable and configure grid features! In the properties tab there’s a features option with an edit button that takes you to a view with all available features that can be enabled:

And as you can see each feature has its own ‘Edit’ button that takes you the respective feature widget options where you can toggle and set even more options and at any point you can hit the source and grab the generated code.

Note: What I explained for the grid with dummy data and the need to provide your own is true for all data bound controls at the moment. So, for example, a Pie Chart would require you to set data type, along with Value and Label member paths and paste something like the following JSON:

[{"Budget":60,"Label":"Administration"},{"Budget":40,"Label":"Sales"},{"Budget":60,"Label":"Finance"}]

This is the actual pie chart dummy data by the way :)

Just for now

For those experienced with web development the developer tools console of your favorite browser should feel like natural habitat. For those not so much experienced, well lets say that is while you are making changes something goes wrong for now the way to get at least some in for is by looking at the console. Also while at it you can use it to define global variables and functions to use with the controls – there are no iframe-s going on in the Configurator so you won’t to worry if those will be available.

Looking ahead

It seems this is quite often the case – the simpler a tool is supposed to make your like, the harder it would be for someone else to create it. It’s really a lot of work to make this perform flawlessly and then even more so to pack it up with amazing features. So as I mentioned before it is in beta stage and right now is the ideal moment for your voice to be heard.

For the future of the tool we’d like to let you add multiple controls to the workspace and also provide generation for ASP.NET MVC code. There are also a number of functionality enhancements and fixes and until then if you get stuck.. refresh away :)

We would appreciate feedback on what you think about the tool, what would like to see in the future and how would you like to use such a tool.

As always, you can follow us on Twitter @DamyanPetev and @Infragistics and stay in touch on Facebook, Google+ and LinkedIn!