Branch Component

Category: Editor | JavaScript | Components

---

Editable item to aid in configuring decision making within the Editor for form setup. Branches consist of one or more BranchCondition items that need to be true, in order for the form journey to continue on to the page specified by the related BranchDestination propery.

new Branch(jQuery wrapped DIV node [, configurable options ]);

Code: javascript/src/component_branch.js
JS test: test/component_branch_test.js

---

Branch

To add Branch component functionality to your HTML you simply need to create an instance by passing, as a minimum, your target <div class=branch" /> markup element.

Code Example:

var $node = $(".branchMarkupElement");
var branch = new Branch($node, {
      branch_index: this._branchCount,
      css_classes_error: "error govuk-form-group--error",
      selector_answer: ".answer",
      selector_branch_remove: ".branch-remover",
      selector_condition: ".condition",
      selector_condition_add: ".condition-injector",
      selector_condition_remove: ".condition-remover",
      selector_destination: ".destination",
      selector_error_messsage: ".govuk-error-message",
      selector_question: ".question",
      expression_url: ""/api/services/45/components/#{component_id}/conditionals/#{conditionals_index}/expressions/#{expressions_index}"",
      question_label: "And",
      template_condition: $(document.body).find("[data-component-template=condition]"),
      dialog_delete: view.dialogConfirmationDelete,
      view: view
    });

Options

To customise the Branch output and/or functionality you can pass in a configuration object. The configurable options feature below.

TO BE COMPLETED…

BranchCondition

BranchQuestion

BranchAnswer

BranchConditionInjector

BranchDestination

This page was last reviewed on 10 March 2022. It needs to be reviewed again on 10 June 2022 .

This page was set to be reviewed before 10 June 2022. This might mean the content is out of date.