Dynamic components on a Visualforce page

Question

I want to create a VF page inside which I will have component, where the user will have the flexibility to change the component without touching the code of the page. Dynamic, like this:

<apex:page>
    <!-- could be defined in a label or custom setting -->
    <c:{{{customer_defined_component_name}}} />
</apex:page>

I tried using Custom Labels but it doen't seem to work.

My customer uses 'Sites' and this VF page is for a site page. The component is plugged into the VF, but the customer says he wants to change the component look and feel periodically.

So, the best way is to edit the component itself whenever he wants to change. But he wants to dynamically change the component itself.

Edit: David's answer is valid if I know what components will be switched up front. But I don't know that as the customer might change the components.

Is there a way to do this?

Answer 1

You referred to <c:{!@label.ComponentName} /> as the kind of solution you want. While it probably won't involve Custom Labels, you are definitely close with Dynamic Visualforce.

To do this in a package does require a number of moving parts, but the following is probably the most native-friendly and future-proof approach. And it works! Hope this gets you started:

Inside your managed package, you would have to implement:

VF.page (you might wanna read up on apex:dynamicComponent tag)

<apex:page controller="PageController">

    <!-- your header here -->

    <apex:dynamicComponent componentValue="{!CustomComponent}" />

    <!-- your footer here -->

</apex:page>

PageController.cls (definitely read up on Type.forName)

global class PageController {

    public ApexPages.Component getCustomComponent() {

        //eg 'AcmeComponentProvider'
        ComponentSetting__c setting = ComponentSetting__c.getValues();

        //take the string that corresponds to the customer class name
        Type reflector = Type.forName(setting.FullyQualifiedClassName__c);

        //use the returned Type to instantiate the customer class and cast it
        IComponentProvider provider = (IComponentProvider)reflector.newInstance();

        //give it to the page
        return provider.provideComponent();
    }

}

IComponentProvider.cls (making sneaky use of the ApexPages.Component base class)

global interface IComponentProvider {

    ApexPages.Component provideComponent();

}

ComponentSetting__c.object

Your customer, in their own organization, would need to implement:

Acme.component

<apex:component >
    <!-- special acme specific content -->
</apex:component>

AcmeComponentProvider.cls

public class AcmeComponentProvider implements IComponentProvider {

    public ApexPages.Component provideComponent() {
        return new Component.Acme();
    }

}

Then you need to show them how to Manage the appropriate Custom Setting:

Answer 2

You can dynamically display/hide page block sections by having the rendered attribute point to true/false checkbox field (this can be editable or calculated). When the checkbox is true, the page block section displays, if false, it's hidden.

apex:pageBlockSection title="My Section Title" id="section1" rendered="{!Opportunity.My_Section1_Checkbox__c}"

Just add the opening and closing tags around that line

Answer 3

I would agree with David, there is a lot of capabilities with the rendered attribute, or basic HTML techniques for hiding and showing data. In addition to that, there is an an actual "Dynamic Visualforce Component" https://developer.salesforce.com/page/Dynamic_Visualforce_Components that could be leveraged to accomplish your requirement.