function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
ManojKumar MuthuManojKumar Muthu 

How to join two visual force page into one??

Hi All,

I have two visual force page as seen below,

<apex:page tabStyle="Case" action="/500?fcf=00B7F00000287BO" ></apex:page>
<apex:page showHeader="true" tabstyle="Case" action="/500?fcf=00B0l0000010NyT"></apex:page>

Is there a way to club these two VF page into one. I tried Apex: Include but doesn't work.

I heard about iframe, but I don't have any idea on this.

Can someone help me to achieve this one?

Thanks in advance.

 
Best Answer chosen by ManojKumar Muthu
NagendraNagendra (Salesforce Developers) 
Hi Manoj,

You can use the apex:include tag. Please refer to the Salesforce Docs https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/ for further details https://developer.salesforce.com/docs/atlas.en-us.workbook_vf.meta/workbook_vf/workbook_retired.htm . If you want to dynamically display the pages based on the option selected, here is a simple solution for that: 
<apex:page>
<input type="checkbox" id="option1" onclick="displayPage();">option1</input> <input type="checkbox" id="option2" onclick="displayPage();"> option2 </input>
<div id="option1Page" style="display:none;">
<apex:include pageName="vfpage1"/>
</div>

<div id="option2Page" style="display:none;">
 <apex:include pageName="vfpage2"/>
</div>
<script type="text/javascript">

    function displayPage() {
    if (document.getElementById('option1').checked ) {
     document.getElementById('option1Page').style.display = "block";
     document.getElementById('option1').checked=true;
    }
    else
    {
      document.getElementById('option1').checked=false;
      document.getElementById('option1Page').style.display = "none";
    }
    if (document.getElementById('option2').checked ) 
    {
     document.getElementById('option2Page').style.display = "block";
     document.getElementById('option2').checked=true;
    }
    else
    {
    document.getElementById('option2').checked=false;
    document.getElementById('option2Page').style.display = "none";
    }
    }

   </script>
</apex:page>
Hope this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra

 

All Answers

NagendraNagendra (Salesforce Developers) 
Hi Manoj,

You can use the apex:include tag. Please refer to the Salesforce Docs https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/ for further details https://developer.salesforce.com/docs/atlas.en-us.workbook_vf.meta/workbook_vf/workbook_retired.htm . If you want to dynamically display the pages based on the option selected, here is a simple solution for that: 
<apex:page>
<input type="checkbox" id="option1" onclick="displayPage();">option1</input> <input type="checkbox" id="option2" onclick="displayPage();"> option2 </input>
<div id="option1Page" style="display:none;">
<apex:include pageName="vfpage1"/>
</div>

<div id="option2Page" style="display:none;">
 <apex:include pageName="vfpage2"/>
</div>
<script type="text/javascript">

    function displayPage() {
    if (document.getElementById('option1').checked ) {
     document.getElementById('option1Page').style.display = "block";
     document.getElementById('option1').checked=true;
    }
    else
    {
      document.getElementById('option1').checked=false;
      document.getElementById('option1Page').style.display = "none";
    }
    if (document.getElementById('option2').checked ) 
    {
     document.getElementById('option2Page').style.display = "block";
     document.getElementById('option2').checked=true;
    }
    else
    {
    document.getElementById('option2').checked=false;
    document.getElementById('option2Page').style.display = "none";
    }
    }

   </script>
</apex:page>
Hope this helps.

Kindly mark this as solved if the reply was helpful.

Thanks,
Nagendra

 
This was selected as the best answer
Gulafsha MohammedGulafsha Mohammed
Hi,
If u mean having 2 vf pages in single page then use iframe and give src attribute as one of the vf page which ever u want.
Refer https://developer.salesforce.com/forums/?id=9060G000000I5RaQAK to see examples related to iframe.

Hope this will help. Please mark this as best answer if so.
Regards,
Gulafsha
ManojKumar MuthuManojKumar Muthu
Hi Nagendra,

Thanks for your reply.

Here what is "Option1" and "Option1page"?

I know it is a silly question, but I am new to this, can you pls guide me? 
Ajay K DubediAjay K Dubedi
Hi Manoj,

Below Sample code can fulfill your requirements. Hope this will work for you.

 <apex:page>
<input type="checkbox" id="option1" onclick="displayPage();">option1</input> <input type="checkbox" id="option2" onclick="displayPage();"> option2 </input>
<div id="option1Page" style="display:none;">
<apex:include pageName="vfpage1"/>
</div>

<div id="option2Page" style="display:none;">
 <apex:include pageName="vfpage2"/>
</div>
<script type="text/javascript">

    function displayPage() {
    if (document.getElementById('option1').checked ) {
     document.getElementById('option1Page').style.display = "block";
     document.getElementById('option1').checked=true;
    }
    else
    {
      document.getElementById('option1').checked=false;
      document.getElementById('option1Page').style.display = "none";
    }
    if (document.getElementById('option2').checked ) 
    {
     document.getElementById('option2Page').style.display = "block";
     document.getElementById('option2').checked=true;
    }
    else
    {
    document.getElementById('option2').checked=false;
    document.getElementById('option2Page').style.display = "none";
    }
    }

   </script>
</apex:page>

Please mark this as best answer if this solves your problem.

Thank you,
Ajay Dubedi