ObjectFieldExplorer

<caos-object-field-explorer>

an object’s field list, filtered by type and origin, with real usage against each field

May be placed on a page inside an app.

Inputs

Name	Attribute	Description	Type	Default	Required
`fields`	property only	The object’s fields: `{ apiName, label, type, origin, populated?, recordCount? }[]`. `populated` absent means NOT MEASURED, which is never drawn as zero.	json	empty list	Optional
`recordCount`	`record-count`, markup only	How many records the object holds, so usage can be stated without repeating the total on every field. A field carrying its own `recordCount` wins.	number	none declared	Optional
`type`	`type`, markup only	Show only fields of this type. The filter’s CONTENTS are the types actually present on the object — offering a type nothing here uses is offering an empty result.	text — anything it does not recognise reads as `every type, when the attribute is absent or empty`	none declared	Optional
`origin`	`origin`, markup only	Show only standard or only custom fields.	text — recognises standard, custom; anything else reads as `both origins, when the attribute is absent or empty`	none declared	Optional
`search`	`search`, markup only	Narrows by API name or label. Intersects with the two filters rather than replacing them.	text	none declared	Optional
`sortKey`	`sort-key`, markup only	Which column orders the rows.	text — one of apiName, label, type, origin, usage	apiName	Optional
`sortDirection`	`sort-direction`, markup only	Which way. Unmeasured usage sorts last in BOTH directions — it is not a usage of zero.	text — one of asc, desc	asc	Optional

Events

Name	When it fires	What it carries
`caos-field-filter`	The type or origin filter changes.	`{ type, origin }`.
`caos-field-export`	Export is pressed.	`{ fields }` — the fields as currently filtered and ordered, not the whole set.

Slots

Not documented yet — this piece has not said.

Styling hooks

Not documented yet — this piece has not said.

Methods

Not documented yet — this piece has not said.

Readable state

Name	Type	What it tells you
`visibleFields`	CaosObjectField[]	The fields surviving every filter, in order.
`neverUsed`	CaosObjectField[]	The fields MEASURED as populated on no records. Unmeasured fields are absent from this — they are not known to be unused, only not counted.

Styling parts

Part	Which piece of it	When it is there
`::part(explorer)`	The outer column.	Always
`::part(filters)`	The filter row.	Always
`::part(filter)`	One of the two dropdowns.	Always
`::part(search)`	The search box.	Always
`::part(export)`	The export button.	Always
`::part(summary)`	The count line, including how many are unused and how many unmeasured.	Always
`::part(table)`	The composed data table.	Always
`::part(usage)`	The usage cell — a bar, or the reason there is no figure.	Always

When to use it

When somebody is deciding something about an object’s SHAPE — what is on it, what is custom, what is safe to remove — rather than looking at one record’s data.

What to use instead

RecordFieldInspector — the question is about ONE RECORD’s values rather than about the object’s fields.
RelationshipList — the question is what points AT this object rather than what is on it.

Accessibility

Both filters are real <select> elements with their own accessible names, so the two most-used controls on the screen are reachable and announced without sight. The summary is a role="status" live region and always states how many of the whole set survived the filters — a filtered list that does not say it is filtered is how somebody concludes an object has four fields. Each usage bar carries its own meter semantics and its percentage as a label, so the figure is spoken rather than conveyed only by the bar’s width.

Examples

Fields with their real usage

The column that makes this screen worth opening: two fields are populated on almost every record, one on none of them, and one was never measured — which the row says rather than reporting as zero.

{
  "id": "example",
  "section": "Fields with their real usage",
  "columns": 1,
  "items": [
    {
      "id": "object_field_explorer_1",
      "type": "component",
      "key": "object_field_explorer",
      "inputs": {
        "record_count": 24000,
        "fields": [
          {
            "apiName": "Name",
            "label": "Account Name",
            "type": "Text",
            "origin": "standard",
            "populated": 24000
          },
          {
            "apiName": "Industry",
            "label": "Industry",
            "type": "Picklist",
            "origin": "standard",
            "populated": 14880
          },
          {
            "apiName": "LegacyCode__c",
            "label": "Legacy Code",
            "type": "Text",
            "origin": "custom",
            "populated": 0
          },
          {
            "apiName": "CreditRating__c",
            "label": "Credit Rating",
            "type": "Formula",
            "origin": "custom"
          },
          {
            "apiName": "Website",
            "label": "Website",
            "type": "Url",
            "origin": "standard",
            "populated": 3120
          }
        ]
      }
    }
  ]
}

<caos-object-field-explorer id="objectFieldExplorer1" record-count="24000"></caos-object-field-explorer>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const objectFieldExplorer1 = document.getElementById('objectFieldExplorer1');
objectFieldExplorer1.fields = [
  {
    "apiName": "Name",
    "label": "Account Name",
    "type": "Text",
    "origin": "standard",
    "populated": 24000
  },
  {
    "apiName": "Industry",
    "label": "Industry",
    "type": "Picklist",
    "origin": "standard",
    "populated": 14880
  },
  {
    "apiName": "LegacyCode__c",
    "label": "Legacy Code",
    "type": "Text",
    "origin": "custom",
    "populated": 0
  },
  {
    "apiName": "CreditRating__c",
    "label": "Credit Rating",
    "type": "Formula",
    "origin": "custom"
  },
  {
    "apiName": "Website",
    "label": "Website",
    "type": "Url",
    "origin": "standard",
    "populated": 3120
  }
];

Filtered to the custom fields

Origin is a filter rather than a search term. The summary says five of nine survived, so nobody reads the shortened list as the whole object.

{
  "id": "example",
  "section": "Filtered to the custom fields",
  "columns": 1,
  "items": [
    {
      "id": "object_field_explorer_1",
      "type": "component",
      "key": "object_field_explorer",
      "inputs": {
        "origin": "custom",
        "record_count": 24000,
        "fields": [
          {
            "apiName": "Name",
            "label": "Account Name",
            "type": "Text",
            "origin": "standard",
            "populated": 24000
          },
          {
            "apiName": "Industry",
            "label": "Industry",
            "type": "Picklist",
            "origin": "standard",
            "populated": 14880
          },
          {
            "apiName": "LegacyCode__c",
            "label": "Legacy Code",
            "type": "Text",
            "origin": "custom",
            "populated": 0
          },
          {
            "apiName": "Region__c",
            "label": "Region",
            "type": "Picklist",
            "origin": "custom",
            "populated": 21000
          },
          {
            "apiName": "CreditRating__c",
            "label": "Credit Rating",
            "type": "Formula",
            "origin": "custom"
          }
        ]
      }
    }
  ]
}

<caos-object-field-explorer id="objectFieldExplorer1" origin="custom" record-count="24000"></caos-object-field-explorer>

// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const objectFieldExplorer1 = document.getElementById('objectFieldExplorer1');
objectFieldExplorer1.fields = [
  {
    "apiName": "Name",
    "label": "Account Name",
    "type": "Text",
    "origin": "standard",
    "populated": 24000
  },
  {
    "apiName": "Industry",
    "label": "Industry",
    "type": "Picklist",
    "origin": "standard",
    "populated": 14880
  },
  {
    "apiName": "LegacyCode__c",
    "label": "Legacy Code",
    "type": "Text",
    "origin": "custom",
    "populated": 0
  },
  {
    "apiName": "Region__c",
    "label": "Region",
    "type": "Picklist",
    "origin": "custom",
    "populated": 21000
  },
  {
    "apiName": "CreditRating__c",
    "label": "Credit Rating",
    "type": "Formula",
    "origin": "custom"
  }
];