Export to Excel Styling

1 year ago

Hi Jon

I've just spent some considerable time researching this very issue as Logi support didn't seem to know what works and what doesn't and why so this should help:

CSS rules for exporting from Logi to Excel
------------------------------------------

It’s common to want to export tabular reports from Logi into Excel, you can also export the styling from the HTML version of the table into Excel but this requires a very specific set of rules to be followed when defining the css files that control the styles of the output. It’s not the case that if it displays correctly in the browser it’ll display correctly in Excel.

Class definition rules
----------------------

Writing css class definitions does not normally require tight formatting rules to be applied as HTML will ignore extra spaces, tabs and line-breaks. However, when writing css class definitions that will be used to format data exported to Excel you will need to format them in a very specific way.
Note that minified css will not work while exporting to Excel as the Logi Excel export engine requires definitions to include spaces in very specific places.

The opening brace
-----------------

A space is needed between the class name and the open brace but is not necessary after the open brace or before the close brace so:
This works:
.fontRed {color: Red;}

This doesn’t work:
.fontRed{color: Red;}

Single and multi-line definitions
---------------------------------

Many class definitions have more than one declaration for example setting a font colour and a font weight in the same class. There are four specific ways you might write this:

1. .myFont { color: red; font-weight: bold; }
2. .myFont{color:red;font-weight:bold;}
3. .myFont { color: red;
font-weight: bold; }
4. .myFont {
color: red;
font-weight: bold;
}

The only one of these that will work is definition number 4, when you have more than one declaration in a class definition you must use this format only. Each declaration must be on its own line and the first declaration can not be on the same line as the open brace, likewise the closing brace must be on its own line as well.
Formats 1 and 2 above simply does nothing while format 3 will cause Logi to throw an error and will prevent the export for completing.

Using !important
----------------
When you use the !important declaration priority modifier you must ensure that there is a space between the declaration value and the priority modifier. Here are some examples:

1. .myFont {
color: red!important;
font-weight: bold;
}
2. .myFont {
color: red !important;
font-weight: bold;
}

Definition 1 above will cause the class to be ignored while definition 2 will work correctly. Always ensure you have that all important space before !important.

Colour definitions
------------------

When defining a colour to be used the Excel export you are limited in the way you can specify the colour value. The Logi Excel export engine will only interpret the colour value if you use either a web safe colour name (e.g. Red) or the 6 character hex code for a colour (e.g. #ff0000).
If you create the css file directly in Logi it will offer you a list of web safe colour names to choose from, a full list of these can be found at HTML Color Names (https://www.w3schools.com/tags/ref_colornames.asp), this gives large colour swatches containing the colour name and its corresponding 6 character hex value.
Any colour can be specified using a 6 character hex code so if you want to use your brand specific colours you would be able to do so using a hex value where there is no named colour.

The export engine does not support alpha channel definitions so 8 character hex values will not work and will be ignored. The engine does not support RGB, RGBA, HSL or HWB colour definitions, anything using these constructs will cause the class definition to be ignored.

Here are some examples:

Will work
---------
1. .myFont {
color: red !important;
font-weight: bold;
}
.myFont {
color: #ff0000 !important;
font-weight: bold;
}

Will not work (class will be ignored)
-------------------------------------
Note that the class will be ignored and not just the declaration so in this instance the font would be neither red or bold.
1. .myFont {
color: RGB(255, 0, 0) !important;
font-weight: bold;
}
2. .myFont {
color: RGBA(255,0,0,1)!important;
font-weight: bold;
}
3. .myFont {
color: RGBA(255,0,0,0.5)!important;
font-weight: bold;
}

Working and non-working examples
--------------------------------

Working examples
----------------
/* Note in these examples the colour name is not case sensitive */
.fontRed {color:red;}
.fontRed { color:red;}
.fontRed { color: RED; }
.fontRed {color:#ff0000;}
.fontRed { color: #ff0000;}
.fontRed { color: #ff0000; }
.fontRed {color:red !important;}
.fontRed { color:red !important;}
.fontRed { color: Red !important; }
.fontRed { color: #ff0000 !important; }
.fontRed { color: #FF0000 !important; }
.fontRed {
color: red;
}
.fontRed {
color: RED;
}

Non-working examples
--------------------
/* Note in these examples the colour name is not case sensitive */
No space before opening brace
.fontRed{color:red;}

Use of RGB and RGBA
.fontRed { color:RGB(255, 0, 0); }
.fontRed { color:RGBA(255, 0, 0, 1.0); }
.fontRed { color: RGBA(255, 0, 0, 0.5); }

Use of 8 character hex
.fontRed {color:#ff000000;}
.fontRed { color: #ff00000e; }
.fontRed { color: #FF0000!important; }

Multi-line definition starts on same line as opening brace
.fontRed { color: red;
font-weight: bold; }
.fontRed { color: red;
font-weight: bold;
}

Where to place class definition
-------------------------------
Generally in Logi you would place a css class either on the element you wish to style or on its direct parent, so in the case of styling a label as bold you would normally place the bold class definition on the Label element's Class attribute.

However, when you are exporting a table to Excel Logi requires that the class is specified against the containing DataTableColumn element's Class attribute. This will cause the style to be added as expected to the label, however this might require some conditional formatting to make the table have the look and feel you want in both the browser and in Excel.

Specifying the class in the wrong place will cause it to be ignored when exported to Excel.

Please let me know how you get on and if you find any additional rules or have any issues with the details above. I love to hear how this works for you...

You can contact me at neil.quinby@format14.com.

1

VISUI

Logi Info Ninja
1 year ago

Neil, Great work. Your post triggered my memory and you are absolutely correct. Thanks for the detailed response.

John Sweazen - VISUI

0

Neil Quinby

1 year ago

You're welcome. I've only just started to get into this community as I found it rather dead in the past but that's no excuse for not participating is it ;-)

Regards

Neil

0

Export to Excel Styling

Comments

Didn't find what you were looking for?