topic Re: HTML table styling does not work with with "Keep Source Formats" in Qlik NPrinting

HTML table styling does not work with with "Keep Source Formats"

adang — Tue, 18 Jan 2022 15:54:30 GMT

Like the title said; HTML styling like border lines, padding space do not work when "Keep Source Format" is checked.

This is quite an issue when the values are formatted with text colors, bolden font when certain conditions are met and could not be recreated in NPrinting. The Qlik formatting will not be preserved when disabling Keep Source Format.

Has anyone here found a way to get around this?

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Tue, 18 Jan 2022 16:00:16 GMT

How the chart looks in Qlik

Qlik formatting preserved when Keep Source Format checked; but does not look any good without HTML styling for the border.

Lost all the Qlik formatting when "Keep Source Format" disabled to make HTML styling work

Re: HTML table styling does not work with with "Keep Source Formats"

Frank_S — Wed, 19 Jan 2022 00:33:07 GMT

Hi @adang

If you want more control over your HTML NP report output I suggest using a tool like the table generator found on this site. It is an external link which I found to be safe but use at your discretion.

https://www.tablesgenerator.com/html_tables#

I use this tool to format my table to make it appear as I would like to see it in my report output

In the template editor

copy paste the table generator code into the NP template editor.
Insert the header titles and table data
remove the 'keep source formats' check box
use the 'hide' option for the 'show header' property. (This prevents duplicate headers)

See below for a sample of the report design and output.

Hope this helps...

Re: HTML table styling does not work with with "Keep Source Formats"

Lech_Miszkiewicz — Wed, 19 Jan 2022 03:02:09 GMT

Hi @adang,

What are the conditions which cannot be recreated in NPrinting? I know it may not obvious but as far as I am concerned I was able to do quite a lot with HTML tables.

I understand that there might be additional work required but you should be able to achieve all sorts of conditional formatting by creating CSS syntax directly in Qlik for each corresponding row (and/or cell).

we discussed this here:

https://community.qlik.com/t5/Qlik-NPrinting-Discussions/Nprinting-HTML-How-change-background-color-based-on-the-data/td-p/1606963

Re: HTML table styling does not work with with "Keep Source Formats"

Ruggero_Piccoli — Wed, 19 Jan 2022 08:27:05 GMT

Hi,

Please refer to https://help.qlik.com/en-US/nprinting/May2021/Content/NPrinting/HTMLReports/HTML-formatting.htm.

"Keep source format" activated tells to Qlik NPrinting to do its best efforts to replicate the original format in QlikView or Qlik Sense. Best efforts in the meaning that it is not always possible to replicate perfectly the original style. This option is active by default.

If you uncheck "Keep source format" original formats are removed and you can customize it by using the native features of the type of template you are developing. For example with HTML you can write custom HTML style code.

Best Regards,

Ruggero

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Wed, 19 Jan 2022 14:26:15 GMT

Hey thank you for the suggestions! However, I have read that thread before starting this new one.

And here is an example: values in a specific column (metric) represent number of days to complete an order. this order is then tied to a "deliver by" date; and this "day to make" metric will be colored as red or green based on the comparison to the number of day between report date and delivery by date. As far as I know, this conditional formatting can only be done in Qlik. Because the HTML table does not look at the line item level. Putting a table here so that it's easier to show what I meant.

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Wed, 19 Jan 2022 14:27:41 GMT

This is not helping because as you can see in the screenshots I sent in the initial post, the borders do not show in the HTML table and make a quite messy table.

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Wed, 19 Jan 2022 14:31:03 GMT

The issue here is not about creating HTML tables, because as you can see in the 3rd screenshot, it's already done there. However, in order to show the table borders, I had to disable keep source format, which made the value loose conditional coloring on the text value.

Re: HTML table styling does not work with with "Keep Source Formats"

Ruggero_Piccoli — Wed, 19 Jan 2022 15:46:44 GMT

Hi,

I understand what you want to have but you cannot "partially disable" the "Keep source format"; you have it enable, so the conditional format of the number works, or you disable it and loose all formats. The "Keep source format" enabled does its best efforts to replicate the Qlik Sense formats but it could be not not able to do everything in some cases and HTML has not advanced features to format the output like Excel for example.

You could try to export the original table as an image instead of an HTML native table. Are you developing an HTML report to embed it in the email body? What is your final goal?

Best Regards,

