Skip to main content

Fields Configuration

Configuring Field Visibility & Permissions​

To control which fields are editable, read-only, or hidden based on the current user action, we use two configuration objects:

  • fieldConfig: Maps each field to its visibility state across different form operations
  • actionConfig: Maps the name of the form operation (e.g., view, new, review) to an index used in fieldConfig

These configurations are located in the config.jsx file.

config.jsx Example​

config.jsx
export const fieldConfig = {
  // Legend:
  // H = Hidden
  // E = Editable
  // R = Read-only
  //
  // Format: "fieldName": [View, New, Review]

  "btn.review": ["E", "H", "H"],

  "companyName": ["R", "E", "R"],
  "legalForm": ["R", "E", "R"],
  "establishedDate": ["R", "E", "R"],
  "employees": ["R", "E", "R"],
  "capital": ["R", "E", "R"],
  "type": ["R", "E", "R"],
  "address.street": ["R", "E", "R"],
  "address.city": ["R", "E", "R"],
  "address.state": ["R", "E", "R"],
  "address.zip": ["R", "E", "R"],
  "website": ["R", "E", "R"],
  "phone": ["R", "E", "R"],
  "email": ["R", "E", "R"],

  "btn.sh.new": ["H", "E", "H"],
  "btn.sh.clone": ["H", "E", "H"],
  "btn.sh.delete": ["H", "E", "H"],

  "shareholders.firstName": ["R", "E", "R"],
  "shareholders.lastName": ["R", "E", "R"],
  "shareholders.shares": ["R", "E", "R"],
  "shareholders.percentage": ["R", "E", "R"],
  "shareholders.email": ["R", "E", "R"],
  "shareholders.phone": ["R", "E", "R"],

  "vatNumber": ["R", "R", "E"],
  "remark": ["R", "R", "E"],
};

export const actionConfig = {
  view: 0,
  new: 1,
  review: 2,
};

How It Works​

Each field in fieldConfig maps to an array of values that describe its visibility or editability across the available actions:

  • Index 0 = view
  • Index 1 = new
  • Index 2 = review

Example:​

"companyName": ["R", "E", "R"]
  • In view mode → read-only
  • In new mode → editable
  • In review mode → read-only again

This approach ensures granular control over user access and helps create tailored experiences based on the role and operation context.

You can expand this structure as needed to support more actions (e.g., reassign, approve, etc.).