DEVHIDE
Login Or Sign up

How to include/merge two visual force pages and have second page styling persist?

158 Views Asked by At

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)

enter image description here

salesforce apex-code visualforce
Original Q&A
1

There are 1 best solutions below

0
TurtleMan On BEST ANSWER

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) enter image description here

Related Questions in SALESFORCE

Related Questions in APEX-CODE

Related Questions in VISUALFORCE

Trending Questions

Popular # Hahtags

javascript python java c# php android html jquery c++ css ios sql mysql r reactjs

Popular Questions

.

Copyright © 2021 Jogjafile Inc.