https://medplum.com logo
Join Discord
Powered by
Creating a Questionnaire
# support
m
I am working on creating a patient intake form and obviously want to utilize the Questionnaire resource however when implementing the QuestionnaireForm component and following the setup based on the storybook as well as the foomedical github, I cant get the UI to display the intended questionnaire. I am fetching the questionnaire from the medplum console using the searchResources medplum method and when console logging the result, everything checks out but its not displaying on the UI. Any help in the right direction is appreciated. Code setup:
Copy code
const medplum = useMedplum();
  const questionnaire = medplum
    .searchResources("Questionnaire", "title=Patient Intake Form")
    .read();
  console.log(questionnaire[0]);

return (
<div>
  <Document width={1000}>
         <QuestionnaireForm
            questionnaire={questionnaire[0]}
            onSubmit={(formData: any) => {
              console.log("submit", formData);
            }}
          />
   </Document>
</div>
);
r
HI @mikee6290 - would you be able to post the JSON of your questionnaire, and a screenshot of your output?
m
Yes ofcourse:
Screenshot of output (attached below)
Hey @rahul1 , just wanted to followup again on this and hopefully get nudged in the right direction 😅
r
Hi @mikee6290 - I'm still working on a repro on my end to try to understand the issue. Based on the code you've shared, I don't see anything immediately incorrect. My next step will be trying to recreate the issue on my machine
m
Sure. Just to clarify i have the latest version of medplum as well. If its possible I'm also available to hop on a quick video call to sort it out if thats any help.
r
I was able to see a questionnaire render to the screen - is this the output you are expecting
I've pushed this repro to a branch on our main repository, in case you want to take a look
m
Hm i just tried it as well, its still rendering the same, let me dig in some more.
What is the branch name?
r
rahul-mikee-questionnaire-repro
m
Its so weird Im still getting the same render I showed previously. I'm using nextJS and im implementing this within a client component, would it have anything to do with that?
r
Potentially? We have had teams build on Medplum with NextJS successfully, but I'd say that it's less common than vanilla react. Unfortunately, we don't have deep NextJS expertise on the core dev team, so I wouldn't have deep expertise to help debug. Are you able to see the storybook story I pushed to the branch?
m
I see the code, is that what you mean by storybook story? I cant see a component or anything show up like it would in storybook
r
Oh! if you clone our repository (git@github.com:medplum/medplum.git) and then run 
npm run dev -w packages/react
, it will spin up a tool called storybook on localhost:6006 (our hosted version here (https://storybook.medplum.com/?path=/story/medplum-questionnaireform--ahchrsn-screening)
Then, under the 
QuestionnaireForm
component, you would be able to see a "HiloTest" example
m
Ahhh ok i'll go ahead and do that
r
This uses vanilla react, but should servce as a baseline test to start debugging from
m
Thanks for the help, I'll go from here and reach back out if anything thanks!
Hey @rahul1 , sorry to keep bothering you with minute details like this, but when i cloned the repo and ran the npm command, im getting some local internal server errors as well as some import errors, and when the local host spins up, i dont see the story that you uploaded. I'll post some screen shots below.
r
HI @mikee6290 - seems like you may need to run a build first
sorry for not giving you full instructions
The full instructions for setting are here: https://www.medplum.com/docs/contributing/clone-the-repo
m
Doing that right now! I keep forgetting you guys have thorough docs 😂
r
My instructions for running storybook would come after that 🙂
No worries!
Things can be a bit hard to find. We're very open to feedback on discoverability
m
So i see the code in the branch on github, but when i cloned the repo, I cant find those changes, but i can see your changes in the github repo is the same in the story book for other form types and the same as the setup i have, and i still get that same result I showed above. Im stumped.
r
Does that mean the storybook is rendering blank for you?
Let's see if we can take this step by step: 1. 
git clone git@github.com:medplum/medplum.git medplum
2. 
git fetch origin
3. 
git checkout rahul-mikee-questionnaire-repro
4. 
npm ci
5. 
npm run build
(this might take a few min) 6. 
npm run dev -w packages/react
7. Navigate to localhost:6006
Just want to understand which step in that chain failed
When navigating to localhost:6006`, you may have to perform a hard-refresh in the browser to clear site-data. Sometimes storybook caches things incorrectly
m
Ok i got it to work, I was incorrectly navigating this process by not doing steps 2 and 3. My apologies. The storybook is loading as intended now with the Hilo test you put in. However like I said before I am still getting the same UI misrender. I went over any css styling that potenially may be intefering with this but I cant seem to find the problem.
r
Ok well that's a start. Unfortunately, we don't have extensive NextJS experience on our team, so we won't be able to help debug those issues. I understand you used client components, but there could be some bad interaction somewhere
That being said, we do have a simple NextJS demo app - it might be worth adding your QuestionnaireForm component there first to try and make sure it renders? https://github.com/medplum/medplum-nextjs-demo if you suspect it might be a bug, you could also file an issue on our main GH repo
m
So after some plug and play with another dev on the team, we still can't come to a viable solution. I have tried many variations of moving the code around, changing the way I'm fetching the questionnaire resource, seeing if there are some issues with DOM rendering within the Document tag, as well as trying to dynamically import the component itself due to it being an asynchronous action of fetching this resource, but nothing stuck, it simply looks like there is an issue with the QuestionnaireForm resource within my application i guess and it wont render anything when passing either the fetched questionnaire in to the questionnaire attribute or passing a hard coded object like you provided in the storybook. I wonder if anyone else is encountering this problem as well but i'd love to crack it.
j
Hi @mikee6290, sorry to hear that you are continually having problems. Are you still implementing the Code setup as is? If so, can you show me the console.log(questionnaire[0]); output? Furthermore, can you also post the network tab in the browser's developer tools?
m
I switched the code setup around to poke at some potential solutions but I essentially reverted back to the regular setup. Ill send over the screen shots right now...
Output of console.log(questionnaire):
Copy code
{
  resourceType: 'Questionnaire',
  name: 'New User profile completion',
  title: 'Patient Intake Form',
  status: 'active',
  subjectType: [ 'Patient' ],
  date: '2023-04-20T14:49:00.000Z',
  publisher: 'Eamon',
  purpose: 
    'When a new patient resource is created, the only information we automatically collect from the register form is the user\'s name, and email. The purpose of this form is to gather basic information about the patient in order to complete their profile',
  id: 'f8a05c5a-0076-41fc-a73e-4b0771aa14e0',
  meta: {
    versionId: '844f44dd-7527-4101-9f88-06190cccb306',
    lastUpdated: '2023-05-07T21:10:07.190Z',
    author: {
      reference: 'Practitioner/d2ef90d9-ca42-4583-a0fb-b10fb9a3e978',
      display: 'Team Hilo'
    },
    project: 'b0aa142c-85e2-4fb3-a62c-fe949a0b0573',
    compartment: [ { reference: 'Project/b0aa142c-85e2-4fb3-a62c-fe949a0b0573' } ]
  },
  item: [
    {
      id: 'id-19',
      linkId: 'g15',
      type: 'group',
      text: 'We Need some more info to complete your profile',
      item: [
        {
          id: 'id-22',
          linkId: 'q3',
          type: 'choice',
          text: 'Gender at birth',
          answerOption: [
            { id: 'id-23', valueString: 'Male' },
            { id: 'id-24', valueString: 'Female' },
            { id: 'id-25', valueString: 'Other' }
          ]
        },
        { id: 'id-26', linkId: 'q4', type: 'date', text: 'Birthdate' },
        {
          id: 'id-27',
          linkId: 'q5',
          type: 'attachment',
          text: 'Profile Picture'
        },
        { id: 'id-28', linkId: 'q6', type: 'reference', text: 'Address' }
      ]
    }
  ]
}
My network tab is empty its not showing any network requests when doing this, here is how the file looks like
j
Ok thank you for letting me know, and curious you said that it still didn't render when you hardcoded the questionnaire? When you hardcoded the questionnaire, did you comment out: const questionnaire = medplum .searchResources("Questionnaire", "title=Patient Intake Form") .read();
m
I don’t believe I did but I don’t think that would matter if I’m not plugging that into the questionnaire attribute? Right?
If hopping on a video call would accelerate the process i totally don’t mind that.
I implemented the useResource hook as another go at trying something different but i'm getting the same result regardless
Just wanted to shoot an update on my support ticket. I went ahead and figured out why my questionnaire form component wasnt rednering by realizing it had to do with the access policy i had set in place, so by adding three important resource types to the access policy ('StructureDefinition", "SearchParameter", "ValueSet"), it ended up working.
r
Hi @mikee6290 , thank you so much for the update! We're sorry for the rough edge here. A recent change made it such that 'StructureDefinition", "SearchParameter", "ValueSet" are now required in AccessPolicy definitions
We're in the process making AccessPolicy authoring a smoother experience
177 Views
PreviousNext
Powered by