{
  "id": "ST01",
  "title": "Process chain",
  "topic": "status",
  "use": "The chain says where a process stands. It shows the stages the process runs through, which of them are done and which comes next — and only the stages this process really runs through. Put it at the head of a record whose way has more than two steps.",
  "decisions": [
    "The chain is an ed-stepper, not an ed-breadcrumb: a breadcrumb marks its last item as the current page, while a process stands in the middle and the stages after it are not reached yet.",
    "Only the stages this process really runs through are in the chain: a shown stage promises a wait, so a second approval that applies only above an amount is left out below it.",
    "A branch is a badge beside the process ID, not a stage: Query open (info) says it goes on later, Rejected (danger) says it goes no further. Whether the process must pass through it to reach the next stage decides: yes is a stage, no is a badge.",
    "An ended process shows no chain: the stepper always marks one stage as current, so a chain would claim someone is working where nothing comes next. The badge and a sentence say where the way ended.",
    "The chain is information, not control: its steps are not clickable, because a stage is a state the process was in, not a place to jump to.",
    "A sentence under the chain says who is waiting and since when, because the chain alone does not answer how long it will take.",
    "The chain stands at the head of the record, not in a tab: where the process stands is the first question on opening it."
  ],
  "try": [
    {
      "do": "Switch between the three processes",
      "then": "the chain changes, and the small request has no second approval — it only applies from €1,000"
    },
    {
      "do": "Switch to the request over €1,850",
      "then": "the chain now has five stages instead of four, and the second approval is the current one"
    },
    {
      "do": "Switch to the rejected process",
      "then": "the chain is gone — nothing comes next, and a chain standing on a stage would claim someone works there. The badge and the sentence say where the way ended"
    },
    {
      "do": "Click a stage",
      "then": "nothing happens, and that is intended — the chain is information"
    },
    {
      "do": "Look at the sentence below the chain",
      "then": "it names who is waiting and since when"
    }
  ],
  "revision": 1,
  "changes": [],
  "reviewed": true,
  "source": "<div class=\"ed-stack ed-gap-4\">\n  <!-- Demo only, not part of the pattern. The demo shows three processes, one at a time. A product shows the record it opens, with the one of the three cases below that applies to it. -->\n\n  <section class=\"ed-stack ed-gap-3\" data-process=\"small\">\n    <div class=\"ed-cluster ed-gap-3 ed-align-items-baseline\">\n      <span class=\"ed-caption-m ed-text-tabular\">TR-2026-00418</span>\n      <h2>Hamburg · Customer meeting</h2>\n    </div>\n    <ed-stepper label=\"Where TR-2026-00418 stands\" active=\"approval\">\n      <ed-step name=\"requested\" completed>Requested</ed-step>\n      <ed-step name=\"approval\">Approval by the line manager</ed-step>\n      <ed-step name=\"booked\">Booked</ed-step>\n      <ed-step name=\"settled\">Settled</ed-step>\n    </ed-stepper>\n    <p class=\"ed-cluster ed-gap-2 ed-align-items-center\">\n      <ed-icon name=\"clock\"></ed-icon>\n      <span class=\"ed-font-weight-medium\">Waiting for approval by Kessler, Andrea</span>\n      <span class=\"ed-caption-s\">for 2 days</span>\n    </p>\n  </section>\n\n  <section class=\"ed-stack ed-gap-3\" data-process=\"large\" hidden>\n    <div class=\"ed-cluster ed-gap-3 ed-align-items-baseline\">\n      <span class=\"ed-caption-m ed-text-tabular\">TR-2026-00421</span>\n      <h2>Wien · Group meeting</h2>\n      <ed-badge variant=\"info\">Query open</ed-badge>\n    </div>\n    <ed-stepper label=\"Where TR-2026-00421 stands\" active=\"division\">\n      <ed-step name=\"requested\" completed>Requested</ed-step>\n      <ed-step name=\"approval\" completed>Approval by the line manager</ed-step>\n      <ed-step name=\"division\">Approval by the division head</ed-step>\n      <ed-step name=\"booked\">Booked</ed-step>\n      <ed-step name=\"settled\">Settled</ed-step>\n    </ed-stepper>\n    <p class=\"ed-cluster ed-gap-2 ed-align-items-center\">\n      <ed-icon name=\"clock\"></ed-icon>\n      <span class=\"ed-font-weight-medium\">Waiting for approval by the division head</span>\n      <span class=\"ed-caption-s\">for 4 hours</span>\n    </p>\n  </section>\n\n  <section class=\"ed-stack ed-gap-3\" data-process=\"rejected\" hidden>\n    <div class=\"ed-cluster ed-gap-3 ed-align-items-baseline\">\n      <span class=\"ed-caption-m ed-text-tabular\">TR-2026-00409</span>\n      <h2>Zürich · Trade fair</h2>\n      <ed-badge variant=\"danger\">Rejected</ed-badge>\n    </div>\n    <p class=\"ed-cluster ed-gap-2 ed-align-items-center\">\n      <ed-icon name=\"close_circle\"></ed-icon>\n      <span class=\"ed-font-weight-medium\">Rejected in the approval by the line manager</span>\n      <span class=\"ed-caption-s\">on September 8, 2026 · the process ends here</span>\n    </p>\n  </section>\n</div>",
  "page": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/status/st01-process-chain/",
  "topicPage": "https://test-apps.eurodata.de/a/eurodata-ui/docs/patterns/status/"
}
