Data Dictionaries and Shared Utilities

This section focuses on a group of high-frequency capabilities that appear across business applications:

• data dictionaries
• option transformation
• pinyin-enhanced search
• shared utilities from @vef-framework-react/shared

Where Data Dictionaries Come From

Provide the dictionary query function through createApp().render():

createApp().render({
  appContext: {
    dataDictQueryFn: findDataDictItems
  },
  ...
});

Once this is configured, forms and search areas can use:

• useDataDictQuery
• useDataOptionsSelect
• useDataOptionsTreeSelect

Example

const genderSelectProps = useDataOptionsSelect({
  dataDictKey: "common.gender"
});

This is more stable and more consistent than fetching dictionaries manually and transforming them inside each page.

Why Pinyin Search Matters

VEF's option-transformation chain can automatically enrich values with pinyin metadata, which means:

• Chinese labels can be searched directly in Chinese
• full pinyin and pinyin initials can also be used

This is especially useful for people, departments, organizations, and dictionary items.

Common Exports from @vef-framework-react/shared

Export	Use
z	form and parameter validation
EventEmitter	local page event bus
formatDate / getLocalizedDateTime	date and time display
flattenTree / mapTree / traverseTree	tree-data handling
withPinyin	enriches option objects with pinyin indexes
camelCase / constantCase	string transformation

Usage Notes

Whenever a page needs dictionaries, tree utilities, formatting, or validation, it is worth checking shared and the related hooks first.
The framework is designed to reduce repetition in page-level code.