VF page for "solutions" - rendering differences

Hi folks,

I'm creating a VF page that will make it easier for our support engineers to produce PDFs of knowledge base "solutions". This is incredibly easy with the VF "renderas" tag - all I need is a simple page that shows the solution and some extra text around it.

The page should be dirt simple...the problem I'm facing is that the way the solution detail renders when viewed on the "solutions" tab within SF is quite different than how it's rendering when used in my VF page. I find that the spacing around images is vastly different for example. Looking at the raw HTML, it looks like VF is doing things correct (ie. the HTML has a lot of breaks, etc.) yet the Solutions page is quite different.

So the obvious question...how can I get my VF page to look like the solutions page? For what it's worth, here's the very simple code. My problem is with the SolutionNote (which is stored in SF as html).

<apex:page standardController="Solution"> <h1>{!solution.SolutionName}</h1> <h2>Solution Number:</h2> {!solution.SolutionNumber} <apex:pageBlock title="Solution Details"> <apex:outputText escape="false" value="{!solution.SolutionNote}" /> </apex:pageBlock> </apex:page>

Any pointers are appreciated.

Cheers

February 25, 2010
·
Answer
·
Like
0
·
Follow
0

stephan
Part of the issue here may be due to the fact that on the solution page the HTML is rendered inside of an iframe, whereas on the VF page if isn't. In a simple test, one thing I noticed was that images placed next to each other (having align="left" in the HTML), would wrap to the next line in the solution page, preseumably because the width of the iframe wasn't wide enough to accomodate both images, whereas in the VF they appeared next to each other.

Could you provide some more specifics about the deiscrepancies you're seeing, and perhaps include the HTML that's being rendered?

February 25, 2010
·
Like
0
·
Dislike
0

guppy
Yeah, it's the iframe that's causing the difference..or more specifically, the style that is being applied by the iframe (since the iframe doesn't seem to render it). By reverse engineering that, I've now got the solution to display "the same" in my VF page as it does on the solution page...great I'm done! Not so fast. My end goal is to be able to easily render the solutions in PDF so I just change the "renderas" tag on the VF page for PDF. Sigh...it looks terrible...nothing at all like I get on the screen in HTML.

We've had issues with the editing of solutions for years...a few guys describe the editor as "what you get is totally arbitrary" ;) It seems I can have well formatted for the screen easily enough now but the PDF side looks to be a challenge. It's tough because in the solution detail field, it's the raw html stored there.

I'll get a couple of examples together to illustrate.

February 25, 2010
·
Like
0
·
Dislike
0

stephan
One thing to note about PDF rendering is that you probably need to style the elements on the page yourself. For more, see:

http://www.salesforce.com/us/developer/docs/pages/index_Left.htm#StartTopic=Content/pages_quick_start_renderas_pdf.htm#kanchor108

February 25, 2010
·
Like
0
·
Dislike
0

guppy
Yeah, I'd read that....but the fundamental problem is that the content of the !solution.SolutionNote field is already HTML where I cannot change any of it for the VF page because it already renders correct in the self-service portal and the regular solutions page.

It seems like...well, I'm stuck with what we have.

Thanks for the replies!

D

February 25, 2010
·
Like
0
·
Dislike
0

stephan
Can I ask what in the HTML isn't rendering as expected in PDF?

February 25, 2010
·
Like
0
·
Dislike
0

guppy
It's the general spacing and the image locations. For example, (as crazy as this html is), this looks great on the solution page...there's only a single line below the image. In the PDF, it looks terrible..lots of white space. Again, this HTML is auto-generated by the editor in SF used to create solutions and it's this that is stored in the solutionNote field.

Sign the CSR <img align="left" alt="" src="/servlet/servlet.ImageServer?id=01500000000gu0j&oid=00D00000000hhJ4" border="0"></img> Select Tomcat for the server software used to generate the CSR

D

February 25, 2010
·
Like
0
·
Dislike
0

stephan
Dang, that is some crazy HTML... The fault here seems to be with the rich text editor used for Solutions, which is generating a lot of invalid markup. ( should be , for example.) The browser has one way of handling invalid markup, and the engine we use to convert HTML to PDF has another. This is the source of the difference.

You might want to open up a support case related to the rich text editor used for solitions.

February 25, 2010
·
Like
0
·
Dislike
0

stephan
One last question -- could that HTML have gotten into the rich text editor by pasting from something like Word or Outlook perhaps? It smells a lot like Microsoft HTML circa 2002...

February 25, 2010
·
Like
0
·
Dislike
0

guppy
It's certainly possible....I know all of our support engineers lothe the rich text editor...it's really a crap shoot when using it (and I agree with them). The annoying thing here is that in the render to PDF, it's clearly not rendering what I'm seeing on the screen. It seems like we spend 10 minutes writing the text for an article, 2 hours formatting it.

Still, I think there's clearly no good solution here since any changes we make will change the "visual" layout (of which we have thousands of articles) of which we have a significant time investment in. If the PDF renderer gave us what we see, we'd be great.

Thanks again for the help though.

Cheers

Dave

February 25, 2010
·
Like
0
·
Dislike
0

You need to sign in to do that.

Need an account? Sign Up

Have an account? Sign In

Dismiss

Browse by Topic

Welcome to Support!

Show

sorted by

VF page for "solutions" - rendering differences

You need to sign in to do that.