1

My requirement: step 1: completed I have two visualforce pages, page 1 has a drop down select field, a checkbox and a button. When i click the button, page 2(rendered as pdf) is displayed as an iframe.

step 2: when i select the checkbox in page 1, I should be able to highlight the fields in the iframe.

Any thoughts or help on this would be greatly appreciated.

Thanks in advance!

Page 1:

<apex:page standardController="Opportunity" extensions="OppExt">
<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/>
<apex:stylesheet value="{!$Resource.customCSS}" /> 
<html>
<script type="text/javascript"> 
function generateIFrame() {
var oppId = document.getElementById('{!$Component.oId}').innerHTML;

console.log(oppId);
var doc = document.getElementById("volvo").value;
var cBox = document.getElementById("check").checked;
Visualforce.remoting.Manager.invokeAction(
                    '{!$RemoteAction.OppExt.getIFrame}', JSON.stringify(oppId), JSON.stringify(doc), JSON.stringify(cBox),
                    function(result, event) {
                    if(event.type === 'exception') {
                            alert('In exception');
                        }
                        else if (event.status) {
                     var elmnt = document.getElementById("if");
                            elmnt.src = result; 

                       }
                        else {
                            alert('In else');
                            console.log(event.message);
                        }
                    });
                }
        </script> 



  <!-- Begin Default Content REMOVE THIS -->

  <div>
  <apex:outputText label="Opportunity Name" style="color:#A9A9A9;font-size:20px" value="{!$CurrentPage.parameters.id}" id="oId"/>
  </div>
  <div>
  <select id="car">
  <option id="volvo" value="volvo">Volvo</option>
  <option id="saab" value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>
  </div>

    <div>
        <input id="check" type="checkbox" name="vehicle" value="yes" checked="false" /> I have a bike
      </div>

  <div>
  <button id="generate" onclick="generateIFrame()">Generate</button>
  </div>

    <span>
        <apex:iframe id="if"/>
    </span>


  </html>
</apex:page>

Page 2:

<apex:page renderAs="pdf" standardController="Opportunity" extensions="OppExt" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false" >

     <apex:stylesheet value="{!$Resource.customCSS}" />  
<apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/>

    <h1 id="header">Congratulations</h1>
  <p id="p1">
      This is your new Page: volvo
    </p>

    <apex:form >
 Name: <apex:outputText id="oppName" value="{!Opportunity.Name}"/>
        </apex:form>

</apex:page>

Controller Extension:

global class OppExt {

    public static String chBox;
    public string testBox = 'test';
    public OppExt(){}

    public OppExt(ApexPages.StandardController std){

    }

    @RemoteAction
    global static string getIFrame(string oppId, string docName, string cBox){

        String opportunityId = (String)System.JSON.deserialize(oppId, String.class);
        String document = (String)System.JSON.deserialize(docName, String.class);
        chBox = (String)System.JSON.deserialize(cBox, String.class);

        String link;


        link = 'https://na50.visual.force.com/apex/'+document+'?id='+opportunityId;

        return link;
    } 

}
0

Some times it gives issue with external using external css.

try to use internal css it worked for me atleast.

<apex:page renderAs="pdf" standardController="Opportunity" extensions="OppExt" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="false" applyBodyTag="false" applyHtmlTag="false"> <style> //do something </style> <apex:includeScript value="https://code.jquery.com/jquery-1.9.1.min.js"/> <h1 id="header">Congratulations</h1> <p id="p1"> This is your new Page: volvo </p> <apex:form > Name: <apex:outputText id="oppName" value="{!Opportunity.Name}"/> </apex:form> </apex:page>

sometime while rendering as pdf it will not be able to use to some of the metadata also like location based currency field..

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.