Workspace Academy · 1 / 5

Find a customer

Build a useful directory, keeping the result alias and list binding aligned.

YOUR TASK

Make this happen

2 steps

Build a read-only customer table from customers.edges, using a Customer column bound to customer.node.name. Define workspace_table_column.name, workspace_record_table.customers and workspace_panel.directory (title Customers); include the query before the table in panel children.
Check the complete solution, then inspect any unmet requirements.

THE IDEA BEHIND IT

What this step adds

Build a read-only customer table from customers.edges, using a Customer column bound to customer.node.name.

Files to work in

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.

One panel owns one response

The query aliases listCustomers to customers. The record list therefore reads customers.edges; its item name customer starts every row path. Renaming only one side breaks the screen.

Validate before publishing

This exercise checks the declared model and bindings. The platform compiler and a preview with authorised data are still needed to confirm the screen works.

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: 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.

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"
  # TODO: bind value to customer.node.name.
}
workspace_record_table "customers" {
  component = "record-table"
  id = "customer-table"
  # TODO: bind customers.edges as customer and attach the name column.
}
workspace_panel "directory" {
  component = "panel"
  id = "directory"
  title = "Customers"
  # TODO: attach the query, followed by the table.
}

Supplied supporting files

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