function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
nickfs92840nickfs92840 

Visual Force / HTML Output

I have a visual force page with a print function button that when pressed, generates a page out of salesforce. However, the print out does not look pretty.

 

Can someone help me in formatting my visualforce code to output something like the below? I created the below in Illustrator, but need some guidance on combining HTML and Visualforce code.

 

Please let me know.

 

Thanks!

 

 

 

Best Answer chosen by Admin (Salesforce Developers) 
bob_buzzardbob_buzzard

In that case, thanks to the wonder of standard controllers, you will have an sobject named 'Highlight_Sheet__c' available to you. Thus to output a field named 'FieldOne__c', you would use:

 

<apex:outputField value="{!Highlight_Sheet__c.FieldOne__c}" />

 


All Answers

bob_buzzardbob_buzzard

The best resource I've come across for this is the following wiki page:

 

http://wiki.developerforce.com/page/Creating_Professional_PDF_Documents_with_CSS_and_Visualforce

nickfs92840nickfs92840

hmm, is there something else that is a more step by step? Because this wiki uses a thirdparty custom object that ties into an opportunities object already set in salesforce.

nickfs92840nickfs92840

In following this post: http://bit.ly/GEYdrf

I need to figure out how to add my api field names into an HTML table. Any suggestions how the apex field names are to be named as?

bob_buzzardbob_buzzard

Your API names will be available from the setup part of the UI - each field has a label and an API name when you define it.   if you navigate to the object in question,   If its a standard object, navigate to Customize -> <object name> -> Fields, or if its a custom object go to the Create -> Objects and choose the object in question.  The list of fields will contain the field label and the field name - the field name equates to the API name.

nickfs92840nickfs92840

Hi Bob,

 

I understand in obtaining the api names within SFDC, but what is the correct format to input into an html table like the below.This table will then be placed into the Visual Force page, so I'm looking for the correct <apex:XXXX> format.

 

So if my Filed Name is: FieldOne

and my API Name was: FieldOne__c

 

What would be the correct format?

 

Thanks!!!

 

 

 

<table width="800" border="0">
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

 

bob_buzzardbob_buzzard

If they are sobject fields, you'd use the apex:outputField to render them.  Assuming the record is stored in sobj and the field API name is FieldOne__c, you'd use:

 

 

<apex:outputField value="{!sobj.FieldOne__c}"/>

 

nickfs92840nickfs92840

How can I find out where the record is stored in? 

 

bob_buzzardbob_buzzard

Is your visualforce page using a standard controller?  If that is the case, it will be the name specified in that attribute.

nickfs92840nickfs92840

This is how my VF page is set:

 

<apex:page standardController="Highlight_Sheet__c" standardStylesheets="false" showHeader="false" >

 

bob_buzzardbob_buzzard

In that case, thanks to the wonder of standard controllers, you will have an sobject named 'Highlight_Sheet__c' available to you. Thus to output a field named 'FieldOne__c', you would use:

 

<apex:outputField value="{!Highlight_Sheet__c.FieldOne__c}" />

 


This was selected as the best answer
nickfs92840nickfs92840

Getting closer. I didn't get any errors on my visualforce page, so that is good so far. However, the information comes up blank, see below next to Field Name. There is no data that pulls up.

 

I also included the HTML code below as well. Any thoughts?

 

 

 

 

 

<table width="708" border="0">
      <tr>
        <td width="262">Account Details</td>
        <td width="262">&nbsp;</td>
        <td width="151">&nbsp;</td>
      </tr>
    </table>
    <table width="800" border="0">
      <tr>
        <td>Field Name: <apex:outputField value="{!Highlight_Sheet__c.Tier_Rationale__c}"/></td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>

 

nickfs92840nickfs92840

Hi Bob, Ok, it did work, my value was originally blank but added information to the field. 

 

 

 

 

bob_buzzardbob_buzzard

Cool.  Glad to hear you got there.

nickfs92840nickfs92840

I do have one more question, in my output, I have two lookup fields that produce an underline as shown below with the arrows. Is there a way to remve these underlines? I provided some of my VF code below. Thanks!

 

 

<apex:page standardController="Highlight_Sheet__c" standardStylesheets="false" showHeader="false" >
<apex:stylesheet value="{!URLFOR($Resource.advancedpdfsource, 'qstyles.css')}" />

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>INTERNAL USE ONLY</title>
</head>

<body class="oneColElsCtr">

<div id="container">
  <div id="mainContent">
  <p>  
  <table width="855" border="0">
      <tr>
        <td width="173"><apex:image value="https://c.na6.content.force.com/servlet/servlet.ImageServer?id=01580000000vjOP&oid=00D300000000aSY&lastMod=1332533543000" width="150" height="51"/></td>
        <td width="505"><h1 class="red">HIGHLIGHT SHEET</h1></td>
        <td width="161"><table width="99%" border="0" cellpadding="0" cellspacing="0">
  <td align="center"><a href="javascript&colon;window.print();">Print Highlight Sheet</a></td>
</table></td>
      </tr>
    </table>
<h2 class="red"><span class="boldsub">Account Details</span></h2>
<table id="customers">
  <tr>
  <th width="29%">Account</th>
  <th width="18%">Street</th>
  <th width="15%">City</th>
  <th width="8%">State</th>
  <th width="15%">Zip Code</th>
  <th width="15%">TIN</th>
  </tr>
<tr>
  <td><apex:outputField value="{!Highlight_Sheet__c.Account__c}"/></td>
  <td><apex:outputField value="{!Highlight_Sheet__c.Shipping_Street__c}"/></td>
  <td><apex:outputField value="{!Highlight_Sheet__c.Shipping_City__c}"/></td>
  <td><apex:outputField value="{!Highlight_Sheet__c.Shipping_State__c}"/></td>
  <td><apex:outputField value="{!Highlight_Sheet__c.Shipping_Zip_Code__c}"/></td>
  <td><apex:outputField value="{!Highlight_Sheet__c.TIN__c}"/></td>

 

bob_buzzardbob_buzzard

I'd imagine these are appearing because the names are actually links.  You can specify a style to the apex: outputField component, so you should be able to override at that point.  It may be as simple as turning off the text decoration, e.g.

 

<td><apex:outputField style="text-decoration: none" value="{!Highlight_Sheet__c.Account__c}"/></td>

 

 

 

nickfs92840nickfs92840

Thanks Bob! I also updated my .css file with:

 

}
a:link {
	text-decoration: none;
	color: #000;
}
a:visited {
	text-decoration: none;
	color: #000;
}
a:hover {
	text-decoration: none;
	color: #000;
}
a:active {
	text-decoration: none;
	color: #000;
}

 the added apex code you provided

style="text-decoration: none"

 really helped!!!

 

Thank you!