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
SazEastSazEast 

If I have inserted a visualforce page within a visual force page, would I have to use CSS styling markup on both pages?

It works fine on my main page but on the embedded page its displaying the css code as text on the output.

Thanks
Best Answer chosen by SazEast
Ajay K DubediAjay K Dubedi
Hi Sarah,

You can take help for this code. I hope this code will help you to use CSS styling markup on both pages: 
<!-- Page: composition -->
<!-- This page acts as the template. Create it first, then the page below.  -->    
<apex:page>
    <apex:outputText value="(template) This is before the header"/><br/>
    <apex:insert name="header"/><br/>
    <apex:outputText value="(template) This is between the header and body"/><br/>
    <apex:insert name="body"/>
</apex:page>
            
<!-- Page: page -->
<apex:page>
    <apex:composition template="composition">
        <apex:define name="header">(page) This is the header of mypage</apex:define>
        <apex:define name="body">(page) This is the body of mypage</apex:define>
    </apex:composition>
</apex:page>
The example above renders the following HTML:
(template) This is before the header<br/>
(page) This is the header of mypage<br/>
(template) This is between the header and body<br/>
(page) This is the body of mypage

You can follow this link for more help:
http://amitsalesforce.blogspot.com/2015/02/defining-templates-with-apexcomposition.html

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi

All Answers

ProlayProlay
You have to use  apex:composition.   Here is the help link -https://developer.salesforce.com/docs/atlas.en-us.pages.meta/pages/pages_compref_composition.htm
Raj VakatiRaj Vakati
These are the option s



Composition: An area of a page that includes content from a second template page. Template pages are Visualforce pages that include one or more components. The component names the associated template, and provides body for the template's components with matching components. Any content outside of an component is not rendered
This is Page which define template and use composition element



Component: Components are reusable section of UI. For ex. Header, footer, widgets etc.

<apex:insert> 
A template component that declares a named area that must be defined by an <apex:define > component in another Visualforce page. Use this component with the <apex:composition > and  <apex:define > components to share data between multiple pages.



https://salesforce.stackexchange.com/questions/80049/difference-between-apexcomposition-and-apexcomponent
http://amitsalesforce.blogspot.com/2015/02/defining-templates-with-apexcomposition.html

http://amitsalesforce.blogspot.com/2015/02/defining-templates-with-apexcomposition.html
https://www.mstsolutions.com/technical/templating-with-visualforce/
http://eltoro.force.com/VisualforceTemplating
https://www.salesforcetutorial.com/defining-visualforce-page-template/
https://webkul.com/blog/write-a-template-in-visualforce/
http://www.saaspie.com/when-to-use-apexcomposition-in-visualforce/
http://www.infallibletechie.com/2013/04/apexinsert-apexcomposition-apexdefine.html
https://confluence.fonteva.io/display/userguide/Creating+Custom+Pages+for+a+Community+Portal+Site
​​​​​​​https://randsfdc.blogspot.com/2016/09/use-template-in-visualforce-page.html

 
Ajay K DubediAjay K Dubedi
Hi Sarah,

You can take help for this code. I hope this code will help you to use CSS styling markup on both pages: 
<!-- Page: composition -->
<!-- This page acts as the template. Create it first, then the page below.  -->    
<apex:page>
    <apex:outputText value="(template) This is before the header"/><br/>
    <apex:insert name="header"/><br/>
    <apex:outputText value="(template) This is between the header and body"/><br/>
    <apex:insert name="body"/>
</apex:page>
            
<!-- Page: page -->
<apex:page>
    <apex:composition template="composition">
        <apex:define name="header">(page) This is the header of mypage</apex:define>
        <apex:define name="body">(page) This is the body of mypage</apex:define>
    </apex:composition>
</apex:page>
The example above renders the following HTML:
(template) This is before the header<br/>
(page) This is the header of mypage<br/>
(template) This is between the header and body<br/>
(page) This is the body of mypage

You can follow this link for more help:
http://amitsalesforce.blogspot.com/2015/02/defining-templates-with-apexcomposition.html

I hope you find the above solution helpful. If it does, please mark as Best Answer to help others too.
Thanks,
Ajay Dubedi
This was selected as the best answer