CoCoCoCoCoCo / docs
← Workspace Academy

Workspace Academy · 5 / 5

Prepare the complete customer desk

Connect the note form, identity and confirmation to the same selected customer.

YOUR TASK

Make this happen

3 steps

  1. Add the note form to the profile panel: hidden entityId from selectedCustomerId, required body textarea, addCustomerNote submit with confirmation, and save/reset actions.

  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 form.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, workspace_panel.details, workspace_handler.addNote]
}

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"
  noun = "customer"
  identifierState = "selectedCustomerId"
}
workspace_detail_field "email" {
  component = "detail-field"
  label = "Email"
  bindings = { "value" = "getCustomer.email" }
}
workspace_record_detail "customer" {
  component = "record-detail"
  id = "customer-profile"
  bindings = { "text" = "getCustomer.name" }
  children = [workspace_detail_field.email]
}
workspace_panel "details" {
  component = "panel"
  id = "details"
  title = "Customer profile"
  children = [workspace_query_magicquery.customer, workspace_record_detail.customer]
}

notes.cococo

workspace_handler_constraint "customer" {
  component = "handler-constraint"
  path = "entityId"
  minLength = 1
}
workspace_handler "addNote" {
  component = "handler"
  name = "addCustomerNote"
  mode = "action"
  children = [workspace_handler_constraint.customer]
}

form.cococo

workspace_form_submit "note" {
  component = "form-submit"
  type = "lua"
  # TODO: add handler — see the task above.
  # TODO: add errors — see the task above.
  # TODO: add confirm — see the task above.
}

workspace_form_value "customer" {
  component = "form-value"
  # TODO: add path — see the task above.
  # TODO: add state — see the task above.
}

workspace_form_field "body" {
  component = "form-field"
  # TODO: add path — see the task above.
  label = "New note"
  # TODO: add control — see the task above.
  # TODO: add minLength — see the task above.
}

workspace_form_actions "note" {
  component = "form-actions"
  # TODO: add saveLabel — see the task above.
  # TODO: add resetLabel — see the task above.
}

workspace_form "note" {
  component = "form"
  id = "new-note"
  # TODO: add mode — 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