Ruggero

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Wed, 19 Jan 2022 15:52:59 GMT

Yes; it's an HTML report. I have got to the part where we could publish the data in text with HTML tables. However, there's a requirement that the values need to be color-coded so that it'd be easier for the recipients to identify where the issue is. And this is where I am stuck.

This is not a problem, if we could have an option in Qlik to force the HTML column to show borders. But that's not an option right now I feel.

Re: HTML table styling does not work with with "Keep Source Formats"

Ruggero_Piccoli — Wed, 19 Jan 2022 15:56:03 GMT

Hi,

Could you share some screenshots of the template structure?

Are you importing the source table as a single tag? Did you tried to follow @Frank_S 's suggestion and create a native HTML table with borders defined in HTML and inserting Qlik NPrinting column tags in it?

Best Regards,

Ruggero

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Wed, 19 Jan 2022 15:59:38 GMT

a native HTML with borders defined is what I created. But the styling defined in the tags won't work until I disable "Keep Source Format".

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Fri, 21 Jan 2022 13:42:51 GMT

@Ruggero_Piccoli : do you see any issues with the HTML code? it works if I disable "Keep Source Format" but that will take away the conditional format coming from Qlik on the line items; which I am not seeing a way to create in HTML.

Re: HTML table styling does not work with with "Keep Source Formats"

Lech_Miszkiewicz — Fri, 21 Jan 2022 23:15:01 GMT

Hi @adang , @Ruggero_Piccoli , @Frank_S

This is my example:

Simple table in Qlik Sense with:

Dimension 1 = Dim1
Dimension 2 = Dim2
Measure: Sum(Expression)
1. This measure has variable vTextColour set as font/text colour
2. This measure has vcariable vBackgroundColour set as cell background colour
Measure which shows me what is the font/text colour RGB value
Measure which shows me what is the background colour RGB value

I bring this table to HTML Report and as shown on the picture I use Dimension 1, Dimension 2, and Measure to build my table content and another 2 columns I use to populate style values by passing their respective tags as marked on screenshot:

font color as $(vTextColour) column from my Qlik Sense table
background color as $(vBackgroundColour) column from my Qlik Sense table

Please note that for style I had to disable HTML Encode parameter as shown on screenshot

When you preview my template you get this - table where every cell can be controlled conditionally based on values calculated in Qlik Sense.

I said from the very beginning that this requires planning and appropriate design but certainly is possible.

cheers

Lech

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Fri, 21 Jan 2022 23:18:24 GMT

Thank you @Lech_Miszkiewicz ! This is something that I had not known about until you showed me how to do it in details like this. I will give it a try and let you know the outcome!

Re: HTML table styling does not work with with "Keep Source Formats"

Lech_Miszkiewicz — Fri, 21 Jan 2022 23:19:49 GMT

Hi @adang

HTML does not look at line but... there is big BUT....

you can expose value of the colour in line by calculating it in Qlik and passing it down to HTML template as actual colour value.

I wrote whole step by step process on how to achieve this below.

so - yeah, this definitely is possible.

Re: HTML table styling does not work with with "Keep Source Formats"

Lech_Miszkiewicz — Fri, 21 Jan 2022 23:25:52 GMT

@adang let us know how you go - good luck

Re: HTML table styling does not work with with "Keep Source Formats"

Lech_Miszkiewicz — Fri, 21 Jan 2022 23:33:19 GMT

by the way - you may be interested in reading this as well - this is completely a whole different concept i wrote on how to utilize nprinting and passing through whole html code using qlik sense measure:

https://nprintingadventures.com/2020/04/24/how-to-build-html-pivot-table-in-nprinting/

cheers

Re: HTML table styling does not work with with "Keep Source Formats"

Ruggero_Piccoli — Mon, 24 Jan 2022 09:17:57 GMT

Thanks @Lech_Miszkiewicz for sharing this solution!

Re: HTML table styling does not work with with "Keep Source Formats"

adang — Mon, 24 Jan 2022 14:40:35 GMT

Your solution on the line item formatting in HTML works! Thank you @Lech_Miszkiewicz !

About the pivot table in HTML, it's a very creative approach! And I think it's the best approach if you have an undefined list of dimensions.

In this very same project, I found a quick and easy way to get this done. Since I have three specific values for the dimension, I just created a metric calculated specifically to a dimension value, and use <th> tags with colspan style to create a fake pivot table like in the screenshot.