Using apex:facet is a one-line addition to a Visualforce component: nest the facet tag inside the parent component with the appropriate name attribute. The parent component picks up the facet content at render time.
- Open the Visualforce page
Setup, then Visualforce Pages, then the page you want to modify. Open it in the Developer Console or VS Code.
- Identify the parent component
Find the apex:dataTable, apex:pageBlockTable, or apex:column where you want to inject content. Confirm it supports the facet name you want to use.
- Add the apex:facet child
Inside the parent component, add a child element: apex:facet name=header followed by your custom markup followed by /apex:facet. The name attribute identifies the slot.
- Test the rendering
Preview the page. The custom content should appear in the named slot. If it does not, verify the facet name matches a supported slot on the parent.
- Style as needed
Facet content inherits the parent component''s styling unless overridden. Add CSS classes for custom styling; use inline styles sparingly.
- Consider migration to LWC
For new development, consider building the same UI as a Lightning Web Component with slots. Visualforce is increasingly the legacy path; LWC is where investment is going.
The classic facet tag. Provides named-region content to parent Visualforce components.
The modern equivalent. Same composability concept; built into LWC framework.
User-facing filter panels in Experience Cloud, Einstein Search, and CMS. Different concept; same word.
Filter controls for CMS content listings. Configured per content type and listing component.
- Facet names are case-sensitive in Visualforce. Header is not the same as header; using the wrong case silently fails.
- Not every Visualforce parent accepts facets. Check the component reference before assuming a slot exists.
- Visualforce is legacy for new development. New work should use Lightning Web Components with slots, not apex:facet.
- Search facets and Visualforce facets share the word but not the concept. Confusing them is common; clarify which is meant in design discussions.