cofi

cofi

  • Docs
  • Form Demos
  • Components Demos
  • Layout Demos
  • Editor
  • GitHub

›Form Class

Getting started

  • Introduction

Form Class

  • Installation
  • Overview
  • Arguments
  • Id
  • Data
  • Fields
  • Path
  • Component
  • Formatter & Parser
  • Dependencies
  • Required
  • Validators
  • Exclude Term
  • Disable Term
  • Require Term
  • Dependencies Change
  • Context
  • Dirty
  • Invalid
  • Errors
  • Processing
  • Pending Actions
  • Hooks
  • Term
  • Log
  • Error Codes
  • Actions
  • Definition Shorthand

Advanced Usages

  • Grid Usage
  • Form Persistency
  • Undo & Redo
  • Replay Actions
  • Track Actions
  • Server Validation
  • Entity Templates
  • Folder Structure

React Form

  • Installation
  • Overview
  • Form
  • Field
  • Components
  • Layout
  • Demos

Tools

  • Editor
  • DevTools

More Info

  • Test Cofi
  • Packages
  • Why Cofi?
  • Technologies
  • Videos
  • Channels

Contribute

  • Code of Conduct
  • Contributing Guide
  • Contributors

Definition Shorthand

Form's model & resources objects are very descriptive, making a lot of definitions be defined by objects to allow more current / future sub definitions expandable.

For example - a field formatter definition is an object which contains the name of the formatter resource, and optional args object.

birthDate.formatter = { name: 'join', args: { separator: ';' }  }

Sometimes, only the name is defined, making the definition be larger with no good reason.

birthDate.formatter = { name: 'toDate' }

For these and more cases Cofi offers a definition shorthand, allowing shorter model and resources objects to be defined and passed to the Form. Internally, we first transpile the given model and resources to their expanded structures, and store / manage the form using the expanded structures (to avoid a lot of if-else in the code and potential bugs). This means that all places which expose model and resources do it with the expanded (transpiled) objects (such as hooks that pass model and resources to the hook handlers).

The following sections list and demonstrate the available shorthand for form definition.

Components

Optional shorthand for components:

  1. Define field's component as a string
// shorthand
model.fields.firstName.component = 'InputText'; 

// transpiles to
model.fields.firstName.component = { name: 'InputText' }; 
  1. Define component resource as a function
const Greeting = ({ value }) => `Hi ${value}`;

// shorthand
resources.components.Greeting = Greeting;

// transpiles to
resources.components.Greeting = { renderer: Greeting };
  1. Define field's component as a function. In this case there is no need to have a definition in the resources object.
const Greeting = ({ value }) => `Hi ${value}`;

// shorthand
model.fields.firstName.component = Greeting;

// transpiles to
model.fields.firstName.component = { name: 'component1' };
resources.components.component1 = { renderer: Greeting }; 

Formatters Parsers

Optional shorthand for formatters / parsers:

  1. Define field's formatter as a string
// shorthand
model.fields.birthDate.formatter = 'toDate'; 

// transpiles to
model.fields.birthDate.formatter = { name: 'toDate' }; 
  1. Define formatter resource as a function
const addPrefix = ({ value }) => `Hi ${value}`;

// shorthand
resources.conversions.addPrefix = addPrefix;

// transpiles to
resources.conversions.addPrefix = { func: addPrefix };
  1. Define field's formatter as a function. In this case there is no need to have a definition in the resources object.
const addPrefix = ({ value }) => `Hi ${value}`;

// shorthand
model.fields.birthDate.formatter = addPrefix;

// transpiles to
model.fields.birthDate.formatter = { name: 'formatter1' };
resources.conversions.formatter1 = { func: addPrefix }; 

Dependencies Change

Optional shorthand for dependencies change:

  1. Define field's dependenciesChange as a string
// shorthand
model.fields.city.dependenciesChange = 'handleCountryChange'; 

// transpiles to
model.fields.city.dependenciesChange = { name: 'handleCountryChange' }; 
  1. Define dependenciesChange resource as a function
const handleCountryChange = () => {};

// shorthand
resources.conversions.handleCountryChange = handleCountryChange;

// transpiles to
resources.conversions.handleCountryChange = { func: handleCountryChange };
  1. Define field's dependenciesChange as a function. In this case there is no need to have a definition in the resources object.
const handleCountryChange = () => {};

// shorthand
model.fields.city.dependenciesChange = handleCountryChange;

// transpiles to
model.fields.city.dependenciesChange = { name: 'dependenciesChange1' };
resources.conversions.dependenciesChange1 = { func: handleCountryChange }; 

Validators

Optional shorthand for validators:

  1. Define field's validator (in the validators array) as a string
// shorthand
model.fields.firstName.validators = ['unique']; 

// transpiles to
model.fields.firstName.validators = [{ name: 'unique' }]; 
  1. Define validator resource as a function
const unique = () => {};

// shorthand
resources.validators.unique = unique;

// transpiles to
resources.validators.unique = { func: unique };
  1. Define field's validator as a function. In this case there is no need to have a definition in the resources object.
const unique = () => {};

// shorthand
model.fields.firstName.validators = [unique];

// transpiles to
model.fields.firstName.validators = { name: 'validator1' };
resources.validators.validator1 = { func: unique }; 

Terms

Optional shorthand for terms (excludeTerms / disableTerms / requireTerms):

  1. Define field's logical term as a string
// shorthand
model.fields.firstName.disableTerm = 'isNotAllowed'; 
model.fields.lastName.disableTerm = { // conditional term
  operator: 'or', 
  terms: [
    'isNotAllowed', // logical term
    { name: 'empty', args: { fieldId: 'firstName' } } // logical term
  ],
};

// transpiles to
model.fields.firstName.disableTerm = { name: 'isNotAllowed' }; 
model.fields.lastName.disableTerm = { 
  operator: 'or',
  terms: [
    { name: 'isNotAllowed' }
    { name: 'empty', args: { fieldId: 'firstName' } }
  ],
};
  1. Define term resource as a function
const isNotAllowed = () => {};

// shorthand
resources.terms.isNotAllowed = isNotAllowed;

// transpiles to
resources.terms.isNotAllowed = { func: isNotAllowed };
  1. Define field's term logical term as a function. In this case there is no need to have a definition in the resources object.
const isNotAllowed = () => {};

// shorthand
model.fields.firstName.disableTerm = isNotAllowed;

// transpiles to
model.fields.firstName.disableTerm = { name: 'term1' };
resources.terms.term1 = { func: isNotAllowed }; 
← ActionsGrid Usage →
  • Components
  • Formatters Parsers
  • Dependencies Change
  • Validators
  • Terms
cofi
Copyright © 2021 Verizon Media
DOCS
IntroductionForm ClassReact FormReact ComponentsReact Layout
DEMOS
React FormReact ComponentsReact Layout
CONTRIBUTING
Code Of ConductContributing GuideContributorsUsers
CHANNELS
StarGitHubStack OverflowMediumVideos