catreact-html

Catavolt Javascript SDK and React Components

Overview

The Catavolt Javascript solution is comprised of three layers, all independently usable, and all providing a different level of programmatic access and customization opportunies.

1. The Catavolt Javascript SDK - A pure Javascript API, providing low-level access to the Catavolt data model and server API.
2. The Catavolt Core React Components - A set of components that provide declarative access to many of the SDK functions, making the construction of custom Catavolt Apps much easier. These components provide very minimal, default styling, and allow the client to fully control the document structure (i.e. html and css)
3. The Catavolt React HTML Components - A set of components that provide default styling, include some html markup, but still allow for customization and the application of a custom style. The components are also built so that any single component could be replaced (or wrapped) with a custom component if desired.

The Catavolt React Component hierarchy mimics the Catavolt Extender (server model) as well as the object model used in the Catvolt SDK. Please see this document.

Catavolt React HTML Components (‘catavolt-html’ package)

<CvLoginPanel/>
Basic styled, configurable Login Component
CvLoginPanelProps

<CvWorkbenchManager/>
Basic Workbench ‘switcher’ composed of a CvDropdownWorkbenchMenu and CvGraphicalWorkbench by default. ‘Pluggable’ with other implementations of these.
CvWorkbenchManagerProps

<CvGraphicalWorkbench/>
Provides a styled, ‘icon-based’ view of a workbench and launchers, with configurable number of columns.
CvGraphicalWorkbenchProps

<CvDropdownWorkbenchMenu/>
Provides ‘Workbench selection’ menu implementations for selecting an active workbench. Currently a basic ‘drop-down’ menu and a ‘Tabbed’ menu are available.
CvGraphicalWorkbenchMenuProps

<CvNavigator/>
Renders a ‘Navigation Request’ using a default, Catavolt styled CvFormPanel
CvNavigatorProps

<CvWebNavigator/>
Renders a ‘Web Navigation Request’ by opening the url in a browser
CvWebNavigatorProps

<CvFormPanel/>
Builds ‘styled’ subtypes of Form layouts (tabbed, 3-pane, ordered, etc.). Provides pluggable access for new or custom form layouts.
CvFormPanel

<CvListPanel/>
Simple tabular list renderer.
CvListPanelProps

<CvGridPanel/>
Default tabular list renderer.
CvGridPanelProps

<CvDetailsPanel/>
Default ‘cell’ based detail renderer. Provides editing/saving support. Uses CvCellValueDef’s to render cells.
CvDetailsPanelProps

<CvCellValueDef/>
Render’s a Catavolt ‘Cell Value Definition’. AttributeCellValueDef, LabelCellValueDef, etc.
CvCellValueDefProps

<CvDataAnno/>
Applies default style to a properties and records, based on the Data Annotations attached to the entities (if any).
CvDataAnnoProps

<CvHeroHeader/>
Convenience component to add a logo or company header
CvHeroHeaderProps

<CvDropdownMenu/>
Renders MenuDef’s as a basic ‘Dropdown’ menu
CvMenuProps

<CvBarcodeScanPanel/>
Render a default, styled barcode scan detail panel

<CvGeoInfoPanel/>
Render a default, styled geo location or geofix detail panel

<CvMapPanel/>
Render a default, styled map panel
CvMapPanelProps

<CvCalendarPanel/>
(pending implementation) Render a default, styled calendar

<CvGraphPanel/>
Render a default, styled graph CvGraphPanelProps

<CvImagePickerPanel/>
(pending implementation) Render a default, styled image picker panel

<CvMessagePanel/>
Uses a {@link CvMessagePane} to display a "toast-like" notification of messages (based on toast.js) CvMessagePanelProps