Article Feed

Renders a stream of article records (title, summary, url, topic, thumbnail) as a lead story, a card grid and topic filters.

Add it to an app

Open the app builder and find Article Feed in the component palette.
Insert it into the intended region or container.
Set its properties in the inspector. Use a literal for a fixed value or a binding for a value supplied by the app.
Connect its events where the app should respond to a user gesture.
Preview with representative data and save after resolving validation problems.

The type name in the builder’s code view is article_feed.

Settings

Setting	Accepted value	Required	Default	What it controls
Action button label (empty hides it) (`actionLabel`)	string	No	"Refresh"	The toolbar button that fires onAction. The listed default is inserted when adding a new component.
Active run id (`activeRunId`)	string	No	Not specified	Supports expression bindings.
Run edition fact (`edition`)	object	No	Not specified	Supports expression bindings.
Edition key (server-minted) (`editionKey`)	string	No	Not specified	Supports expression bindings. A page under another key is refused, never spliced in.
Empty text (`emptyText`)	string	No	"No articles yet."	The listed default is inserted when adding a new component.
Text filter (`filterText`)	string	No	Not specified	Supports expression bindings. Matches title, summary, source and topic.
Topic filter (controlled) (`filterTopic`)	string	No	Not specified	Supports expression bindings. Bound (even to ''), it controls the topic filter and the chips turn passive.
Lead stories (0–3) (`heroCount`)	integer; minimum 0; maximum 3	No	1	The listed default is inserted when adding a new component.
Articles (`items`)	list of object	No	[]	Supports expression bindings. The article records (items mode): title, summary, url, topic, source\|site_name, published_at, thumbnail_data_url, image_alt, id. The listed default is inserted when adding a new component.
Loading (run status or boolean) (`loading`)	string	No	Not specified	Supports expression bindings. A run status or a boolean; drives the skeleton and the busy action button.
Articles shown (max 48) / page size in records mode (6-48) (`pageSize`)	integer; minimum 1; maximum 48	No	48	The listed default is inserted when adding a new component.
Data source id for further pages (`pageSource`)	string	No	Not specified	—
Authored progress phases (`phases`)	list of object	No	Not specified	{label, steps, countStep, countField, unit?} per phase.
Run steps (`progress`)	list of object	No	Not specified	Supports expression bindings.
Data source id of the 1-row run marker (`progressSource`)	string	No	Not specified	—
Article records (page one) (`records`)	list of object	No	Not specified	Supports expression bindings. The source's full envelopes, each raw_payload an article record — switches on records mode.
A refresh trigger was refused and retried (`runCoalesceConflict`)	boolean	No	Not specified	Supports expression bindings.
Joined a running refresh (`runCoalesced`)	boolean	No	Not specified	Supports expression bindings.
Refresh patience budget (ms) (`runDeadlineMs`)	integer; minimum 1000; maximum 7200000	No	Not specified	—
Run error (`runError`)	string	No	Not specified	Supports expression bindings.
The server asked this app to slow down (`runRateLimited`)	boolean	No	Not specified	Supports expression bindings.
Selected article id (controlled) (`selectedId`)	string	No	Not specified	Supports expression bindings. Bound, it controls the pressed card; unbound, selection is internal.
Theme (system \| light \| dark) (`theme`)	"system" / "light" / "dark"	No	"system"	Supports expression bindings. The listed default is inserted when adding a new component.
Publication title (`title`)	string	No	"Articles"	Supports expression bindings. The masthead nameplate. The listed default is inserted when adding a new component.

Values available to bindings

Value	Type	Initial value	Meaning
`selectedItem`	object or null	null	The selected card's full raw record; null on deselect.
`topics`	list of string	[]	Distinct topics across all bound items, first-appearance order.

Refer to these values through components.<component-id>.<value> in a binding. Use the identifier assigned to this instance of Article Feed, not the component type name.

Events

onAction — The toolbar action button was clicked (wire a refresh to it).
onSelect — A card was selected or deselected, after selectedItem is published.

Connect only the actions the app needs. An event can fetch results, run an enabled data source, set state, update another component, show a notification, or navigate where supported.

Keyboard and accessible labels

Accessible label source: The masthead title.

Enter/Space on a card selects it; again deselects.

Updates are announced through the component’s live status region.

Example: Bound articles with a refresh button

Setting	Example value
`heroCount`	1
`items`	"{{ dataSources.news.data \|\| [] }}"
`loading`	"{{ dataSources.news.runStatus }}"
`pageSize`	24
`theme`	"{{ app.ui?.theme \|\| 'system' }}"
`title`	"{{ app.name }}"

When onAction occurs, the example performs:

triggerDataSource with {"dataSourceId":"news","mode":"run"}

Example: Records mode: a lazy, edition-pinned record stream

Setting	Example value
`editionKey`	"{{ dataSources.news.editionKey }}"
`loading`	"{{ dataSources.news.runStatus }}"
`pageSize`	12
`pageSource`	"news"
`phases`	[{"countField":"output","countStep":"topics","label":"Collecting","steps":["topics","collect"],"unit":"topics"}]
`progress`	"{{ dataSources.news.runSteps }}"
`progressSource`	"progress"
`records`	"{{ dataSources.news.records }}"
`runDeadlineMs`	2700000

When onSelect occurs, the example performs:

setStateValue with {"key":"article","value":"{{ components.Feed.selectedItem }}"}

If it is empty or unavailable

Check the source binding, the selected item, and the app’s access. A hosted document, table, review, or storage component needs the corresponding app capability; an offline preview cannot supply live private data. A source running with no results is different from an invalid binding. Inspect the app’s workflow and data source before changing the presentation.