Steven De Waele's Blog

Finally CRM 2011 is cross browser!!

This are the supported browsers:

Tired of digging into xml to add a button in the ribbon?

I thought so.
Visual Ribbon editor for CRM 2011 is a small tool to adapt the ribbon.
It’s downloadable on codeplex.

You can add a button or group, hide, unhide or even delete buttons with just one click.
The icons you’ve uploaded as webresources are previewed in the tool and when filling in you have some intellisense as well.
Searching the section to place the button in is history, because the tool can make them visible as well.

When adding rules or actions you have a really nice dropdownbox with all the possibilities.

So enjoy and play with that ribbon.

Ever wanted a sneak preview of all the images attached on the current record?
Nothing easier like a nice slideshow of all screenshots attached to a mail, case, contact, …

In this post i will explain how to do it.

First of all what am i using to do it:

• Jquery
• Jquery templating plugin: a plugin with allow you to insert the objects in a template an insert everything into html.
• Galleria: a jquery plugin to create the slideshow

and this is the result.

Download sources

WARNING: this is just a proof of concept and can’t be used in productions.

In the current version of jquery ui, you have some basic widget’s like a button, dialog, slider,  datepicker, progressbar and a autocomplete.

But also the fancy accordion and tab widgets.

But this post isn’t about this widget, but about the cool new widgets coming up in jquery ui 1.9.

The Menu

This widget will transform your (nested) list into a menu that will be adjustable with jquery themeroller. It has some nice mouse and keyboard interactions to.

The demo page: http://view.jqueryui.com/master/tests/visual/menu/menu.html

The Menubar

This widget is a part of the menu widget. It’s the same widget but for horizontal menu’s.

The demo page: http://view.jqueryui.com/master/demos/menubar/default.html

A popup

The popup widget is a fancy one. When you click in a menu, there can popup a list of menu items. Well this is the work of this popup widget. You can create a popup with opens when you click the hyperlink “Log In” and when you click somewhere else in the page, it closes itself.

The demo page:http://view.jqueryui.com/master/demos/popup/default.html

A tooltip

I don’t have to say a lot about this one. It’s a themeable tooltip. With support for icons,frames,borders,background images.

The demo page:http://view.jqueryui.com/master/demos/tooltip/default.html

and last but not least, a spinner

The spinner will allow you to make spinners for numbers, font-sizes and more. There will be a slider in it to. So the user of the page have full control of the spinner.

The demo page: http://view.jqueryui.com/master/demos/spinner/default.html

Summary

As you can see, there are some great new widgets coming up in the 1.9 version of jquery UI.

A brand new menu, menubar, a popup, a tooltip and a spinner.

All widget’s will be themeable and easy to use. I already used some of them and not all functionalities are implemented yet.

But I’m eager to start working with the final version of this really cool widgets.

In my previous posts you can see that I love jqgrid.
And because I like it that much, this is a small tutorial of how I use it.

Describe your data

I’ve created an abstract class with the properties Id and Timestamp.
When using databases an Id is the minimum requirement for an object.
The timestamp can be used to see if the object is changed between the read and update.

The BinaryTimestamp is just serializable wrapper for the byte array.

The dto itself is pretty simple.

That’s the dto part. So if we have a grid we want to filter the data right?

How do we pass the data from grid to repository

Ok, First of all.I want to generate javascript code to set the filter on load of the grid.
So I defined a interface with a method GenerateJavascriptFilter with returns a string.
Every filter has to implement this method.

In the filter I define the parameters given by the grid.
Some parameters are nullable because we want to filter on a subset of property and not necessarily on all parameters at ones.
And the format of the javascriptfilter for the grid.

That’s just enough to filter the data.

Create pages of data

Most of the time we don’t want to give the user al the data at ones. So we implement paging.

There are 2 parts in this one. Giving the paged result to the ui and give paging data back to repository.

This is the class I use for passing the result to ui.
It has 3 integers: the requested pagenumber, the number of rows requested and the total amount of items found.

and off course the last an IEnumerable of items with contains all results of the requested page.

For passing the paging data to the repository, I’m using following object.
very simple, just the requested pagenumber and the amount of rows we want.

Sorting data

Ever seen a business application that can’t sort data?
Me neither

So below the sortdescriptor, just the name of the column to sort and the sortorder.

