Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

_text Extension Rendering as Plain Text Instead of HTML in LHC-Forms #156

Open
shanil-sasikumar opened this issue Feb 12, 2025 · 5 comments
Open

_text Extension Rendering as Plain Text Instead of HTML in LHC-Forms #156

shanil-sasikumar opened this issue Feb 12, 2025 · 5 comments

Comments

@shanil-sasikumar
Copy link

Description

When rendering a FHIR Questionnaire using LHC-Forms, the _text extension with rendering-xhtml does not replace the default question text. Instead, the text field value is displayed, and the HTML content inside _text is ignored.

Steps to Reproduce

  1. Create the form in the NLM Form Builder
  • The question renders correctly with the expected HTML content (see image below).

Image

  1. Import the R4 Questionnaire JSON and render it using JavaScript:

    <body>
  <link href="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/styles.css" media="screen" rel="stylesheet" />
  <div id="formContainer"></div>
  <script src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/assets/lib/zone.min.js"></script>
  <script src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/webcomponent/lhc-forms.js"></script>
  <script src="https://lhcforms-static.nlm.nih.gov/lforms-versions/34.0.0/fhir/R4/lformsFHIR.min.js"></script>
</body>

  2. Use the following JavaScript to define and load the form:

    var formDef = {
  "resourceType": "Questionnaire",
  "title": "New Form",
  "status": "draft",
  "item": [
    {
      "type": "string",
      "linkId": "778248774264",
      "text": "Item 0",
      "_text": {
        "extension": [
          {
            "url": "http://hl7.org/fhir/StructureDefinition/rendering-xhtml",
            "valueString": "<p>If you don't have an employee handbook in place, you can refer to our standard version <span style=\"color:blue; text-decoration:none; cursor:pointer;\" onclick=\"window.open('https://mysite/policies/', '_blank')\">here</span></p>"
          }
        ]
      }
    }
  ]
};

LForms.Util.addFormToPage(formDef, "formContainer");

  3. Observe the issue in the browser

  • Instead of rendering the expected HTML content from _text, the question displays as "Item 0".

  • The expected HTML is ignored.

Image

Expected Behavior

  • The HTML content inside valueString should be rendered properly, displaying a clickable link with proper formatting.

Actual Behavior

  • The HTML string appears as plain text instead of rendering as expected.

Environment

  • LHC-Forms Version: 34.0.0
  • FHIR Version: R4
@lhcye
Copy link
Contributor

lhcye commented Feb 12, 2025

There is a 'allowHTML' in templateOption (https://github.com/LHNCBC/lforms/blob/master/form_definition.md) that is false by default. You need to add the optional 'options' parameter to addFormToPage function to turn that on.

LForms.Util.addFormToPage(formDef, "formContainer", {"allowHTML": true});

Let me know if it works.

@shanil-sasikumar
Copy link
Author

LForms.Util.addFormToPage(formDef, "formContainer", {"allowHTML": true});

@lhcye Thanks for the suggestion. Unfortunately, it didn’t work for me. The form still displays "Item 0" instead of rendering the HTML content from the _text extension.

You can check the issue here. The problem persists, and the expected HTML is ignored.

Could you please take another look and provide further guidance on how to resolve this?

Thanks again for your support!

@lhcye
Copy link
Contributor

lhcye commented Feb 12, 2025

You used lforms v34.0.0. Supporting html on item.text was added on v36.4.0. The validation function on html content was updated later after that. You'd better to use the latest v36.10.2 if you could.

I tested on 36.10.2 and 36.8.0. Both worked fine with your test data.

@shanil-sasikumar
Copy link
Author

You used lforms v34.0.0. Supporting html on item.text was added on v36.4.0. The validation function on html content was updated later after that. You'd better to use the latest v36.10.2 if you could.

I tested on 36.10.2 and 36.8.0. Both worked fine with your test data.

@lhcye Yes, thank you! It's working in the latest version.

Would you like us to get proper documentation anywhere? In this documentation, we didn't find any mentions of the {"allowHTML": true} parameter in the options. It would be helpful to clarify this in the official documentation.
Thanks again for your support! You can close this ticket.

@lhcye
Copy link
Contributor

lhcye commented Feb 13, 2025

These options are mentioned somewhere in a few files but not explictly listed on the documentation site. We will update the site soon. Thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@lhcye @shanil-sasikumar