# Extensible Appearance
Each input component corresponding to the respective FHIR value type can be customized to have a selective appearance or behavior based on a set of predefined FHIR extensions as described [here](http://hl7.org/fhir/R4/valueset-questionnaire-item-control.html)

## Component Builder
Each input component is aggregated with a component builder. The component builder should be implemented specifically to each component and act as a service that generates the [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) to render the respective input component.

## Control Extensions
Some items in the FHIR questionnaire can be extended to have a predefined appearance by adding questionnaire-itemControl extension such as the one given below.
```json
{
  "extension": [
    {
      "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl",
      "valueCodeableConcept": {
        "coding": [
          {
            "system": "http://hl7.org/fhir/questionnaire-item-control",
            "code": "radio-button",
            "display": "Radio Button"
          }
        ]
      }
    }
  ]
}
```
Hence the component builders should be capable to generate [HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement) in consideration with the added extension as well.

## Component Builder Factory
Those components, which have an extensible appearance to be supported have to implement a factory service over the component builder. The factory service should return a component builder depending on the applied extension. If no extensions are provided then it should return a default component builder.

### Example
Consider the implementation of the choice input component. For each item in the questionnaire corresponding to the choice question, the following logic or a similar resolution shall apply.

```javascript
const choiceComponentBuilderFactory = 'path/to/choice/component/builder/factory';

const extension = item.extension.filter(x => x.url == 'http://hl7.org/fhir/StructureDefinition/questionnaire-itemControl');
let builder = null;
if (extension) {
    builder = choiceComponentBuilderFactory.getBuilder(extension.coding.code);
    if (!builder) {
        throw new Error(`Extension ${extension.coding.code} is not supported`);
    }
} else {
    builder = choiceComponentBuilderFactory.getBuilder();
}

const element = builder.getElement(attributes);


// consume the element in component
```
If the `extension.coding.code` is `radio-button` then the component will get a builder for radion buttons and if no extensions are provided then it will get the default builder which may generate a drop-down or list.