Difference from Designer preview to actual html page

I have added a new html document to a Web context we have used for years.

In Designer, it looks great

But after running through the Workflow process, the html page losses all the lines/borders on my tables

Any ideas why this is happening?

Hello @rdaneel72,

Given the path shown in the address bar of your web browser, I expect that you are viewing the *.html file created by the Workflow process in your web browser instead of the result returned by the Workflow process (which starts with either the Inputs-HTTP server plugin, found under Plug-In Bar pane → Legacy tab, or the NodeJS Server Input Workflow plugin). Because I see that, for example, the font styling is also different.

This view does not load the CSS file required for styling. To fix this, either set up a separate workflow using the NodeJS Server input as described, or enable the ‘Embed all resources’ option in the Create Web Content task. The latter ensures that all CSS styles are included directly in the HTML file.

Thank you, @Marten and @Erik for your replies. They went so far over my head I need a telescope to see them, but you have given me a place to start tinkering.

This template and the accompanying Workflow process were originally designed by Ricoh, our OL Connect licensor. to provide emailed daily notices for one of our credit union clients. The HTML pages generated by the Create Web Content plugin are merely for proofing, as the actual end result of the Workflow process is an XML file we upload to Ricoh to distribute through their email server. I am reluctant to alter the Workflow process.

The template contains two dozen different notices types, each activated by a conditional script keyed to an “id” flag in the data. We have added new notices to this template over the years, many with tables, and have not experienced this before.

I will dummy-up a test file for Ricoh to send and see how the tables look.

As always, thank you for the quick responses and ideas. This community is an invaluable resource for me just starting to dig into Connect and what it can do.

2 Likes

Every time I come to this forum I understand a little bit more about how Connect works.

This process creates “Web Content,” but not really. @Erik mentioned that the style-sheet is not loaded, and that makes sense since the end product is not a web page at all.

Using the wizard in Connect Designer to create tables references the default-table style sheet, but if that is not loaded, all that styling is lost. Adding the style information inline for each table has solved my problem.

Thanks for getting me into the right headspace to noodle out what is happening.

I’m sorry for adding another reply - I realize you already consider the matter resolved, but converting style rules to inline styles does not sound like a fun task. You should not have to do that.

Since you want the HTML to be self-contained, “Embed all resources” needs to be turned on. This is not the default value. After adding a new instance of the Create Web Content task, “Embed all resources” will initially be turned off.

Please double-check that this option is turned on in the Create Web Content task properties:

image

No need to apologize. Any insight is welcome, and often gives me a direction to explore.

The end result of this process is NOT Web Content. While the Create Web
Content tool is used to create HTML pages for proofing, this process writes the HTML to an XML file for upload to Ricoh, who then sends out HTML email notices on our behalf.

Ricoh developed this process to their specifications for us. This is how they do emails.

It made sense once I understood how Connect works. The style sheets are not included in the output file, so any style information would have to be in the HTML/XML. Luckily, the styling for these tables is very minimal, a simple copy/paste from style sheet to source code.

The active discourse on this forum has been invaluable for me. Every time I come here I understand Connect a little more. Please, never stop offering ideas and options.

1 Like