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.

Script for users to sort tables in help outputs

Postby Dave Lee on Thu Jan 13, 2011 3:13 am

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/scripting/standardista_table_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.
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Script for users to sort tables in help outputs

Postby TechnicalDisaster on Thu Jan 13, 2011 8:45 am

Thanks for sharing. :!:
MAD Certified Version 6
Flare 7.1
TechnicalDisaster
Propeller Head
 
Posts: 61
Joined: Mon Jan 03, 2011 12:09 pm

Re: Script for users to sort tables in help outputs

Postby shwetae on Tue Sep 27, 2011 2:48 am

Thanks for sharing. :D
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

Postby mmtechwriter on Mon Jan 30, 2012 12:19 am

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
mmtechwriter
Jr. Propeller Head
 
Posts: 6
Joined: Mon Feb 21, 2011 9:00 pm

Re: Script for users to sort tables in help outputs

Postby rogersm on Tue May 24, 2016 2:04 am

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.
rogersm
Propeller Head
 
Posts: 73
Joined: Fri Nov 07, 2014 4:29 am

Re: Script for users to sort tables in help outputs

Postby simona on Fri Sep 29, 2017 3:37 am

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 2019, Lingo 11, Capture 7
Win10 ThinkPad
(Sole TechWriter for two Scrum teams in an agile software development environment)
simona
Propeller Head
 
Posts: 49
Joined: Wed Feb 27, 2013 3:16 am
Location: Hamburg, Germany

Re: Script for users to sort tables in help outputs

Postby Dave Lee on Fri Sep 29, 2017 5:27 am

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')) {
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Script for users to sort tables in help outputs

Postby simona on Wed Jan 31, 2018 8:36 am

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 2019, Lingo 11, Capture 7
Win10 ThinkPad
(Sole TechWriter for two Scrum teams in an agile software development environment)
simona
Propeller Head
 
Posts: 49
Joined: Wed Feb 27, 2013 3:16 am
Location: Hamburg, Germany

Re: Script for users to sort tables in help outputs

Postby Dave Lee on Wed Jan 31, 2018 8:56 am

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
Dave Lee
Master Propellus Maximus
 
Posts: 5650
Joined: Mon Mar 05, 2007 8:33 am
Location: UK

Re: Script for users to sort tables in help outputs

Postby simona on Wed Jan 31, 2018 9:29 am

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 2019, Lingo 11, Capture 7
Win10 ThinkPad
(Sole TechWriter for two Scrum teams in an agile software development environment)
simona
Propeller Head
 
Posts: 49
Joined: Wed Feb 27, 2013 3:16 am
Location: Hamburg, Germany

Re: Script for users to sort tables in help outputs

Postby simona on Tue Feb 06, 2018 2:49 am

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 2019, Lingo 11, Capture 7
Win10 ThinkPad
(Sole TechWriter for two Scrum teams in an agile software development environment)
simona
Propeller Head
 
Posts: 49
Joined: Wed Feb 27, 2013 3:16 am
Location: Hamburg, Germany

Re: Script for users to sort tables in help outputs

Postby djohnson on Tue Jul 24, 2018 4:02 pm

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 2017r3 and 2018, Windows 10 Spring 2018 update in a Parallels VM on a 5K iMac running macOS 10.13.4 [as of July 2018]
djohnson
Propeller Head
 
Posts: 35
Joined: Tue May 24, 2011 4:23 pm


Return to Tips and Tricks

Who is online

Users browsing this forum: No registered users and 1 guest