CoCoCoCoCoCo / docs
← Workspace Academy

Workspace Academy · 3 / 5

Inspect the selected customer

Add a separate detail boundary that follows the directory selection.

YOUR TASK

Make this happen

3 steps

  1. Add a customer profile panel using a magic query whose identifierState is selectedCustomerId. Display getCustomer.name and getCustomer.email, then attach the panel to the document.

  2. Keep the working capabilities from the previous lesson and connect the new pieces to the same solution.

  3. Check the complete solution, then inspect any unmet requirements.

Start in details.cococo, then choose Check solution.

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_state.selection, workspace_panel.directory]
}

directory.cococo

workspace_state "selection" {
  component = "state"
  name = "selectedCustomerId"
  value = ""
}
workspace_query_graphql "customers" {
  component = "query-graphql"
  source = "query CustomerDirectory { customers: listCustomers(first: 50) { edges { node { id name } } } }"
}
workspace_record_list "customers" {
  component = "record-list"
  id = "customer-list"
  bindings = { "for" = "customers.edges", "as" = "customer" }
  key = "customer.node.id"
  primary = "customer.node.name"
  select = "selectedCustomerId"
}
workspace_panel "directory" {
  component = "panel"
  id = "directory"
  title = "Customers"
  children = [workspace_query_graphql.customers, workspace_record_list.customers]
}

details.cococo

workspace_query_magicquery "customer" {
  component = "query-magicquery"
  # TODO: add noun — see the task above.
  # TODO: add identifierState — see the task above.
}

workspace_detail_field "email" {
  component = "detail-field"
  label = "Email"
  # TODO: add bindings — see the task above.
}

workspace_record_detail "customer" {
  component = "record-detail"
  id = "customer-profile"
  # TODO: add bindings — see the task above.
  # TODO: add children — see the task above.
}

workspace_panel "details" {
  component = "panel"
  id = "details"
  # TODO: add title — see the task above.
  # TODO: add children — see the task above.
}
Supplied supporting files

Reference: workspaces · getting-startedworkspaces · binding-stateworkspaces · queriesworkspaces · formsworkspaces · server-luaworkspaces · publication