Examples and walkthroughs

The app used throughout the guides

Boreal provides services to its clients. The team needs to qualify requirements, prepare quotes, obtain approval and retain results with their sources. The guides use this activity to explain each responsibility without switching domains in every chapter.

Stage	App addition	Guide
Directory	Company, email, status and notes	Fields
Browsing	Editable record and filtered table	Surfaces and tables
Integration	Client selection in a quote	Workspace links
Work	Prepare, review and finalize a proposal	Flows
Team	Team access and manager approval	Permissions
Reuse	Publish the app and adapt an installation	Publication

Compose the Client record

Follow Compose interfaces to organize client identity, editable Fields and settings. Then add a Query view of quotes and the Action for preparing a proposal. Each element uses definitions from the same Model; the Surface component reference specifies its properties.

Study a complete Model

NovelFlow applies the same concepts to a novel: characters, places, chapters and preparation work. Dev Studio applies them to software: features, issues, tests and releases. In both cases, the Model defines content and its relationships.

Follow the progressive walkthrough to build your app. Use the reference to check exact properties in these files.

Applied examples : From directory to sales follow-up

The same data flows from the creation Form into a collection of quotes.

Configuration

Fragment placed in forms[]. Properties and accepted values.

{
  "contract": "WorkspaceForm@2",
  "key": "new-client",
  "label": "New client",
  "actionKey": "create-client",
  "targetDefinitionPath": "workspace/clients/surface/client",
  "mode": "create",
  "fields": [
    {
      "contract": "WorkspaceFormControl@2",
      "repeatable": false,
      "key": "company",
      "label": "Company",
      "input": "text",
      "binding": {
        "kind": "field",
        "fieldKey": "company"
      },
      "required": true,
      "ruleKeys": [],
      "options": []
    },
    {
      "contract": "WorkspaceFormControl@2",
      "repeatable": false,
      "key": "status",
      "label": "Status",
      "input": "choice",
      "binding": {
        "kind": "field",
        "fieldKey": "status"
      },
      "required": true,
      "ruleKeys": [],
      "options": [
        "prospect",
        "active"
      ]
    }
  ],
  "ruleKeys": []
}

Variation and connection

Fragment placed in presentation.tableViews[]. Properties and accepted values.

{
  "viewKey": "quotes-table",
  "columns": [
    {
      "key": "number",
      "label": "Number",
      "source": {
        "kind": "native",
        "property": "title"
      }
    },
    {
      "key": "status",
      "label": "Status",
      "source": {
        "kind": "field",
        "fieldPath": "fields/status"
      }
    },
    {
      "key": "amount",
      "label": "Amount",
      "source": {
        "kind": "field",
        "fieldPath": "fields/amount"
      }
    }
  ],
  "openLabel": "Open quote"
}

UI layout example

The illustrative layout below places this configuration in the Clients/Quotes app. Insert each fragment at the stated location, with Field, Query and Action references matching the Model declarations.

1. Number
2. Status
3. Amount
4. Last updated

SurfaceClients / North StudioExample

Examples and walkthroughsFrom directory to sales follow-up

Clients

Client : North StudioStatus: All ⌄Search…

Number	Status	Amount	Open
S-1042	Draft	12 500	↗
S-1041	Approved	8 200	↗
S-1040	Sent	4 750	↗

Client Query resultsNext page →