For advanced custom elements, Visual Composer allows you to integrate elements within other elements. Such an approach allows you to create a more flexible element with better structure and keep components less dependent. Visual Composer API allows defining inner elements as child elements or nested elements.
A child element is a part of a parent element it can be replaced by another element of its category. It cannot be moved or removed, however, it can be hidden if such option exists in the parent element. A child element can be edited and has its own section with attribute fields in the Edit Form. To include a child element inside the parent, element attribute should be used.
onChange will react to addButton attribute change by showing/hiding child element section in the Edit Form and inside the element.
The button property must be then listed in the metaEditFormTabs attribute property to display in the Edit Form.
Inside component.js file import Cook service, use it to get and render an element like in the example below.
A nested element is an independent element which can be instantiated inside the parent element. This element can be removed, cloned, moved outside the parent element (via drag and drop). Other elements of the same category can be added to the parent element. Nested elements are displayed as Tree View inside Edit Form. To include nested element initChildren attribute must be used.
iconPicker is icon element’s property with iconPicker attribute type.
Properties like icons with attribute type treeView and meta attribute containerFor must also be set.
Nested elements will be available in element component’s this.props object under children property as an array of elements.