salesforceapex-codevisualforce
How to include/merge two visual force pages and have second page styling persist?
I am currently trying to create some pdfs for a Meta Human salesforce app and cannot figure out how to merge two visual force pages into one correctly. I am using the apex:include tag to merge the two visual force pages; however, the styles of the second page are not being applied when the two pages are merged together. If I preview the second page that styles are applied correctly.
How would I correctly preserve the styles in the second visual force page after the two are merged together?
Visual Force Page 1
<apex:page renderAs="pdf" id="HeroPDF" standardController="Meta_Human__c" extensions="attachPDF,Test_Two_Extentions" action="{!loadData}" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
<html>
<head>
<style type="text/CSS">
body {
font-family: "Metropolis", sans-serif;
font-size: 14px;
}
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 8px;
width: 50%;
}
.headerRow {
background-color: #E8E8E8;
color: #b25a00;
}
.watermark {
position: fixed;
top: 0.5;
right: 0.5;
background-image: url("{!$Resource.draft}");
width: 715px;
height: 950px;
z-index: -1;
}
</style>
</head>
<body>
<!-- <div class="watermark"></div> -->
<div style="margin-bottom:20px;">
<center><apex:image url="{!$Resource[heroResource]}" width="150" height="88"/></center>
</div>
<table>
<tbody>
<tr>
<td class="headerRow" colspan="10"><strong>Hero Information</strong></td>
</tr>
<tr>
<td>
<div>
<strong>Hero Name</strong>
</div>
{!Meta_Human__c.Name}
</td>
<td>
<div>
<strong>Real Name</strong>
</div>
{!Meta_Human__c.Real_Name__c}
</td>
</tr>
<tr>
<td>
<div>
<strong>Attributes</strong>
</div>
{!Meta_Human__c.Attributes__c}
</td>
<td>
<div>
<strong>Gender</strong>
</div>
{!Meta_Human__c.Gender__c}
</td>
</tr>
<tr>
<td class="headerRow" colspan="10"><strong>Hero Affiliations</strong></td>
</tr>
<tr>
<td>
<div>
<strong>Meta Human Team</strong>
</div>
{!Meta_Human__c.Meta_Human_Team__r.Name}
</td>
<td>
<div>
<strong>Current Sidekick</strong>
</div>
{!Meta_Human__c.Current_Sidekick__r.Name}
</td>
</tr>
</tbody>
</table>
<div style="margin-top:24px;">
<apex:include pageName="HeroPDF2" rendered="{!NOT(ISBLANK(Meta_Human__c.Meta_Human_Team__r.Name))}"/>
</div>
</body>
</html>
</apex:page>
Visual Force Page 2
<apex:page renderAs="pdf" id="HeroPDF2" standardController="Meta_Human__c" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
<html>
<head>
<style type="text/CSS">
body {
font-family: "Metropolis", sans-serif;
font-size: 14px;
}
table {
margin-top: 24px;
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid #000;
padding: 8px;
width: 50%;
}
.header-row {
background-color: #E8E8E8;
color: #b25a00;
}
</style>
</head>
<body>
<table>
<tbody>
<tr>
<td class="header-row"><strong>Hero Team Name</strong></td>
</tr>
<tr>
<td>
{!Meta_Human__c.Meta_Human_Team__r.Name}
</td>
</tr>
<tr>
<td class="header-row"><strong>Total Number of Members</strong></td>
</tr>
<tr>
<td>
{!Meta_Human__c.Meta_Human_Team__r.Total_Count_Of_Members__c}
</td>
</tr>
<tr>
<td class="header-row"><strong>Team Problems</strong></td>
</tr>
<tr>
<td>
{!Meta_Human__c.Meta_Human_Team__r.Team_Problems__c}
</td>
</tr>
</tbody>
</table>
</body>
</html>
</apex:page>
Screenshot of the second visual force page styling not applying (Hero Team Name Table)
Solution
Thanks to @eyescream comment. Was able to resolve styles not applying to the second visualforce page by using ID selector. ID Selectors only wasn't the solution but a good starting point to the solution.
What ended up working was assigning the body of both visualforce pages a unique ID and prefixing the CSS with the corresponding unique ID. If you just prefix the CSS in the second page alone will NOT apply the styles when the two pages are merged. You need to move the CSS from the second visualforce page into the first visualforce page. The moving of the second visualforce page's CSS into the first visualforce page is the magic.
In the code below, I choose to copy the second visualforce page's CSS into the first visualforce page, that way when previewing the second visualforce page the styles are still applied.
Updated Visualforce Page 1
<apex:page renderAs="pdf" id="HeroPDF" standardController="Meta_Human__c" extensions="attachPDF,Test_Two_Extentions" action="{!loadData}" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
<html>
<head>
<style type="text/CSS">
body {
font-family: "Metropolis", sans-serif;
font-size: 14px;
}
#hero1 table {
border-collapse: collapse;
width: 100%;
}
#hero1 th, td {
border: 1px solid #000;
padding: 8px;
width: 50%;
}
#hero1 .headerRow {
background-color: #E8E8E8;
color: #b25a00;
}
#hero2 table {
margin-top: 24px;
border-collapse: collapse;
width: 100%;
}
#hero2 th, td {
border: 1px solid #000;
padding: 8px;
width: 50%;
}
#hero2 .header-row {
background-color: #E8E8E8;
color: #b25a00;
}
.watermark {
position: fixed;
top: 0.5;
right: 0.5;
background-image: url("{!$Resource.draft}");
width: 715px;
height: 950px;
z-index: -1;
}
</style>
</head>
<body id="hero1">
<!-- <div class="watermark"></div> -->
<div style="margin-bottom:20px;">
<center><apex:image url="{!$Resource[heroResource]}" width="150" height="88"/></center>
</div>
<table>
<tbody>
<tr>
<td class="headerRow" colspan="10"><strong>Hero Information</strong></td>
</tr>
<tr>
<td>
<div>
<strong>Hero Name</strong>
</div>
{!Meta_Human__c.Name}
</td>
<td>
<div>
<strong>Real Name</strong>
</div>
{!Meta_Human__c.Real_Name__c}
</td>
</tr>
<tr>
<td>
<div>
<strong>Attributes</strong>
</div>
{!Meta_Human__c.Attributes__c}
</td>
<td>
<div>
<strong>Gender</strong>
</div>
{!Meta_Human__c.Gender__c}
</td>
</tr>
<tr>
<td class="headerRow" colspan="10"><strong>Hero Affiliations</strong></td>
</tr>
<tr>
<td>
<div>
<strong>Meta Human Team</strong>
</div>
{!Meta_Human__c.Meta_Human_Team__r.Name}
</td>
<td>
<div>
<strong>Current Sidekick</strong>
</div>
{!Meta_Human__c.Current_Sidekick__r.Name}
</td>
</tr>
</tbody>
</table>
<apex:include pageName="HeroPDF2" rendered="{!NOT(ISBLANK(Meta_Human__c.Meta_Human_Team__r.Name))}"/>
</body>
</html>
</apex:page>
Updated Visualforce Page 2
<apex:page renderAs="pdf" id="HeroPDF2" standardController="Meta_Human__c" standardStylesheets="false" applyHtmlTag="false" showHeader="false" applyBodyTag="false">
<html>
<head>
<style type="text/CSS">
body {
font-family: "Metropolis", sans-serif;
font-size: 14px;
}
#hero2 table {
margin-top: 24px;
border-collapse: collapse;
width: 100%;
}
#hero2 th, td {
border: 1px solid #000;
padding: 8px;
width: 50%;
}
#hero2 .header-row {
background-color: #E8E8E8;
color: #b25a00;
}
</style>
</head>
<body id="hero2">
<table>
<tbody>
<tr>
<td class="header-row"><strong>Hero Team Name</strong></td>
</tr>
<tr>
<td>
{!Meta_Human__c.Meta_Human_Team__r.Name}
</td>
</tr>
<tr>
<td class="header-row"><strong>Total Number of Members</strong></td>
</tr>
<tr>
<td>
{!Meta_Human__c.Meta_Human_Team__r.Total_Count_Of_Members__c}
</td>
</tr>
<tr>
<td class="header-row"><strong>Team Problems</strong></td>
</tr>
<tr>
<td>
{!Meta_Human__c.Meta_Human_Team__r.Team_Problems__c}
</td>
</tr>
</tbody>
</table>
</body>
</html>
</apex:page>
Updated Screenshot of second visualforce page applying (Hero Team Name Table)
- Dynamic form fields on lightning record page is not working
- INTERNAL ERRORS Bigquery Data Transfer Services for Salesforce
- Netsuite Salesforce Integration ESB vs Prebuilt Connectors
- Trying to unformatted phone number from (999) 777-8888 this to this 9997778888 format
- Upload a file to Salesforce using multipart-form
- String to byte Array without encoding in Java
- How to and why to use Salesforce and Zksforce for iOS development
- How to bulk create/import users in Azure AD so that all of them can have single sign on to my SF sandbox?
- How to query more than 200 field; Salesforce SOQL Fields
- Salesforce apex/visualforce - how do you process and open base64 encoded PDF data?
- How to disable options when radio/check is selected in LWC?
- Migrating Copado Deployment Process from GitHub to Azure DevOps with Multiple Projects and Shared QA/Prod Environments
- PMD Salesforce Code Analyzer error "invalid type" for custom object
- Mulesoft Mule 4 Error Handling - where are the headers?
- Error when deleting partner event source in aws EventBridge
- What are the API names for Address' compound fields that are not Mailing/Billing/Etc.? Salesforce
- Salesforce Integration INVALID_SESSION_ID using Postman
- How to call https.patch in Netsuite to update Salesforce record?
- DocuSign Apex Toolkit - Get PDF byte stream of envelope documents
- How can I track which fields have been edited in Netsuite when syncing NetSuite sales orders to Salesforce?
- Automated upload of a Salesforce file to Box.com record-linked folder
- Hard delete custom field in Salesforce
- Salesforce API - Query of Change Data Capture's Selected Entities jsforce
- Unable to fetch payload.access_token value after hitting salesforce using http connector. how to extract access_token value?
- Cometd/bayeux client + salesforce streaming API issue
- Salesforce apex how to save checkbox multiple values in database
- Anytime Platform API Manager Alerts for Response Codes won't work. Not getting alert emails for response codes
- Getting error unable to get local issuer certificate in Bruno
- Using Slickgrid Universal 4.7.0, checkbox column not displayed with Salesforce LWC, header displayed not for rows
- Add Salesforce Data Cloud data in Bigquery in Python