Apex Code Development You need to sign in to do that
Don't have an account?
AndyPandy Format and Style Page Rendered as PDF
Hi Guys,
I have created a VF Page, which is linked to a button called "Generate PDF", which renders a record of a Custom Object as a PDF. However, as you'll see from the below VF Page code, it is very crude, and looks awful (totally basic plain Times New Roman, in two columns all bunched up):
<apex:page renderAs="pdf" StandardController="Adverse_Incident__c">
<apex:PageBlock >
<apex:PageBlockSection columns="2">
<apex:outputText value="{!Adverse_Incident__c.Batch_Number__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Brand_Name_of_Generator__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Burn_Location__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Burn_Severity__c}"/>
<apex:outputText value="{!Adverse_Incident__c.City__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Complaint_No__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Country__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Did_a_burn_occur__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Did_any_piece_break_off_inside_the_body__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Electro_Surgical_Device__c}"/>
<apex:outputText value="{!Adverse_Incident__c.E_Mail_Address__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Estimated_Delay_to_the_Case__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Evaluate_Repair_Device__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Evaluate_Return_Device__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Evaluate_Only_Do_Not_Return__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Fluid_Management_System__c}"/>
<apex:outputText value="{!Adverse_Incident__c.For_Intelijet_Systems_Type_of_Cannula__c}"/>
<apex:outputText value="{!Adverse_Incident__c.For_Intelijet_Systems_Type_of_Scope__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Hospital_Name__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Incident_Date__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Incident_Description__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Issue_a_Credit__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Is_the_device_under_warranty__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Pad_Location__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Pad_Manufacturer__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Patient_Age__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Patient_Bone_Quality__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Patient_Sex__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Person_Reporting_Incident__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Phone_No__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Please_explain_the_answer_above__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Post_Code__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Procedure__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Product_Code__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Return_Authorisation_No__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Return_the_device_for_evaluation__c}"/>
<apex:outputText value="{!Adverse_Incident__c.S_N_Organisation__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Sales_Rep_City__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Sales_Rep_Country__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Sales_Rep_E_Mail_Address__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Sales_Rep_Phone_No__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Sales_Rep_Post_Code__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Sales_Rep_Street_Address__c}"/>
<apex:outputText value="{!Adverse_Incident__c.SAP_Service_Notification_No__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Service_Replacement_if_applicable__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Software_Version_of_Generator__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Street_Address__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Surgeon_Name__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Was_a_back_up_device_available__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Was_the_piece_removed__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Was_there_a_patient_injury__c}"/>
<apex:outputText value="{!Adverse_Incident__c.Was_this_an_Out_of_Box_Failure__c}"/>
<apex:outputText value="{!Adverse_Incident__c.What_was_the_state_of_the_flush_valve__c}"/>
<apex:outputText value="{!Adverse_Incident__c.When_was_the_problem_noted__c}"/>
</apex:PageBlockSection>
</apex:PageBlock>
</apex:page>Could someone help me with how I would go about styling this page, to make it look a bit more professional - basically changing the font, creating sections (which can literally just be bigger bolder text, then the above outputText values being on the row below) - and generally making it look like a nice printable view record of the form, which can then be emailed as an attachment, or saved to a record etc, looking half decent?
ANY help would be greatly appreciated as I am very new indeed to all of this.
Many thanks,
Andy
Hi ,
You can you use inline stylesheet to do this. You have to use simple "style" property inside the OutputText used to display the outputText component, its used primarily for adding inline CSS styles.
Code Sample:
<apex:outputtext style=”width:150px;height:25px; background:#B4C3D1;”>
Or you may create your CSS inside the script Tag like this and used that class wheneven needed. Like this:
<style>
.activeTab {background-color: #1797C0; color:white;
background-image:none}
.inactiveTab { background-color: lightgrey; color:black;
background-image:none}
</style>
Did this answer your question? If not, let me know what didn't work, or if so, please mark it solved.
Hi Ispita Saha,
That's great, thank you very much. Before I mark this as solved, would you be able to help me out with the correct code for 3 specific "styles":
1 - Adding table-style borders around specific fields
2 - Changing the font for specific fields
3 - Adding my own standard text, (i.e. not displaying the contents of a field, but just writing some headers).
Thank you very much indeed,
Andy