Sorting made easier

Sorting made easier

Hi all,

Do you know the 'made easy' series, by João Quitério? (Check here and here if you don't).

Well I've made a sequel to it that I call Sorting made easier

Attached you'll find a solution ready to be deployed on a 4.0.x server.

You can also see a demo in

I'll post a tutorial video in just a second....

(Edited 15-12-2006):

Updated solution for version 0.2!

New features:
- Supports more than one type of pictures configured by the parameter Image : 1 - small gray, 2 - small white, 3 - large blue, 4 - large white/blueish, any other value selects the URL based images.
- Supports specifying the Descending and Ascending order image through URLs.

Demo updated. Check the 2nd Table Record for an example of URL based images.

I'm not planning on editing the video :-P

(Edited 19-12-2006):

Updated solution for version 0.3!

Bug fixes:
- Fixed wrong alert message for empty table records. These are ignored now.

One extra thing....

If you have empty header columns, this is usual when you have action buttons per row, you must include this on the ColumnPosition string.

For example:

¦ ¦ Column1 ¦ ¦ Column2 ¦

The string would be ",1,,2" for example. It is irrelevant what you set for this positions because the algorithm ignores empty headers, so "0,1,0,2" would also be a valid definition.

If the string doesn't match the number of columns of the table record an error will be shown and no sorting will be configured for the table record.


Great pattern!

I typed in some notes during my first attempt to use it that migh be helpfull for reference:

1. Publish the SortingWidget solution
2. Publish the Text extension (can be obtained here:
3. Create your table records and populate it with a query
4. Make sure that the header labels are not enclosed by a paragraph
5. Add reference to the Sorting eSpace
6. Add a reference to the scriptaculous extension
6.1 Include an unescaped expression in your screen with the text: ("<script language='javascript' type='text/javascript' src='prototype.js'></script>")
7. Edit your eSpace’s style sheet and add the following style: .Invisible{display:none;}
8. Drag and drop the SortWidget to your Web Screen
9. Fill in the SortWidget parameters
9.1 HeaderCssClass
9.2 TableRecordId
9.3 ColumnPosition
9.4 DefaultFieldPosition
9.5 Image
9.6 DescImageUrl
9.7 AscImageUrl
10. Add order by parameter to your query
11. Set the query OrderBy parameter to GetOrderBy(<yourTableId>)

I am not sure about point 6.1, but this was the only way to make work.
Hi André.

I'm using your sorting widget, but I ran into a small problem I think. It goes as follows.
I define a default order column but when I enter the screen the column I selected is signaled by the image, that the table record is sorted by that column, but it is not. I solved the problem by using isLoadingScreen, forcing the sorting is there no other way?

Hi André

I´m new in OutSystems IDE, and i would like to use you solution, but i don´t have permissions to upload any solution. Do you now why?

Hi all,

With the release of the Sorting Widget solution this thread has been discontinued.
Follow up here

If you'd like to download the solution click here