Script for users to sort tables in help outputs

This forum is for all Flare related Tips and Tricks.
Have a tip or trick you use while working in Flare? Share it here.
Post Reply
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Script for users to sort tables in help outputs

Post by NorthEast »

This came up in a separate discussion, and thought it'd be useful to share this nice little script that I found.

The Standardista Table Sort script allows the user to sort tables in your WebHelp outputs.
(I've only tried it in WebHelp, it'll probably work in HTML Help and DotNetHelp too.)

It doesn't require too much effort; all you have to do is add some script files to your project, and any tables (of a particular class) can be sorted by the user in the output. It will also work for Flare table stylesheets, with a minor change to one of the scripts.

It works pretty well, and only sorts the table body - the header and footer remain ok.
Standardista table sort.png
You can download the script here:
http://www.workingwith.me.uk/articles/s ... le_sorting

Set up the script files in your project
1. Copy the three js files into your project: standardista-table-sorting, css.js, common.js.
2. Add links to these files in the head section of a master page; in this example I've put the scripts in the folder Resources/Scripts, so the links from the MasterPages folder are:

Code: Select all

<script src="../Scripts/common.js" />
<script src="../Scripts/css.js" />
<script src="../Scripts/standardista-table-sorting.js" />
3. In your stylesheet, add a new class to the table tag called sortable (i.e. add table.sortable).

Make your tables sortable

(A) If you don't want to use a Flare table stylesheet, then just assign the class sortable to your tables. The script will automatically make any table sortable that has the class table.sortable.

(B) If you do want to use a Flare table stylesheet, then modify the script file standardista-table-sorting.js.
Find the following line:

Code: Select all

