UI Controls

In an interactive product configuration session, the user interface (UI) should dynamically adapt its options based on the current configuration state. To facilitate this, the COOM language includes features that manage UI elements effectively, assuming the UI is designed to follow runtime instructions. This capability ensures that as users modify their configurations, the UI updates immediately to reflect relevant options, enhancing usability and streamlining the configuration process.

Hiding Elements

Using the keyword hide in a behavior block allows to hide certain features from the UI.

product {
    Color    color
    ...
    bool     withCarrier
    Carrier  carrier
}

behavior {
    condition withCarrier = false
    hide carrier
}

The shown behavior states that the field carrier should be hidden, if false is selected for the element withCarrier in the configuration session.

Note that you can either hide single terminal features, such as carrier.color or entire sub-trees of the hierarchy if structure features are hidden, like in the carrier in this example. In some situations, hidden features need to reappear on screen, after the configuration state has changed again. Note that in this declarative language, no show directive is required as the features will reappear automatically when the precondition of the hide directive is not fulfilled any more.

Readonly for Element Values

The keyword readonly renders a feature unmodifiable, ensuring that users cannot alter its value. In smart configuration systems, conflicting choices are preemptively filtered out, diminishing the necessity for the readonly attribute in many cases. Consequently, the use of readonly is generally reserved for specific scenarios, such as displaying numerical calculations that must remain visible but uneditable, ensuring clarity and accuracy in user interactions.

  structure Weight {
     num wheelWeight
     num frameWeight
     num totalWeight
  }

  behavior Weight {
     imply totalWeight = (wheelWeight * 2) + frameWeight

     // set totalWeight to readonly as the user should not change this value
     readonly totalWeight
  }

The example illustrates readonly for the element totalWeight, since we do not want this element to be changed by the user.