CF7 Skins Visual Multi

Last Updated on March 13, 2019 by Neil Murray

Note: this article explains planned and currently used approaches.

A. Components

  • Tabs, display tabs, add, delete, rename, and save.
  • Options, display options in Edit window.
  • Item, an object contains default tab property.

B. Tabs Component

Component States

  • treeData, an array to handle treeData for all tabs.
  • options, an array to handle Multi option.

Initial States

Multi treeData is set by reading window.cf7svisual.item if the form is saved previously, or use Visual default treeData passed in props.

  • If Visual treeData has multi-tab in top root node, continue, else
  • create tab node and add Visual treeData as children, then
  • update Multi treeData state.

Updating Data

Visual will look for window.cf7svisual.treeData if exists or Visual treeData state. Every changes made to Multi treeData will be added to window.cf7svisual.treeData for saving purpose and rules checking.

We register cf7svisual_save_multi callback that run during Visual Save to save the Multi treeData and options. See about saving Multi options below.

C. Options Component

Component States

show_navlinks: true,
show_progressbar:  true,
show_pagination:  true,
use_start_tab:  '',
use_end_tab: '',
thanks: '',

Initial States

In includes/admin.php, we add a filter to cf7svisual_localize_script for adding options meta data to global cf7svisual if exists, or use default state above.

Updating Data

Every changes made to options input will update the state and save it to global cf7svisual.multi.options.

For new form, we follow Visual approach to put hidden input inside CF7 <form/> tag. 

D. Item Component

export const cf7sMultiItem = {
    cf7sType: 'multi-tab',
    cf7sLabel: 'Tab 1',
    expanded: true,
    cf7sActive: true, // new cf7sItems prop, if current tab is active
    children: [], // new cf7sItems prop
    cf7sSelectLabel: 'Multi Tab', // for edit header label
    cf7sSelectGroup: 'cf7sItem', // ?? needed
    cf7Name: 'tab', // ?? needed
    noChildren: false, // ?? needed
    selfClosing: true, // self closing tag  @since 0.7.0
};

Uses some of cf7sItems.js properties for:

  • Visual treeData node parent if is not have Multi tab previously,
  • adding a new tab, with empty children.
  • selfClosing set to true to create self closing <part /> tag.

E. Registering Component

Registering Multi components uses the same approach as Ready by using window addons register function.

window.cf7svisual.addons.register( 'afterFormItems', MultiTabs );
window.cf7svisual.addons.register( 'edit', MultiOptions );

F. Known Issues

  • Multi options is not saved for new created form.
  • Registered Multi component is not rendered after page loaded. Had tried to use webpack chunk import, but it only work for importing chunk path, not URL. Currently it can be solved by enqueue Multi after addons.js and before visual.js file.
  • For previous saved Multi treeData, it fails to render current active tab treeData.

Notes

Add notes here