The fun part: UI

Ok, we are almost there.

Let’s convert the pagedresult to a json structure.
I’m using this extension method.

So now is everythin ready for creating the grid itself.
This the HTML part. A div with a height of 200p, a table to fill with data and a div for the pager.

The grid definition.

Defining the custom buttons and the initial search status.

Method to define the initial loaded search.

The source code is downloadable here.

While a was looking for a way to generate a basic jqgrid of a specific model.

My eye catched this way of working: Scaffold Templates.

This is how it works:

Install folowing Nuget Package:MVC3CodeTemplatesCsharp(there is a visual basic version also)

After accepting the warnings there is a extra folder in your web application with the default templates.

I copied the list template and adapted it for working with a jqgrid.
The code below required the necessary links to all jqgrid files.

List-Template
Of course this a very basic grid and is just a concept of what is possible with the templates.
Later on I will publish my own extended template when it’s has all features needed for some professional projects.

This is the situation: You give a model to a view with a HiddenFor Helper in it. For example the Id is 0. You post this data to the server modifies the Id into 1 and send it back to the view. If you look to the html code generated. The hidden field will have the value 0.

This is because the value of hidden fields is saved into the ModelState. So to update the view you simply clear the modelState with ModelState.Clear(). Keep in mind that this will remove everything in your modelstate. Also the validation messages will be gone. You can remove only the hidden field also.

The new version of jquery mobile is a week old now.
Time to have a quick summary.

New supported platforms

The new version is now supporting the new android versions(android honeycomb and 2.1 –2.3) and Nokia symbian 3.

Decoupled widgets

The widgets have decoupled so you can remove widgets you don’t use in the projects. This way your builds are a lot more flexible and you can reduce the amount of traffic.

The create event

In previous versions you hade to create all used widgets when loading content via ajax. Now you can use the create event.
$( ...new markup that contains widgets... ).appendTo( ".ui-page" ).trigger( "create" );

DOM caching management

In jquery mobile pages are cached and in previous versions all pages stayed in the DOM which causes browsers to slow down or even crash. Now you have the possibility to turn this of by setting the option domCache on your pages.
By default this is turned off and jquery mobile will manage the caching. Be careful if you turn this of you have to manage everything yourself.

Prefetching pages

<a href=”foo/bar/baz” data-prefetch>link text</a>

New global config option: autoInitializePage

You want more control about the creation of widget on your pages. With the new global option autoInitializePage on false. Jquery mobile won’t generate widgets at all.

and last but not least:

a new and simpler design for radio buttons and checkboxes.

If you’ve got a javascript error in IE when zooming in a gzoom control this is nice fix.

The error is caused by a divide by zero exception.

Change following lines:

107: leftFactor = leftPos/deltaWidth;

in

107: leftFactor = ( deltaWidth == 0 ) ? 0 : leftPos/deltaWidth;

and

113: topFactor = topPos/deltaHeight;

in

113: topFactor = ( deltaHeight == 0 ) ? 0 : topPos/deltaHeight;

Are you looking for a grid with possible to do everything you want and gives you full control over your data?

jqGrid is such a control. The possibilities are endless. XML data, Json Data, subgrids, treenodes, filter toolbar, search window and much, much more.

Designing the grid isn’t difficult, because it supports jQuery themeroller. With makes it possible to change the layout in a few clicks.

screenshot:

The code:

jQuery("#list2").jqGrid({
   	url:'server.php?q=2',
	datatype: "json",
   	colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
   	colModel:[
   		{name:'id',index:'id', width:55},
   		{name:'invdate',index:'invdate', width:90},
   		{name:'name',index:'name asc, invdate', width:100},
   		{name:'amount',index:'amount', width:80, align:"right"},
   		{name:'tax',index:'tax', width:80, align:"right"},
   		{name:'total',index:'total', width:80,align:"right"},
   		{name:'note',index:'note', width:150, sortable:false}
   	],
   	rowNum:10,
   	rowList:[10,20,30],
   	pager: '#pager2',
   	sortname: 'id',
    viewrecords: true,
    sortorder: "desc",
    caption:"JSON Example"
});
jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false});

Off course this is very basic grid but the possibilities are endless.

For more stay following my blog. I’ll post some nice features of this grid later on.