Detail View with Multiple Query Integration

Description

This screen demonstrates a complex detail view that aggregates data from multiple sources through various queries. The Job Assessment Detail screen showcases how to build rich, data-intensive interfaces that pull information from related entities, external services, and calculated fields. With 28 different queries, this pattern shows how Stack9 handles complex data orchestration for comprehensive detail pages. The screen uses a component-based architecture allowing for flexible layout and widget placement.

Use Case

Used in an arborist job management system to provide a complete view of job assessments. The screen aggregates data about the job, client, site, trees, tasks, quotes, weather conditions, equipment requirements, and document templates. Staff can view all relevant information in one place, generate quotes, and manage the assessment workflow.

Key Features

• 28 integrated queries for comprehensive data aggregation
• Route parameters for dynamic content loading
• Component-based architecture with PageRoot container
• Queries for related entities (jobs, clients, sites, trees)
• Integration with mapping and template services
• Support for filtered lists and detail retrievals
• Equipment and resource requirement queries
• Document template integration

JSON Definition

{
  "head": {
    "title": "Job assessment detail",
    "key": "job_assessment_detail",
    "route": "job-assessment-detail/:id",
    "app": "jobs"
  },
  "screenType": "detailView",
  "components": {
    "ROOT": {
      "type": {
        "resolvedName": "PageRoot"
      },
      "isCanvas": true,
      "props": {},
      "displayName": "Container",
      "custom": {},
      "parent": "",
      "hidden": false,
      "nodes": [],
      "linkedNodes": {}
    }
  },
  "queries": [
    {
      "name": "getFilteredJobAssessments",
      "queryKey": "getfilteredjobassessments",
      "userParams": {}
    },
    {
      "name": "getJobAssessmentDetails",
      "queryKey": "getjobassessmentdetails",
      "userParams": {}
    },
    {
      "name": "getFilteredJobTaskList",
      "queryKey": "getfilteredjobtasklist",
      "userParams": {}
    },
    {
      "name": "getFilteredJobQuotesList",
      "queryKey": "getfilteredjobquoteslist",
      "userParams": {
        "id": ""
      }
    },
    {
      "name": "getJobQuoteDetails",
      "queryKey": "getjobquotedetails",
      "userParams": {}
    },
    {
      "name": "getJobTaskDetails",
      "queryKey": "getjobtaskdetails",
      "userParams": {}
    },
    {
      "name": "getJobTaskHistory",
      "queryKey": "getjobtaskhistory",
      "userParams": {}
    },
    {
      "name": "getClientSiteDetails",
      "queryKey": "getclientsitedetails",
      "userParams": {}
    },
    {
      "name": "getContactsByClientSiteId",
      "queryKey": "getcontactsbyclientsiteid"
    },
    {
      "name": "getClientSiteContactDetails",
      "queryKey": "getclientsitecontactdetails"
    },
    {
      "name": "getClientDetails",
      "queryKey": "getclientdetails",
      "userParams": {}
    },
    {
      "name": "getTreeNamesByClientSiteId",
      "queryKey": "gettreenamesbyclientsiteid",
      "userParams": {}
    },
    {
      "name": "getTreeDetails",
      "queryKey": "gettreedetails",
      "userParams": {}
    },
    {
      "name": "getTreeTaskHistory",
      "queryKey": "gettreetaskhistory",
      "userParams": {}
    },
    {
      "name": "getTreesToPlotInClientSiteMap",
      "queryKey": "gettreestoplotinclientsitemap"
    },
    {
      "name": "getActiveArboristRecommendations",
      "queryKey": "getactivearboristrecommendations"
    },
    {
      "name": "getActiveArboristRationales",
      "queryKey": "getactivearboristrationales"
    },
    {
      "name": "getTreeFormListFiltered",
      "queryKey": "gettreeformlistfiltered",
      "userParams": {}
    },
    {
      "name": "getPriceListDetails",
      "queryKey": "getpricelistdetails",
      "userParams": {}
    },
    {
      "name": "getClientQuoteTemplateData",
      "queryKey": "getclientquotetemplatedata",
      "userParams": {
        "id": "{{id}}"
      }
    },
    {
      "name": "getQbuildQuoteTemplateData",
      "queryKey": "getqbuildquotetemplatedata"
    },
    {
      "name": "getdocxtemplateslist",
      "queryKey": "getdocxtemplateslist"
    },
    {
      "name": "getActiveWeatherConditionList",
      "queryKey": "getactiveweatherconditionlist"
    },
    {
      "name": "getActiveTruckRequirementList",
      "queryKey": "getactivetruckrequirementlist"
    },
    {
      "name": "getActiveChipperRequirementList",
      "queryKey": "getactivechipperrequirementlist"
    },
    {
      "name": "getActiveTeamRequirementList",
      "queryKey": "getactiveteamrequirementlist"
    },
    {
      "name": "getActiveGrinderRequirementList",
      "queryKey": "getactivegrinderrequirementlist"
    },
    {
      "name": "getActiveEWPRequirementList",
      "queryKey": "getactiveewprequirementlist"
    },
    {
      "name": "getActiveLoaderRequirementList",
      "queryKey": "getactiveloaderrequirementlist"
    }
  ]
}

Notes

• Route parameters (:id) enable dynamic content loading
• The component architecture allows for custom UI composition
• Query parameters can reference route params using template syntax
• Multiple queries can be executed in parallel for performance
• Empty userParams objects allow for runtime parameter injection
• The screen aggregates master data, transactional data, and configuration
• Queries follow a naming convention for clarity and maintainability