+ Start a Discussion
Markey1Markey1 

Site Menu Links to Refresh Body Component

Hello SF,

 

I am new to building SF Sites and have a few questions on design. I currently have a basic two-column design (header, left menu, body, footer). I am using components to populate the header, footer, and menu so I don't have to re-write the code for each page etc. Rather than creating separate pages, I would like to use components to populate the body as well, which will usually be a form.

 

My question: Using the left menu html links, what is the best way to populate data in the body of the page? I want a user to click a left-nav link and then have the body of the page populate with the correct component (i.e. form) info etc. I have looked everywhere and am unable to locate info on this use-case. I found brief examples of Ajax using "rerender" but I can not figure out how to integrate this with my setup (i.e. which code goes where).

 

My logic/concept may be completely wrong so suggestions, example code, or links to tutorials are much appreciated.

 

 

Best Answer chosen by Admin (Salesforce Developers) 
RyanGuestRyanGuest

Can you just use <apex:output link> for all of the links and then redirect to different pages, sharing the same template?

All Answers

RyanGuestRyanGuest

Take a look at using a Site Template. I think it will do what you want.

Markey1Markey1

Thank you for your reply Ryan. I am using a site template (code below) but am not able to figure out how to populate the body with different components. For example, a user clicks link "A" and the body shows "Form A".... a user click link "B" and the body shows "Form B". I'm trying to accomplish a dynamic site where components drive the body etc.

 

Site Template Code:

 

<apex:page showHeader="false" id="SiteTemplate" standardStylesheets="true">

<!-- Section reserved for site header -->
<apex:insert name="AESK_Header">
<c:AESK_Header />
</apex:insert>

<!-- Section reserved for site menu -->
<apex:insert name="AESK_Menu">
<c:AESK_Menu />
</apex:insert>

<!-- Section reserved for site menu -->
<apex:insert name="AESK_Body">
<c:AESK_Body />
</apex:insert>

<!-- A section is reserved for footer of the site -->
<apex:insert name="AESK_Footer">
<c:AESK_Footer />
</apex:insert>

</apex:page>

 

RyanGuestRyanGuest

Can you just use <apex:output link> for all of the links and then redirect to different pages, sharing the same template?

This was selected as the best answer
Markey1Markey1

I think you are right and I was stuck on trying to use components for everything. I will create pages for each "link" and then use <apex:define> to create the "body" of each page. Not sure if there is a better way, but below is my code for other viewers to reference:

 

<apex:page showHeader="false" standardStylesheets="false">
<apex:stylesheet value="{!$Resource.Style}"/> 
<head>
<title>Test</title>
</head>

<div id = "wrap">
<!-- START: wrap -->

<apex:composition template="SiteTemplate">

<apex:define name="Body">
  <div id = "content_container">
    <div id = "main_content">
        <h2>Welcome to the test page</h2>
        <p>Testing Testing Testing Testing Testing </p>
    </div>
  </div>
</apex:define>

</apex:composition>
<!-- STOP: wrap -->
</div>
</apex:page>

 

 

RyanGuestRyanGuest

Ahhh I see what you were thinking.

 

Yes use pages for everything. That way the URL will change with every click. That way if somebody wants to send a URL to a friend they will be able to copy and paste from the address bar.