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

Context

Define context to a field definition when the field's lifecycle calculations (such as excludeTerm, validators and more) depend on external app data.

For example - a specific field can be required only if the logged-in user doesn't have admin permissions (which can be verified using app data that is not part of the form's data).

Note: Form should know how to stand alone. In some cases form depend on app data for calculations. Keep all the dependent app data in a single place as model.context, in order to mock it easily when needed (such as tests to the form, or server validation)

Field Context

model.fields.someField.context - array. Represent array of context keys in model.context object. These key's values are injected to all field's lifecycle handlers (such as excludeTerm, validators and more).

model.fields.someField.context = ['loggedInUser'];

Model Context

model.context - object. Contains app data that the fields might depend on during the form's lifecycle. Key is the context data id (as appear in field.context, and value is the context data which will be injected to all field's lifecycle handlers (such as excludeTerm, validators and more).

model.context = {
  companyId: '12345678',
  loggedInUser: { 
    id: '123', 
    permissions: ['EDIT', 'REFUND_USER'] 
  }
}

Example

Field 'refundMoney' is excluded to a user who don't have 'REFUND_USER' permission.

const model = {
  id: 'order-form',
  fields: {
    // ...
    refundMoney: {
      path: 'refundMoney',
      component: { name: 'InputNumber' },
      context: ['loggedInUser'],
      excludeTerm: {  // field excluded to users that don't have refund permission
        not: true,
        name: 'hasPermission',
        args: { permission: 'REFUND_USER' }
      }
    } 
  },
  context: {
    loggedInUser: { id: '123', permissions: ['EDIT', 'REFUND_USER'] }
  },
  // ...
}

const resources = {
  terms: {
    hasPermission: {
      func: ({ context, args }) => context.loggedInUser.permissions.includes(args.permission),
    }
  }
}

Change Context

When app data (which relevant to the form) changes, A call to the changeContext action is required, in-order to update the form with the new context data, and evaluate the form.

← Dependencies ChangeDirty →
  • Field Context
  • Model Context
  • Example
  • Change Context
cofi
Copyright © 2021 Verizon Media
DOCS
IntroductionForm ClassReact FormReact ComponentsReact Layout
DEMOS
React FormReact ComponentsReact Layout
CONTRIBUTING
Code Of ConductContributing GuideContributorsUsers
CHANNELS
StarGitHubStack OverflowMediumVideos