if (css.elementHasClass(thisTable, 'sortable')) {
Then change the sortable class name to match your table style name; e.g. if your table stylesheet filename is MyTable, then its class would be TableStyle_MyTable.

Code: Select all

if (css.elementHasClass(thisTable, 'TableStyle_MyTable')) {
Whilst the script is pretty good, it won't know about things like patterns on rows; so these will move when you sort columns.
You do not have the required permissions to view the files attached to this post.
TechnicalDisaster
Propeller Head
Posts: 61
Joined: Mon Jan 03, 2011 12:09 pm

Re: Script for users to sort tables in help outputs

Post by TechnicalDisaster »

Thanks for sharing. :!:
MAD Certified Version 6
Flare 7.1
shwetae
Propeller Head
Posts: 21
Joined: Wed Jul 21, 2010 1:20 pm
Location: Pune,India

Re: Script for users to sort tables in help outputs

Post by shwetae »

Thanks for sharing. :D
mmtechwriter
Jr. Propeller Head
Posts: 6
Joined: Mon Feb 21, 2011 9:00 pm

Re: Script for users to sort tables in help outputs

Post by mmtechwriter »

Thanks for the very nice tip and a handy script. In my case, I am able to sort in Preview window, but it doesn’t work in the final output. Also, the navigation link control at the top of the topic disappears. I must specify that I am generating WebHelp output.

Has anyone encountered this problem? Please do share, It will really help to get your views on this.

Thanks
rogersm
Propeller Head
Posts: 97
Joined: Fri Nov 07, 2014 4:29 am

Re: Script for users to sort tables in help outputs

Post by rogersm »

Thanks for this. I tried in html output. For some reason, the row borders seem to disappear on some rows.

For example, before the sort, the table looks like the image below labelled "Before sorting the table".
beforesort.PNG
However, after I sort Heading 1, the Zebra and Dog rows lost the border between them (see the image labelled "After sorting the table". Did this occur for anyone else?
aftersort.PNG
You do not have the required permissions to view the files attached to this post.
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Script for users to sort tables in help outputs

Post by simona »

Cool feature, thanks for including it here!

We just tested this and the rows do not sort when clicking on the column title. The column title DID change and appears like a link now, but clicking on it doesn't change the order of rows in the table - neither in the preview nor in the output.

Output type is HTML5 and we are using TableStyles. We followed the instructions as outlined in this thread.

Anybody have any idea why it doesn't work?
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Script for users to sort tables in help outputs

Post by NorthEast »

OK, it's been 6 years since I posted that!

It still works fine for me though in HTML5 output.
The only difference from when I originally posted is that the class name for table stylesheets now use a hypen (TableStyle-MyTable) instead of an underscore (TableStyle_MyTable).

Code: Select all

if (css.elementHasClass(thisTable, 'TableStyle-MyTable')) {
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Script for users to sort tables in help outputs

Post by simona »

Thanks, Dave, for taking the time to check for any differences, much appreciated.

I'm still trying to find out why it doesn't work in my project though.

I have this in the head of my MasterPage:

Code: Select all

		<script src="../Scripts/common.js" />
		<script src="../Scripts/css.js" />
		<script src="../Scripts/standardista-table-sorting.js" />
I have ensured that this is indeed the MasterPage assigned to the target in question.

I have the 3 scripts in the Resources folder:
Bildschirmfoto 2018-01-31 um 16.16.31.png
And in the standardista-table-sorting.js script I have changed the sortable class name to match my Flare table style name:

Code: Select all

if (css.elementHasClass(thisTable, 'SortableCCTableStyle3')) {
				this.makeSortable(thisTable);
			}
which is the one I created for testing this and the one I also assigned to the table in my test topic.

When I build this, however, it looks like it has created a sortable table (column titles appear as links and are clickable, mouseover "Click to sort" appears, too) but there is no action when clicking on the title. No sorting. No error, nothing changes at all.
Bildschirmfoto 2018-01-31 um 16.29.37.png
Has anybody experienced that, too? Anything I have overlooked?

Update: The column titles are all variables in my project. Could this have something to do with it?
You do not have the required permissions to view the files attached to this post.
Last edited by simona on Wed Jan 31, 2018 9:27 am, edited 2 times in total.
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
NorthEast
Master Propellus Maximus
Posts: 6359
Joined: Mon Mar 05, 2007 8:33 am

Re: Script for users to sort tables in help outputs

Post by NorthEast »

simona wrote:And in the standardista-table-sorting.js script I have changed the sortable class name to match my Flare table style name:

Code: Select all

if (css.elementHasClass(thisTable, 'SortableCCTableStyle3')) {
				this.makeSortable(thisTable);
			}
which is the one I created for testing this and the one I also assigned to the table in my test topic.
The Flare table style name needs to match the style name that Flare uses in the output.
So you need to add TableStyle- before the name; e.g. yours would be TableStyle-SortableCCTableStyle3
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Script for users to sort tables in help outputs

Post by simona »

yours would be TableStyle-SortableCCTableStyle3
Right, of course, thank you!

I just tried that and it did not change the behavior in my output. :(
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
simona
Propeller Head
Posts: 56
Joined: Wed Feb 27, 2013 3:16 am
Location: Bremen, Germany

Re: Script for users to sort tables in help outputs

Post by simona »

Since the sorting scripts did not work for me I asked our tech guys and we found a solution. I am posting it here just in case anyone else runs into the same problem.

The problem was not with the integration of the scripts, that part worked fine. However, we use Flare variables in our table headings. In our HTML5 output these are generated with span-tags as the example shows:

Code: Select all

<th class="TableStyle-Name-Header"><span class="Variable Name">Variable Definition</span>
</th>
As a result, the table doesn't sort when clicking on the header. We had to modify the sorting script by adding the following:

Code: Select all

// if link contains a span element for some reason
// go one level higher
if ( linkEl.tagName == 'SPAN' ) {
	linkEl = linkEl.parentNode;
}


We added this in standardista-table-sorting.js right after

Code: Select all

// this method to be called
var linkEl = getEventTarget(e);
Now it works.
Flare 2023 r3, Capture 7
TechWriter with 10+ years Flare experience (software)
99% remote
djohnson
Propeller Head
Posts: 38
Joined: Tue May 24, 2011 4:23 pm

Re: Script for users to sort tables in help outputs

Post by djohnson »

This worked beautifully for me, with this NOTE:

I generally code my tables by hand, and I omit the THEAD, TBODY, etc.

These scripts expect them, so I added them in (along with a comment in the HTML and the CSS so I would know why next time.)

Thanks, Dave, for this post and the follow-up.
Don Johnson
Flare 2020r3, Windows 10 in a Parallels VM on a 16" MacBook Pro [as of March 2021]
Post Reply