Horizontal layout support for radio buttons in the datacapture library

[shoaibmushtaq25]

Radio group/buttons horizontal layout is not supported in the datacapture library
I added a patient gender as horizontal radio group with the choiceOrientation as horizontal in Patient questionnaire on implementer app but I found out the horizontal layout is not supported yet in datacapture library

{
  "linkId": "1.0",
  "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"
          }
        ]
      }
    },
    {
      "url": "http://hl7.org/fhir/StructureDefinition/questionnaire-choiceOrientation",
      "valueCode": "horizontal"
    }
  ],
  "definition": "http://hl7.org/fhir/StructureDefinition/Patient#Patient.gender",
  "type": "choice",
  "text": "Gender:",
  "answerOption": [
    {
      "valueCoding": {
        "code": "F",
        "display": "Female"
      }
    },
    {
      "valueCoding": {
        "code": "M",
        "display": "Male"
      }
    }
  ]
}

Solution
We need to implement http://hl7.org/fhir/R4/extension-questionnaire-choiceorientation.html for radio-buttons

Alternatives
For now, I have made radio group as default vertical layout on implementer app

Screenshot
Expected result:

Actual result:

Would you like to work on the issue?
I am open to work on it or anyone else can pick it up

cc: @jingtang10 @ekigamba

[FikriMilano]

@shoaibmushtaq25 may I?

[shoaibmushtaq25]

@shoaibmushtaq25 may I?

@FikriMilano Yeah sure, you can pick it up. Thanks for it. 👍

[shoaibmushtaq25]

@FikriMilano One thing I am also thinking about it that this may apply to all choice type questions (radio buttons, check boxes). You can have a chat with @jingtang10 on this if we need to re-phrase the issue title or its scope.

[jingtang10]

Use the choice orientation extension:

http://hl7.org/fhir/uv/sdc/2019May/rendering.html#control-appearance

[ekigamba]

@jingtang10 Correct, I have updated the issue with the correct details. Are you OK with this? Should this be implemented to all choice type questions

[FikriMilano]

Use the choice orientation extension:

http://hl7.org/fhir/uv/sdc/2019May/rendering.html#control-appearance

Ok, I will use this

[FikriMilano]

@jingtang10 Correct, I have updated the issue with the correct details. Are you OK with this? Should this be implemented to all choice type questions

I think we might as well implement this for all choice type questions. I'm open for further suggestions though. @ekigamba @jingtang10 @shoaibmushtaq25

[FikriMilano]

As mentioned here,

URL = http://hl7.org/fhir/StructureDefinition/questionnaire-choiceOrientation
choiceOrientation: Identifies the desired orientation when rendering a list of choices (typically radio-box or check-box lists).

Therefore, I plan to add horizontal layout support for radio-button and check-box.

[jingtang10]

As mentioned here,

URL = http://hl7.org/fhir/StructureDefinition/questionnaire-choiceOrientation
choiceOrientation: Identifies the desired orientation when rendering a list of choices (typically radio-box or check-box lists).

Therefore, I plan to add horizontal layout support for radio-button and check-box.

yeah that's fine. thanks for taking this up.

[FikriMilano]

cc @f-odhiambo