[Solved] Text-Overflow Ellipses

December 05, 2016, 08:53 AM

Hi,

I'm trying to add text - overflow ellipses to the table columns so that if the values in the table column exceed certain width it shows ellipsis instead of the complete text.
E.g. This is some long text that...

Thank you in advance.

This message has been edited. Last edited by: MeM,

December 08, 2016, 09:50 PM

Tamra

MeM,

You could set up a define field with the text to a certain point ( number of characters ) then concatenate the '...'

Simplistic way:

DEFINE FILE XX
NEWTEXTFLD/A13 = EDIT(fielname,'9999999999...');
END

The above can be combined with IF/THEN/ELSE based on what you want to do. You can set up another define field with the actual text length ( ARGLEN )
and use this to determine if you need to concatenate the ellipses or not.

Also, search the forum for ARGLEN, SUBSTRING and concatenation examples.

Thank you for using Focal Point.
Tamra Colangelo
IBI Focal Point Moderator

December 09, 2016, 04:11 AM

Wep5622

The problem with this is that you usually want to cut off the text at a certain length in centimeters or pixels (or inches in some countries).

That's difficult to do with a proportional font and requires that the font and size used are a given. Without those, it's not possible to calculate how many characters of a string fit within a given width.

I don't think WF has any built-in functionality to do this, so you'll either have to look at external code/tools or figure a method of calculating a string width for a specific font using WF.

There are open source libraries to calculate string widths for a given font and size, so it should be possible to write a C-function (or any of the other external languages that WF supports) and create a WF function to do this.

Another approach is to create a table with characters and their relative widths for a given font; that table can then be used to look up the relative width for each character in the string.
You'll want to create a function to split your text into separate characters and calculate the cut-off string-length where it still fits within the given width.
Perhaps doing this in passthru SQL would actually be easier.

And don't forget to take the length of the elipsis symbol into account

The third option is to open a case asking IBI to include something like this. That will take a while though, usually new features go into some future major release.

December 09, 2016, 06:39 AM

Tony A

I am sure that the keyword of SQUEEZE within the style used to do this but the only reference that I can find relates to using it in PDF or PS formats. It doesn't add the ellipses but an exclamation mark.

Or maybe it was only ever available for PDF and PS formats.

Alternatively you could play by using something like this -

-HTMLFORM BEGIN
<!DOCTYPE html>
<style>
td {
  vertical-align: middle !important;
}
.truncate {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: red;
  border: 1px solid #000;
}
</style>
-HTMLFORM END

TABLE FILE CAR
PRINT MODEL
   BY COUNTRY
   BY CAR
ON TABLE SET PAGE NOLEAD
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
  grid=off, units=in, $
-* Note that this css file doesn't exist but allows the style within the HTMLFORM
-* section to be used. Weird I know,but it works :)
  type=report, CSSURL='http://localhost:8080/approot/baseapp/doesnt_exist.css', $
  type=data, column=MODEL, class=truncate, $
ENDSTYLE
END
-RUN

I should add that this should work but doesn't in my browser

December 09, 2016, 08:52 AM

Tony A

Ok, so TD tags do not like the "truncate" style, so here's a sledge hammer to crack a nut (well it is Christmas!) -

-HTMLFORM BEGIN
<!DOCTYPE html>
<style>
td {
  vertical-align: middle !important;
}
.truncate {
  width: 150px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: red;
  border: 1px solid #000;
}
</style>
-HTMLFORM END

DEFINE FILE CAR
  P_MODEL/A70 = '<div class="truncate">'||MODEL||'</div>';
END
TABLE FILE CAR
PRINT P_MODEL
   BY COUNTRY
   BY CAR
ON TABLE SET PAGE NOLEAD
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
  grid=off, units=in, $
ENDSTYLE
END
-RUN

December 09, 2016, 09:00 AM

MeM

Thank you Tamra and Wep5622 for the ideas.

December 09, 2016, 09:01 AM

MeM

Thank you so much Tony. Is it possible, if I hover over the value it shows the complete name?

December 09, 2016, 09:07 AM

Tony A

Yes, you would need to add further CSS though -

-HTMLFORM BEGIN
<!DOCTYPE html>
<style>
td {
  vertical-align: middle !important;
}
.truncate {
  width: 100px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: red;
  border: 1px solid #000;
}
.truncate:hover {
    text-overflow: inherit;
    overflow: visible;
}
</style>
-HTMLFORM END

DEFINE FILE CAR
  P_MODEL/A70 = '<div class="truncate">'||MODEL||'</div>';
END
TABLE FILE CAR
PRINT P_MODEL
   BY COUNTRY
   BY CAR
ON TABLE SET PAGE NOLEAD
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
  grid=off, units=in, $
ENDSTYLE
END
-RUN

December 09, 2016, 09:14 AM

MeM

Thank you so much Tony. It worked.

December 09, 2016, 10:22 AM

MeM

Tony,

Thank you for all your help. But this stopped the HFREEZE functionality. Is there any alternative, I can use HFREEZE too in my code?

December 09, 2016, 10:42 AM

Tony A

You'd have to have a play yourself. HFREEZE adds all sorts of goodies to the mix including JavaScript and CSS libraries. Look at the output within your browser using developer tools to understand how you might be able to merge the two requirements.

Of course this does highlight the need to be explicit when creating your post, in what you are trying to do as there could always be conflict between approaches, especially if you are using HFREEZE or Active Reporting.

T

In FOCUS since 1986	WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2
	WebFOCUS App Studio 8.2.06 standalone on Windows 10