--- schema_version: "1" id: deb724c21edd5103aed28e47d8092ef834bfc0d820c83a281cfe5ec74b4bbd98 title: Creating and Displaying Dynamic Components collection: developer version: current locale: en-us portal_url: https://docs.salesforce.com/developer/current/en-us/platform/salesforce-pages-developers-guide/guides/pages/dynamic-vf/pages-dynamic-vf-components-implementation.md canonical_url: https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-dynamic-vf-components-implementation.html source_site: developer.salesforce.com content_type: documentation content_hash: 96d8c1970836439a6df1badd87181053c80c6226f2fe60e87b815766c8b5eaa9 products: - Visualforce Developer Guide - Platform Developer Content --- # Creating and Displaying Dynamic Components **note:** The examples in this section are deliberately simple for instructional purposes. For a more complete example of when you might benefit from dynamic Visualforce components, see [Example Using a Related List](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/guide/pages-dynamic-vf-components-sample.md). There are two parts to embedding dynamic Visualforce components on your page: - Adding an `` tag somewhere on your page. This tag acts as a placeholder for your dynamic component. - Developing a dynamic Visualforce component in your controller or controller extension. The `` tag has one required attribute—`componentValue`—that accepts the name of an Apex method that returns a dynamic component. For example, if you wanted to dynamically generate the title of a section header differently if the deadline for a submitting form has passed, you could use the following markup and controller code: ```apex_page ``` ```apex_code public class DynamicComponentExample { public DynamicComponentExample(ApexPages.StandardController con) { } public Component.Apex.SectionHeader getHeaderWithDueDateCheck() { date dueDate = date.newInstance(2011, 7, 4); boolean overdue = date.today().daysBetween(dueDate) < 0; Component.Apex.SectionHeader sectionHeader = new Component.Apex.SectionHeader(); if (overdue) { sectionHeader.title = 'This Form Was Due On ' + dueDate.format() + '!'; return sectionHeader; } else { sectionHeader.title = 'Form Submission'; return sectionHeader; } } } ``` You can have multiple `` components on a single page. Each dynamic component has access to a common set of methods and properties. You can review this list in the *Apex Developer's Guide* in the chapter titled “Component Class.”. ## Dynamic Custom Components Using custom components dynamically works exactly the same as the standard Visualforce components. Just change the namespace to that of the custom component. Your custom components are in the `c` namespace, so you can create one dynamically like this: ```apex Component.c.MyCustomComponent myDy = new Component.c.MyCustomComponent(); ``` As a convenience for your own components, you can omit the namespace, like so: ```apex Component.MyCustomComponent myDy = new Component.MyCustomComponent(); ``` If you are using components provided by a third party in a package, use the namespace of the package provider: ```apex Component.TheirName.UsefulComponent usefulC = new Component.TheirName.UsefulComponent(); ``` ## Passing Attributes through the Constructor Instead of setting component attributes via their properties, you can simply pass in a list of one or more attributes through the constructor: ```apex Component.Apex.DataList dynDataList = new Component.Apex.DataList(id='myDataList', rendered=true); ``` If an attribute isn’t defined in the constructor, the component's default values are used for that attribute. There are two components that must have an attribute defined in the constructor, rather than through a property: - `Component.Apex.Detail` must have `showChatter=true` passed to its constructor if you want to display the Chatter information and controls for a record. Otherwise, this attribute is always false. - `Component.Apex.SelectList` must have `multiSelect=true` passed to its constructor if you want the user to be able to select more than one option at a time. Otherwise, this value is always `false`. These values are Booleans, not Strings; you don’t need to enclose them in single quote marks. **note:** You can’t pass attributes through the class constructor if the attribute name matches an Apex keyword. For example, `Component.Apex.RelatedList` can’t pass `list` through the constructor, because List is a reserved keyword. Similarly, `Component.Apex.OutputLabel` can’t define the `for` attribute in the constructor, because it’s also a keyword. ## Defining Expressions and Arbitrary HTML You can add expression language statements with the `expressions` property. Append `expressions` before a property name to pass in an expression statement. As in static markup, expressions must be wrapped with the `{! }` syntax. Here’s an example: ```apex Component.Apex.Detail detail = new Component.Apex.Detail(); detail.expressions.subject = '{!Account.ownerId}'; detail.relatedList = false; detail.title = false; ``` Valid expressions include those that refer to fields on standard and custom objects. Global variables and functions are also available, as demonstrated in this example: ```apex Component.Apex.OutputText head1 = new Component.Apex.OutputText(); head1.expressions.value = '{!IF(CONTAINS($User.FirstName, "John"), "Hello John", "Hey, you!")}'; ``` Passing in values through expressions is valid only for attributes that support them. Using `{! }` outside of the `expressions` property will be interpreted literally, not as an expression. If you want to include plain HTML, you can do so by setting the `escape` property on `Component.Apex.OutputText` to `false`: ```apex Component.Apex.OutputText head1 = new Component.Apex.OutputText(); head1.escape = false; head1.value = '

This header contains HTML

'; ``` ## Defining Facets Similar to the way expressions are defined, facets act as a special property available to dynamic components. Here’s an example: ```apex Component.Apex.DataTable myTable = new Component.Apex.DataTable(var='item'); myTable.expressions.value = '{!items}'; Component.Apex.OutputText header = new Component.Apex.OutputText(value='This is My Header'); myTable.facets.header = header; ``` For more information on facets, see [Best Practices for Using Component Facets](https://developer.salesforce.com/docs/platform/salesforce-pages-developers-guide/best-practices/pages-compref-additional-facet.md). ## Defining Child Nodes You can add child nodes to a dynamic Visualforce component using the `childComponents` property. The `childComponents` property acts as a reference to a List of `Component.Apex` objects. Here’s an example of how you can use `childComponents` to construct a `` with child input nodes: ```apex public Component.Apex.PageBlock getDynamicForm() { Component.Apex.PageBlock dynPageBlock = new Component.Apex.PageBlock(); // Create an input field for Account Name Component.Apex.InputField theNameField = new Component.Apex.InputField(); theNameField.expressions.value = '{!Account.Name}'; theNameField.id = 'theName'; Component.Apex.OutputLabel theNameLabel = new Component.Apex.OutputLabel(); theNameLabel.value = 'Rename Account?'; theNameLabel.for = 'theName'; // Create an input field for Account Number Component.Apex.InputField theAccountNumberField = new Component.Apex.InputField(); theAccountNumberField.expressions.value = '{!Account.AccountNumber}'; theAccountNumberField.id = 'theAccountNumber'; Component.Apex.OutputLabel theAccountNumberLabel = new Component.Apex.OutputLabel(); theAccountNumberLabel.value = 'Change Account #?'; theAccountNumberLabel.for = 'theAccountNumber'; // Create a button to submit the form Component.Apex.CommandButton saveButton = new Component.Apex.CommandButton(); saveButton.value = 'Save'; saveButton.expressions.action = '{!Save}'; // Assemble the form components dynPageBlock.childComponents.add(theNameLabel); dynPageBlock.childComponents.add(theNameField); dynPageBlock.childComponents.add(theAccountNumberLabel); dynPageBlock.childComponents.add(theAccountNumberField); dynPageBlock.childComponents.add(saveButton); return dynPageBlock; } ``` If your markup is defined as: ```visualforce ``` Then your markup is equivalent to the following static markup: ```visualforce ``` Notice that the order of elements in the equivalent static markup is the order in which the dynamic components were added to `childComponents`, not the order in which they were declared in the Apex code of the `getDynamicForm` method.