Skip to content

RelationshipList

<caos-relationship-list>

an object’s child relationships, with the field behind each and what a delete does to it

May be placed on a page inside an app and a record page.

Name Attribute Description Type Default Required
relationships property only What points here: { name, childObject, field, onDelete?, count? }[]. onDelete absent ⇒ NOT STATED, which is drawn as “not stated” and never guessed. count absent ⇒ not counted, which is not the same as none. json empty list Optional
linkable linkable, markup only Make the object names pressable, raising caos-relationship-open. Off by default, because a link to somewhere the host has not wired is worse than plain text. boolean false Optional
emptyText empty-text, markup only What to say when nothing points here. “Nothing points at this object” is a real and useful answer, so it is stated rather than left as a blank table. text Nothing points at this object. Optional
sortKey sort-key, markup only Which column orders the rows. text — one of childObject, name, field, onDelete, count childObject Optional
sortDirection sort-direction, markup only Which way. An uncounted relationship sorts last in both directions. text — one of asc, desc asc Optional
Name When it fires What it carries
caos-relationship-open An object name is pressed, with linkable set. { object }.

Not documented yet — this piece has not said.

Not documented yet — this piece has not said.

Not documented yet — this piece has not said.

Name Type What it tells you
cascading CaosRelationship[] The relationships that would take records with this one. Read it to build a delete warning without re-deciding which behaviours are dangerous.
ordered CaosRelationship[] The relationships in the order they are shown.
Part Which piece of it When it is there
::part(list) The outer column. Always
::part(summary) The count line, including how many would cascade. Always
::part(table) The composed data table. Always
::part(object-link) A pressable object name. linkable is set.
::part(behaviour) The on-delete cell. Always
::part(count) The record-count cell. Always

Before changing or deleting something, when the question is what ELSE depends on it. It is the reverse view of a lookup: not what this points at, but what points here.

  • ObjectFieldExplorer — the question is what is ON this object rather than what points at it.
  • DataTable — the rows are related RECORDS being listed, not the relationships themselves.

The summary is a role="status" live region and names the cascading count in words as well as in red, so “four of these would delete records with this one” is heard rather than only seen. Each delete behaviour is a sentence, not a vocabulary word, so a reader who does not already know what “cascade” means is not left to guess at the most consequential cell on the screen. Object names are <button> elements with an accessible name reading “Open ” when they are pressable, and ordinary text when they are not — never a link-coloured span that does nothing.

Two relationships cascade, one restricts, one empties the reference — each said in words beside its name, and the summary counts the dangerous ones.

{
"id": "example",
"section": "What a delete would take with it",
"columns": 1,
"items": [
{
"id": "relationship_list_1",
"type": "component",
"key": "relationship_list",
"inputs": {
"linkable": true,
"relationships": [
{
"name": "Contacts",
"childObject": "Contact",
"field": "AccountId",
"onDelete": "cascade",
"count": 4120
},
{
"name": "Opportunities",
"childObject": "Opportunity",
"field": "AccountId",
"onDelete": "cascade",
"count": 860
},
{
"name": "Invoices",
"childObject": "Invoice__c",
"field": "Account__c",
"onDelete": "restrict",
"count": 22
},
{
"name": "Notes",
"childObject": "Note",
"field": "ParentId",
"onDelete": "clear",
"count": 0
}
]
}
}
]
}
<caos-relationship-list id="relationshipList1" linkable></caos-relationship-list>
// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const relationshipList1 = document.getElementById('relationshipList1');
relationshipList1.relationships = [
{
"name": "Contacts",
"childObject": "Contact",
"field": "AccountId",
"onDelete": "cascade",
"count": 4120
},
{
"name": "Opportunities",
"childObject": "Opportunity",
"field": "AccountId",
"onDelete": "cascade",
"count": 860
},
{
"name": "Invoices",
"childObject": "Invoice__c",
"field": "Account__c",
"onDelete": "restrict",
"count": 22
},
{
"name": "Notes",
"childObject": "Note",
"field": "ParentId",
"onDelete": "clear",
"count": 0
}
];

A behaviour the caller did not state reads “not stated”, and a relationship nobody counted reads “not counted” — neither is quietly rendered as the reassuring answer.

{
"id": "example",
"section": "What nobody checked",
"columns": 1,
"items": [
{
"id": "relationship_list_1",
"type": "component",
"key": "relationship_list",
"inputs": {
"relationships": [
{
"name": "Contacts",
"childObject": "Contact",
"field": "AccountId",
"onDelete": "cascade",
"count": 4120
},
{
"name": "Cases",
"childObject": "Case",
"field": "AccountId"
},
{
"name": "Assets",
"childObject": "Asset",
"field": "AccountId",
"onDelete": "restrict"
}
]
}
}
]
}
<caos-relationship-list id="relationshipList1"></caos-relationship-list>
// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const relationshipList1 = document.getElementById('relationshipList1');
relationshipList1.relationships = [
{
"name": "Contacts",
"childObject": "Contact",
"field": "AccountId",
"onDelete": "cascade",
"count": 4120
},
{
"name": "Cases",
"childObject": "Case",
"field": "AccountId"
},
{
"name": "Assets",
"childObject": "Asset",
"field": "AccountId",
"onDelete": "restrict"
}
];

A real answer, stated — not a blank table somebody reads as a screen that failed to load.

{
"id": "example",
"section": "Nothing points here",
"columns": 1,
"items": [
{
"id": "relationship_list_1",
"type": "component",
"key": "relationship_list",
"inputs": {
"relationships": []
}
}
]
}
<caos-relationship-list id="relationshipList1"></caos-relationship-list>
// What an attribute cannot hold, set as a property — the same values the preview is drawn with.
const relationshipList1 = document.getElementById('relationshipList1');
relationshipList1.relationships = [];