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)
- Looking for hacks to shim objects when their prototype are sealed
- Add wordpress custom post type data to an external db
- SOQL Query - How to write a SOQL query by making a field to lowercase and compare?
- Connecting Palantir to Salesforce - how do you access the data tables (the SObjects)?
- How to show only extracted error message from Custom Validation on a Visualforce Page?
- How to upload files and attachments to the sobject record using REST API?
- HTTP Callout restriction doesn't allow Record-Triggered Flow to run on updates
- Get a list of API Names of all Fields for an Object.
- Adding comment to a commit when Azure release pipeline fails
- How to change the Button background color in lightning Data Table on onrowaction?
- OpenSSL not creating a key file from a RSA private key
- How to change value in tooltip charJS
- How to Click a Button Inside an LWC Component Using TestCafe?
- Username/password JWT with Salesforce Named Credentials
- salesforce rest api INVALID_SESSION_ID error
- How to create a Salesforce Case with attachments using REST API?
- Salesforce User with a certain profile can only delete contact base on Account.field__c and the user.field__c is the same
- Copy activity and query with new Salesforce connector
- Given that node modules can't be used, suggest an approach integrating Roomle with Salesforce
- Authenticate Salesforce community user using rest api in connected App
- How to package a Custom Metadata Type in a Salesforce 2GMP (Second Generation Managed Package)?
- How to Pass Selected Record IDs from a Custom Object List View to an Apex Controller?
- 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
- 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