Dynamic Grid
Field Configuration & Background Color Guide
The Wave Dynamic Grid lets a single grid adapt its columns per record. Instead of building a separate grid for every field requirement, you define one grid and then drive what it shows using a JSON configuration stored on the parent record.
How It Works
Field Access Types
Each field in the configuration is assigned one of the following access types:
Mandatory
Field must be filled in. Displayed with a red cell background when empty.
Read-Only
Field is visible but cannot be edited in the grid.
Read/Write
Field is fully editable.
Good to know
If a user makes changes (like filters or rules) after a config is applied, a personal copy is created to preserve those. When the parent record config is updated and a hard refresh is done, the grid honours the latest JSON.
Error handling
If all fields in your config are invalid, the grid shows an error screen instead of rendering. Fix at least one valid field ID to recover.
Field Configuration JSON
The config is a JSON object with two required properties: mode and at least one entry in the fields array with a valid id. The mode property controls how the grid handles existing fields. All other field properties are optional. If omitted, the existing configuration is used; if included with an invalid value, the entire field is dropped.
Append Mode vs Replace Mode
Set the mode property to control whether the JSON adds on top of the existing grid or fully replaces it.
Existing fields stay. Any field in the JSON that matches an existing one gets updated; any new field gets added.
Use when you want to add or tweak a few columns without touching the rest.
Removes all existing fields. Only the fields in the JSON are shown.
Use when you want to define the exact set of columns; no more, no less.
What happens to existing fields
All existing fields are kept. The JSON either updates a matching field (by ID) or adds a new one.
All existing fields are removed. Only the fields defined in the JSON are shown.
New field in JSON (not in grid yet)
Added to the grid.
Added to the grid.
Field in JSON that already exists
Updated with the properties defined in the JSON.
Replaced with the properties defined in the JSON.
Field in grid but not in JSON
Kept — untouched.
Removed.
Sequence / ordering
JSON sequence is honored. Fields without a sequence are placed last by JSON order.
JSON sequence is honored. Fields without a sequence are placed last by JSON order.
Typical use case
Add or update a few columns without disturbing the rest of the grid.
Define the exact set of columns to show; no more, no less.
Append Mode — Example
Append mode adds and updates fields in an existing grid while preserving the current configuration. It allows you to add new fields, modify existing field settings, and reorder fields without recreating the entire grid.
Result: The existing grid fields are retained. The Name fields are updated, Quantity is added as a new field, and the Product field is hidden. The field order is updated according to the specified sequence values.
Replace Mode — Example
Replace mode replaces the existing grid configuration with the fields specified in the configuration. Any existing fields that are not included in the configuration are removed, and the grid is rebuilt based on the provided field definitions and settings.
Result: All original fields are removed and replaced with the fields defined in the configuration. The grid displays four fields because the Product field is configured as hidden. The field order is updated according to the specified sequence values.
Property Reference
id
String · Required — Must match the Salesforce field API name, case-sensitive. Fields with a missing or empty id is dropped.
label
String · Optional — Overrides the column header text. If invalid, the field is dropped.
isReadOnly
Boolean · Optional — Show the field but block editing. If invalid, the field is dropped.
isRequired
Boolean · Optional — Require a value before the row saves. If invalid, the field is dropped.
isHidden
Boolean · Optional — Hide the field from the grid entirely. If invalid, the field is dropped.
sequence
Integer > 0 · Optional — Column position. If provided, it is honored; if omitted, the field is placed last based on its order in the JSON
backgroundColor
Hex string · Optional — Column background color. Snaps to the nearest theme color if exact match not found.
Note: When no key is specified, the existing configuration is automatically selected and used.
Each field is validated independently. If no valid field is found (the fields array is empty, missing, or all entries have invalid IDs), the grid displays an error screen instead of rendering.
JSON Format
The first object below is a minimal configuration (inherits all settings); the second specifies every property explicitly. When passed to the component, this object must be serialised as a JSON string.
Background Color Support
The backgroundColor property lets you set a column background using any hex code. If the hex doesn't match a theme color exactly, Wave automatically snaps it to the closest match.
Rule Precedence
If a background color and a conditional formatting rule are both applied to the same column, the rule takes precedence and the background color is overridden for rows where the rule condition is met.
Rules always take precedence over backgroundColor. The configured background color remains visible for rows where no rule condition is triggered.
Setting a Background Color
Set the backgroundColor property to any valid hex code:
If #FFD700 isn't in the theme palette, Wave picks the nearest available color automatically — you don't need to do anything.
Supported Theme Colors
These are the exact hex codes that are honoured without snapping. Editable and read-only fields use separate palettes.
If the specified hex code does not exactly match a color in the available palette, the closest matching color from the palette is applied automatically. Exact hex codes are honored only for Valorx theme colors.
Coral
#FFD8DE
#FFD1D7
#FFCDE8
#FFB8DE
#FFA8CC
Pink
#FFD6FA
#FFC7F3
#FFBDF8
#FBCCFF
#F5B8FF
Sunset
#F5DDD6
#F9C8BE
#FFC2BC
#F0C4C4
#FFADA6
Yellow
#FEEDBF
#FFF0B3
#FFE8A0
#FFE091
#FFD4AE
Lime
#EEF5C4
#F0F9A8
#FAFFBE
#E4EEAA
#E6FFC7
Green
#DDE5CC
#D5E5CC
#D4EBCA
#C8F0C4
#C7EFAF
Teal
#BEE8D6
#CFEFE1
#D6F5DF
#C7FFE1
#AEFFD4
Mint
#D6F7F7
#C5F0F0
#C4F0F0
#AFEFEF
#9FE8E8
Aqua
#D6F0F8
#C8EBFC
#C4E8F0
#B8E4F2
#ADE0EE
Blue
#E2EDFF
#D6E1F5
#CFDEFA
#D1DEFF
#BDD4FF
Purple
#E9EAFF
#D5DAFF
#C7CDFF
#B4BCFF
#A8B2FF
Violet
#E7DAFC
#EBD6F5
#E0C7FF
#D2B8FD
#C3C4F0
Cool Tan
#F5EFE0
#F2EAD2
#EDE4C5
#E8DCBA
#E0D7B8
Warm Tan
#F7EDD0
#F3E5BF
#EEDCAC
#E8D49A
#F0D090
Cool Gray
#D9DBE0
#E8E9F4
#DCDDED
#CDD0E4
#C4C7DA
Warm Gray
#E4E1DC
#D8D6D2
#CECAC4
#C9C9C9
#BFBCB8
Gray (Read-only)
#F2F2F2
#ECEFEC
#E5E5E5
#D8D8D8
#C9CACE
Cool Gray (Read-only)
#F2EFF0
#EFF3ED
#E3E7E5
#DEE5E9
#A8B4BC
Warm Gray (Read-only)
#EEEBF1
#E5E3E5
#DEDBD3
#C8C0B4
#A09080
Passing Configuration to the Valorx Grid Component
Both the Aura grid and the LWC grid accept the configuration through the gridConfig property. Bind it to an attribute or property that holds your serialized JSON string. The grid re-renders automatically when the value changes.
Aura Grid
Component name: (valorxwave:ValorxRapidGrid)
LWC Grid (valorxGrid)
Component name (managed package, subscriber org): c-valorxwave-valorx-grid
If a previously saved configuration is loaded on init and assigned to gridConfig, the grid applies it automatically when the component renders.
Runtime Updates via Lightning Message Service (LMS)
If a previously saved configuration is loaded on init and assigned to gridConfig, the grid applies it automatically when the component renders.
Chanel Name: valorxwave__callbackMessageChannel__c
Message Payload
value
String
Serialised JSON configuration.
status
String
SUCCESS or ERROR.
data
String
Set to RowActionCompleted to trigger a grid update.
Example
Last updated
Was this helpful?