Stream: questionnaire
Topic: Rendering Questionnaires in IGs
Grahame Grieve (May 14 2020 at 19:14):
I'm about to do an IG where Questionnaires are the central artifact. As part of that, I want to work on rendering questionnaires in IGs. What kind of views should there be? it seems to me that there should be
- a tree view like a profile summarising the important structural elements of the questionnaire
- a human presentation of the questionnaire - an estimate of what it would look like, informed by SDC extensions
Thoughts? other ideas?
Paul Lynch (May 14 2020 at 19:23):
In case it hasn't crossed your mind already, LHC-Forms could be added to the pages with a couple of HTML tags, and you could use it to the do the rendering on the page. JSFiddle examples: http://lhncbc.github.io/lforms/demos.html. It has tree lines on the left showing the structure of the sections, so you have both the tree view and human presentation in one.
Grahame Grieve (May 14 2020 at 19:27):
I can't imagine how that would work, but the rule with IGs is not active content in the html that has external / server dependencies
Paul Lynch (May 14 2020 at 19:30):
The JS and CSS files for LHC-Forms can be local.
Grahame Grieve (May 14 2020 at 19:33):
how would the terminology part work - value sets and code systems?
Paul Lynch (May 14 2020 at 19:37):
It depends on what you are trying to do. If the goal is just to show some Questionnaires, you can define those so they are self-contained. We have some support for external ValueSets, at least for search lists; I will have to check on support for regular answer lists defined externally.
Grahame Grieve (May 14 2020 at 19:40):
when I think about adding stuff to the IG publisher, then I generally need to think in terms of 'everything' - anything not supported will soon enough by needed by someone. And I'll certainly be doing questionnaires with heavy dependence on snomed for my use case
Eric Haas (May 14 2020 at 19:44):
I think a human presentation of the questionnaire - an estimate of what it would look like, informed by SDC extensions is most useful for the reader.
Eric Haas (May 14 2020 at 19:45):
I they want the details then they can look at the source in JSON, XML or YML
Paul Lynch (May 14 2020 at 19:55):
I just checked, and LHC-Forms does support external ValueSets, both for search (autocomplete) and non-search (drop-down) lists. You can also specify a preferred terminology server to fetch from. There are things we don't support, not because we don't want to, because it has not been a priority yet. But, I think it worth looking at existing packages to see whether they meet your needs before writing your own, and in this case, you would probably have help from us in getting missing features implemented.
Grahame Grieve (May 14 2020 at 19:58):
well, I'm not going to write an app, that's for sure. I want static html. Needing a teminology server violates the publishing requirements.
Paul Lynch (May 14 2020 at 20:04):
If you want static HTML, I guess I misunderstood your purpose in asking about value sets and code systems. But, I did not say you have to specify a terminology server. You can render a self-contained Questionnaire. Yes, it would run some JavaScript to do the rendering, when the page loads, so in that sense it is not "static", but it need not fetch external resources.
Grahame Grieve (May 14 2020 at 20:14):
I'm troubled by boundaries. Obviously static html isn't going to try to do value sets. Whereas an app is going to at least try sometimes. And it's the sometimes bit that I have trouble wit h
Lloyd McKenzie (May 14 2020 at 20:25):
I expect some folks are going to want a real full-blown editor because that's really the best way to understand the form, but of course it's going to have trouble rendering in a consistent way - so perhaps handling that bit via an external link to a tool that can grab the specified form would be the best bet. Within the form, we could have a 'static' view - sort of PDF-like. Would that work better for your Grahame?
Grahame Grieve (May 14 2020 at 20:27):
I think an external tool reference would work . The tool would have to take a version specific reference to the IG.
Sarah Gaunt (May 14 2020 at 20:31):
I had a really hard time with the views for HAI Questionnaires. They are pretty lame (http://hl7.org/fhir/us/hai/Questionnaire-hai-questionnaire-los-event.html) and I would LOVE for someone to come up something nice.
Grahame Grieve (May 14 2020 at 20:32):
yes that's what I'm going to improve
Brian Postlethwaite (May 15 2020 at 11:32):
I assume our real choices here are pure javascript with no external dependencies, or java that generates static HTML
Brian Postlethwaite (May 15 2020 at 11:32):
Is something like bootstrap or jquery acceptable for inclusion?
Paul Lynch (May 15 2020 at 12:57):
@Sarah Gaunt Was the goal of http://hl7.org/fhir/us/hai/Questionnaire-hai-questionnaire-los-event.html to show the definition of the form, or would you rather have the form rendered as a user would see it to fill it out (or possibly both)? A rendered form would not display IDs and ValueSet URIs and most of the fields in your "Questionnaire Details" section, which in an IG I would guess are important to document.
Morten Ernebjerg (May 15 2020 at 12:58):
Having just worked on a Questionnaire-focussed IG, I think improved Questionnaire rendering would be fantastic (albeit we used simplifier - @Ward Weistra I hope firely is also taking notes :wink: ). I would see a basic human presentation as the most important part (possibly "decorated" with deeper details). Having the answer options somehow embedded in the view would be a major plus. In the ideal case, (part of) the renderer could perhaps do double-duty with QuestionnaireResponse examples?
Especially for Questionnaires (with their lower "barrier-to-understanding" compared to profiles), I think a significant aspect is supporting readers who are not super-familiar with FHIR (even if they are not the core audience). In our case, for instance, the IG is linked to an open source COVID-19 app so developers new to FHIR could be an important audience.
Ward Weistra (May 15 2020 at 13:12):
@Morten Ernebjerg I'll be at the 'Overview of various form builders & renderers' sessions at 10:30, hoping for a great one we can leverage. Simplifier also has connector features, allowing you to start other applications (like a Questionnaire viewer) from a FHIR resource in Simplifier which could be used for this, if anyone is interested in working with me on that.
Morten Ernebjerg (May 15 2020 at 13:13):
@Ward Weistra Sounds good! - don't have much experience with such tools myself, but would be happy to offer myself as a guinea pig.
Eric Haas (May 15 2020 at 16:52):
I would see a basic human presentation as the most important part (possibly "decorated" with deeper details).
I want to reiterate that this is what the reader should see. If you want to go deeper then look at the raw resource. YML or shortahand option would be nice too.
Paul Lynch (May 15 2020 at 17:05):
Eric Haas said:
I would see a basic human presentation as the most important part (possibly "decorated" with deeper details).
I want to reiterate that this is what the reader should see. If you want to go deeper then look at the raw resource. YML or shortahand option would be nice too.
In that case I would think LHC-Forms would be a good option, but certainly not the only one.
Grahame Grieve (May 18 2020 at 02:21):
so @Paul Lynch if you can make a change to LHC-Forms such that you can invoke it and point it to a questionnaire in an IG, I'll be very happy to add it as a reference. That would mean invoking it with 2 parameters: the questionnaire resource as a direct link to json and a direct reference to the npm package .tgz that contains all the supporting thing like value sets, code systems
Grahame Grieve (May 18 2020 at 02:24):
@Stoyan Halkaliev I can add yours too, if you can meet that kind of invocation method
Lloyd McKenzie (May 18 2020 at 02:45):
Criteria for inclusion = open-source questionnaire rendering apps that are web-launchable?
Grahame Grieve (May 18 2020 at 03:14):
yes and that can launched that way
Stoyan Halkaliev (May 18 2020 at 08:59):
@Grahame Grieve , the invocation method schould be ok. The link to the json works already (if the supporting things are contained), will look into the npm package asap.
@Lloyd McKenzie , it is already web-lauchable, the open-source part I need to figure out. We are a startup and already have invested considerably. Have to get my investors on board first.
Paul Lynch (May 18 2020 at 12:37):
Grahame Grieve said:
so Paul Lynch if you can make a change to LHC-Forms such that you can invoke it and point it to a questionnaire in an IG, I'll be very happy to add it as a reference. That would mean invoking it with 2 parameters: the questionnaire resource as a direct link to json and a direct reference to the npm package .tgz that contains all the supporting thing like value sets, code systems
That sounds doable. @Grahame Grieve Do you mean "invokable" as in a JavaScript API call, like LForms.Util.addFormToPage(...) to show the questionnaire directly in the IG page, or are you thinking of a URL pointing to some NLM website that will open a page showing the questionnaire? There could be some security concerns (from NLM) with having a website service that shows any form created by anyone, though there might be ways to address those concerns.
Also, could you send or point me to a real example of the parameter values you would send?
Stoyan Halkaliev (May 18 2020 at 15:10):
@Ward Weistra, @Grahame Grieve, @Lloyd McKenzie a call to our renderer looks like this
DISCLAIMER: It is work in progress
The load parameter shows the exact download location of the Questionnaire resource (in this example I use the german covid19 questionnaire @Ward Weistra pointed to). There are some assumptions/limitations here:
- it is a STU3 renderer - the example ist R4, so the enableWhen will not work propertly. EnableWhen do works with STU3 questionnaire
- the renderer tries to figure out the non-standard value sets, based on the simplifier convention (will add "-vs-<lang>" to the valueset name and will try to load it from simplifier)
- will recognize loinc value sets and will try to load them. Unfortunatelly the official loing FHIR endpoint has CORS disabled, so we are using a local copy for now.
- if a german questionnaire uses loinc value set, english options will be rendered (didn't researched yet how to get translated loinc value sets per API)
- still need to test with the official HL7 FHIR ValueSets. They should be loaded from our local fhir server, but had no time to test properly. If there is a official end point to get them, please let me know.
Here a screenshot in case you cannot call the URL:
Ward Weistra (May 18 2020 at 15:25):
@Stoyan Halkaliev Works like a charm!
OpenWithFHIRPowerTools.gif
Ward Weistra (May 18 2020 at 15:46):
FYI, to do this I added an STU3 and R4 connector on https://simplifier.net/portal/~connectors, with connector code:
window.open("http://fhirpower.tools/?load="+encodeURIComponent(simplifier.ResourceEndpoint)+"#/edit/load/");
2020-05-18-17_45_09-SIMPLIFIER.NET-Connector-Details.png
Docs here. I very much welcome other suggestions for connectors!
Morten Ernebjerg (May 19 2020 at 11:23):
@Stoyan Halkaliev @Ward Weistra Looks nice despite the R4-limitations, nice work!
Grahame Grieve (May 19 2020 at 11:31):
one of the ways I'm going to render the questionnaire is using the tree, like we do with profiles. In order to do that, I need a set of 16x16 icons for each of the types in http://build.fhir.org/valueset-item-type.html. Contributions are welcome - each should be a 16x16 png or gif that has a transparent background
Grahame Grieve (May 19 2020 at 11:31):
and have to be under open license
Grahame Grieve (May 19 2020 at 11:32):
I expect to re-use the group (folder) icon from profiles for group
Grahame Grieve (May 19 2020 at 23:19):
ok. comments welcome:
Grahame Grieve (May 19 2020 at 23:19):
Brian Postlethwaite (May 19 2020 at 23:34):
Is that in a new branch of the publisher?
I'd personally like another fragment to cover the invariants/expressions/candidates and option sets as an option.
And happy to contribute if I get some time in it. (possibly over the weekend or next week)
Grahame Grieve (May 19 2020 at 23:36):
well, it's a future feature for the publisher, yes
Brian Postlethwaite (May 19 2020 at 23:40):
I take it you haven't pushed a branch to github yet for me to try out with our examples. (have a heap of good ones)
Grahame Grieve (May 19 2020 at 23:57):
no. sometime today
Yunwei Wang (May 20 2020 at 14:02):
Just curious, why one choice has flag with horizontal lines and another choice has flag with vertical lines?
Morten Ernebjerg (May 20 2020 at 15:34):
Looks good :confetti: ! Two comments:
- Might it be worth splitting the tree-structure and the
linkIdinto separate columns? For longlinkIds or deep nesting, I suspect it might be easier to read that way. - I must admit I was slightly confused by the fact that the blue question mark icon only indicates a choice-type questions. On a first parsing run, I instinctively assumed that "?" = question (of any type) and was puzzled by all the items with other icons. Might just be my poor internal parser :slight_smile: - but perhaps there could be a more specific icon to convey the meaning?
Grahame Grieve (May 20 2020 at 20:44):
- the tree structure framework is hardcoded to include text in the first column, as every tree structure I have looked at does. there doesn't appear to be other candidate text for the first column
- that's reusing the choice icon from profiles. Feel free to donate a better icon. 16x16 PNG with a transparent background
Grahame Grieve (May 20 2020 at 20:44):
why one choice has flag with horizontal lines and another choice has flag with vertical lines?
Because that's what the questionnaire design says
Lloyd McKenzie (May 20 2020 at 23:05):
The questionnaire is showing how to do different things - it's not designed to be pretty :)
Grahame Grieve (May 22 2020 at 02:52):
ok so I'm adding 3 representations:
- the tree view, above
- a form view, here:
- and a summary of expressions and answer options, yet to do.
Grahame Grieve (May 22 2020 at 02:52):
Grahame Grieve (May 22 2020 at 02:52):
opinions welcome
Grahame Grieve (May 22 2020 at 02:57):
actually, there's 4th view - external app references but I'll add that once people add a link
Morten Ernebjerg (May 24 2020 at 09:30):
@Grahame Grieve Really like the form view!
I tried my (non-artist) hand at coming up with alternative icons for the "choice" type. Best idea so far came from my 10-year-old son :slight_smile: - choice of directions. I also added alternatives based on a check-box, though that may rather signal "done" (multiple checkboxes get too small):
choice-arrows-2.png
choice-check-1.png
choice-check-3.png
Brian Postlethwaite (May 29 2020 at 10:32):
@Grahame Grieve is there an IG that has the template for these somewhere, I'd like to try it out in our guide?
(have 16 real questionnaires to test it with)
Brian Postlethwaite (May 29 2020 at 10:51):
I've started my own template, found the fragments to try and include.
I take it the images files aren't in the IG publisher package just yet?
(or do I need to manually add them to my custom IG template?)
I assume you're ok for me to do bug fixes on the generator too...
Brian Postlethwaite (May 29 2020 at 11:06):
There are 2 output fragments generated that look almost identical, html and form Only difference is the title and the inclusion of a namespace.
Brian Postlethwaite (May 29 2020 at 11:28):
And links and logic look like the same fragment output too
Brian Postlethwaite (May 29 2020 at 12:37):
@Grahame Grieve first bug fix here
https://github.com/brianpos/fhir-ig-publisher/commit/a22ffb7563f08098fc93375cc2d16b20a92b4137
Grahame Grieve (May 29 2020 at 13:18):
html and form are the same if the html is generated. It won't be if the source resource supplies it's own narrative
Grahame Grieve (May 29 2020 at 13:18):
links / logic = copy paste error. they'll be different next release
Grahame Grieve (May 30 2020 at 05:50):
@Lloyd McKenzie we going to add this to the main template?
Brian Postlethwaite (May 30 2020 at 12:09):
Are the images somewhere I can grab to try out?
Lloyd McKenzie (May 30 2020 at 13:39):
y. Hopefully this weekend
Grahame Grieve (May 30 2020 at 21:59):
Are the images somewhere I can grab to try out?
yes, in the pubpack package, v 0.0.5
Brian Postlethwaite (May 31 2020 at 00:01):
@Lloyd McKenzie if it's of any use (and the template format is still the same) this is what I'm using for my initial testing
---
# jekyll header
level: 2
active: profiles
title: profile
---
{% include header.html %}
{% include container-start.html %}
{% include breadcrumbs.html %}
<!-- ============ CONTENT CONTENT=============== -->
<a name="profile"> </a>
<!-- uri -->
{% include Questionnaire-{{[id]}}-summary.xhtml %}
<div id="tabs">
<ul>
<li><a href="#tabs-summ">Summary</a></li>
<li><a href="#tabs-defn">Definitions</a></li>
<li><a href="#tabs-samp">Display</a></li>
</ul>
<div id="tabs-summ">
<div id="tbl-summ">
<div id="tbl-summ-inner">
{% include Questionnaire-{{[id]}}-tree.xhtml %}
</div>
</div>
</div>
<div id="tabs-defn">
<div id="tbl-defn">
<div id="tbl-defn-inner">
{% include Questionnaire-{{[id]}}-dict.xhtml %}
</div>
</div>
</div>
<div id="tabs-samp">
<div id="tbl-samp">
<div id="tbl-samp-inner">
<p>(Note: This is only a sample display of the form, it is now exactly how it will be rendered by PMS systems)
</p>
{% include Questionnaire-{{[id]}}-form.xhtml %}
<!-- {% include Questionnaire-{{[id]}}-html.xhtml %} -->
</div>
</div>
</div>
</div>
<!-- ==============END CONTENT END CONTENT=================== -->
{% include container-end.html %}
<script src="jquery.js"> </script>
<script src="jquery-ui.min.js"> </script>
<script>
try {
var currentTabIndex = sessionStorage.getItem('fhir-questionnaire-tab-index');
}
catch (exception) {
}
if (!currentTabIndex)
currentTabIndex = '0';
$('#tabs').tabs({
active: currentTabIndex,
activate: function (event, ui) {
var active = $('.selector').tabs('option', 'active');
currentTabIndex = ui.newTab.index();
document.activeElement.blur();
try {
sessionStorage.setItem('fhir-questionnaire-tab-index', currentTabIndex);
}
catch (exception) {
}
}
});
</script>
{% include footer.html %}
</body>
</html>
Brian Postlethwaite (Jun 01 2020 at 03:17):
There was a question on icons for the tree?
(I think we qualify for these https://icons8.com/license)
For the choice icon: https://icons8.com/icons/set/radio-button
Grahame Grieve (Jun 01 2020 at 03:37):
which one in particular?
Brian Postlethwaite (Jun 01 2020 at 04:19):
The radio button, the second link
<img src="https://img.icons8.com/material-outlined/24/000000/radio-button.png"/>
from this collection
https://icons8.com/icon/pack/user-interface/material-outlined
or alternately this one that shows a set of 3 to choose from
https://icons8.com/icon/83293/single-choice
Brian Postlethwaite (Jun 01 2020 at 04:20):
If it's something we can use (the free licensing conditions are ok) I'd be happy to walk through what we have and make a select a complete set for use in this part.
Grahame Grieve (Jun 02 2020 at 03:46):
ok. here's what I've been using to test SDC:
Grahame Grieve (Jun 02 2020 at 03:47):
"Questionnaire": {
"template-base": "template/layouts/layout-questionnaire.html",
"template-defns": "template/layouts/layout-questionnaire-definitions.html",
"defns" : "{{[type]}}-{{[id]}}-definitions.html"
}
Grahame Grieve (Jun 02 2020 at 03:47):
and these layouts
Grahame Grieve (Jun 02 2020 at 03:48):
layout-questionnaire.html layout-questionnaire-definitions.html
Grahame Grieve (Jun 02 2020 at 03:48):
@Lloyd McKenzie. All works for me, so I'll be releasing soon
Lloyd McKenzie (Jun 02 2020 at 04:34):
The history bit should be yanked. Jose's working on getting history to show up as a separate page tab for all of the resources, which is a cleaner place to have it. Other than that, I see no issues. Sorry I took so long to get to it.
Grahame Grieve (Jun 02 2020 at 04:46):
sure. you want me to make that as a PR against fhir.base.template?
btw, the history will always be empty for contained resources
Lloyd McKenzie (Jun 02 2020 at 04:51):
If history is empty, the tab shouldn't show up
Grahame Grieve (Jun 02 2020 at 04:52):
sure
Brian Postlethwaite (Jun 23 2020 at 05:01):
Should this now move over to the IG Creation stream?
Grahame Grieve (Jun 23 2020 at 21:01):
yes
Paul Lynch (Jul 16 2020 at 19:40):
Grahame Grieve said:
so Paul Lynch if you can make a change to LHC-Forms such that you can invoke it and point it to a questionnaire in an IG, I'll be very happy to add it as a reference. That would mean invoking it with 2 parameters: the questionnaire resource as a direct link to json and a direct reference to the npm package .tgz that contains all the supporting thing like value sets, code systems
@Ye Wang has created a viewer using LHC-Forms that takes these two parameters. It takes a parameter "q" for the Questionnaire URL, and parameter "p" for the package.tgz file (optional). Example: https://lhncbc.github.io/questionnaire-viewer/?q=https%3A%2F%2Flforms-fhir.nlm.nih.gov%2FbaseR4%2FQuestionnaire%2F24313-9
Last updated: Apr 12 2022 at 19:14 UTC
