Workspace Academy · 2 / 5

Keep the selected customer

Connect list selection to shared state so later panels can follow it.

YOUR TASK

Make this happen

3 steps

Upgrade the read-only table to a selectable record list with key customer.node.id and primary customer.node.name. Add workspace_state.selection named selectedCustomerId with an empty value, include it before the directory, and connect list select to selectedCustomerId.
Keep the working capabilities from the previous lesson and connect the new pieces to the same solution.
Check the complete solution, then inspect any unmet requirements.

THE IDEA BEHIND IT

What this step adds

Upgrade the read-only table to a selectable record list with key customer.node.id and primary customer.node.name. Add workspace_state.selection named selectedCustomerId with an empty value, include it before the directory, and connect list select to selectedCustomerId.

Files to work in

main.cococo, directory.cococo. Other files are the working baseline. New files include named resource skeletons and TODO guidance. Complete their fields and connect them using the objectives, schema completion and reference guide.

Selection is shared; results are local

The state declaration belongs to the workspace. Each panel owns its query result. Pass the selected ID between panels rather than attempting to read another panel’s result.

Stable keys survive refresh

A customer ID still identifies the same customer when ordering or pagination changes. A row position does not.

Local checks validate typed virtual models, composition and the lesson requirements. They do not run queries, render the platform UI, publish versions or prove server authorisation. Complete the platform compiler and preview checks before publishing.

Files to change: main.cococo, directory.cococo

What you’re building: Give customer-service staff one screen to find a customer, inspect contact details and prepare a guarded note form.

This step starts with the earlier solution and one new challenge. Each lesson keeps its own draft.

Read the starter files

main.cococo

workspace_document "handoff" {
  id = "customer-desk"
  title = "Customer desk"
  role = "Customer service"
  domains = "customer"
  children = [workspace_panel.directory]
}

directory.cococo

workspace_query_graphql "customers" {
  component = "query-graphql"
  source = "query CustomerDirectory { customers: listCustomers(first: 50) { edges { node { id name } } } }"
}
workspace_table_column "name" {
  component = "table-column"
  label = "Customer"
  bindings = { value = "customer.node.name" }
}
workspace_record_table "customers" {
  component = "record-table"
  id = "customer-table"
  bindings = { "for" = "customers.edges", "as" = "customer" }
  children = [workspace_table_column.name]
}
workspace_panel "directory" {
  component = "panel"
  id = "directory"
  title = "Customers"
  children = [workspace_query_graphql.customers, workspace_record_table.customers]
}

Supplied supporting files

Reference: workspaces · getting-started workspaces · binding-state workspaces · queries workspaces · forms workspaces · server-lua workspaces · publication