Using tables in user interfaces, it is often necessary to be able to sort the table content according to the elements contained in a specific column. The xUML UIs implicitly rely on the data types provided by the jQuery library and plug-ins. To render tables and their contents, the Datatables plug-in is used. This plug-in already provides standard sort functions for strings or numeric fields. Some date formats are provided as well.
However, you sometimes need custom sort functions, e.g. a function which sorts a column according to a date in German long format which may or may not be followed by additional characters.
This is easily possible and integrates smoothly with the xUML UI.
- Write a JavaScript (<your filename>.js) containing two sort functions - one for ascending and one for descending sorting. You can download a sample file from our documentation and adapt it.
- Add a 'detector' method which detects whether a column is of the requested data format - otherwise you would have to explicitly specify the format of your column (see also the sample file).
- Import the JavaScript file as a JavaScript file resource into your project.
- Add the imported resource to your component diagram and draw a use dependency from the UI Repository to that file resource.