Comments (32)
I would remove LForms variable from constructor and add declare var LForms: any;
right after import statements at the top.
Would you verify if you can access LForms object and its properties from browser console after you load the page?
from lforms.
We build lforms on Linux, so probably the issue is that there is something platform-specific in our build scripts. It looks like some issue with quotation marks. Anyway, are you trying to modify lforms? If you just want to use it, you can either you "npm install lforms" or download pre-built versions directly from https://lhcforms-static.nlm.nih.gov/lforms-versions/ (and note that there are zip files there, and that the latest version is currently 35.0.3).
from lforms.
Thank you very much, our idea is to import functionalities to store, modify and send responses to questionnaires on a FHIR server, as well as display them on the frontend. Something similar to the Form Builder option in the demo. Would it be possible? By running "npm install lforms" and importing the component, we could use the functions described at http://lhncbc.github.io/lforms/
Greetings, thank you
from lforms.
Yes, either by installing or downloading, or linking to the lforms-static website files above, you can use lforms without buliding it. However, "importing" it won't work. Just link to the files via script/link tags (as documented at http://lhncbc.github.io/lforms/#installation). For a simple example, see https://jsfiddle.net/lforms/8f754jhy/44/ .
from lforms.
Hello,
Running the "npm install lforms" command in a new project. Defining the following code in Angular in app.component.ts.
I am invoking the script with the libraries in the html.
This way I can't use the functions with LForms or I have skipped some import or configuration step.
Greetings, thank you
from lforms.
Can you be more specific about what is going wrong? Are you getting an error somewhere?
I see you are pulling the files from the clinicaltables website as in the demo, which is fine. However, in that case you don't need to run "npm install lforms".
from lforms.
Our problem is that we want to create an Angular project which uses part of the lforms functionality, do we need to make calls like, for example, LForms.Util.addFormToPage(fhirQ, 'formContainer');
We can't get it to recognize LForms to be able to invoke the call. We don't know what steps to follow or if we can use part of the functionality in our project.
Greetings, thank you
from lforms.
Yes, that is the API to use. I am not sure why you cannot access LForms. Are the scripts loading successfully? Do you have access to the "window" object? If so, window.LForms should work.
from lforms.
A suggestion from a team member: add "declare var LForms: any;"
Also, you might take a look at the https://github.com/lhncbc/formbuilder-lhcforms (the NLM Form Builder) project, which is an Angular app that uses LForms. It is not a simple example to look at, though.
(src/app/services/fetch.service.ts:12:declare var LForms: any;)
from lforms.
Hello,
- Adding "declare var LForms: any;" It does not work since it does not interpret LForm as being of type lform and does not have access to its functionality.
- This other project https://github.com/lhncbc/formbuilder-lhcforms also gives me errors when mounted on Windows.
The process I follow is to create a new project called ejemploFormulario3:
PS C:\Curso\Angular> ng new ejemploFormulario3 --standalone=false
I create a new component:
PS C:\Curso\Angular\ejemploFormulario3> ng generate component mi_componente.
The created html file is as follows:
The created ps file is as foollows:
I understand that it would not be necessary to execute run install lform since it is bringing it from the <script> tag of the html, right?
If not, I have done it in another project and it still does not identify Lforms.
I have run it commenting that line and it works correctly.
I don't know if any more steps are necessary or if there is another option that could work.
Greetings, thank you.
from lforms.
I don't see LForms declaration in MiComponenteComponent. It needs to be declared where you are using it.
from lforms.
Hello,
If I declare it inside the typescript file. It compiles for me, but it doesn't do anything because it can't find that function.
from lforms.
I have made the following change:
And in the browser console the following is displayed.
from lforms.
Is your app code being injected into the page before the lforms script tags, or after?
from lforms.
He does it like this.
I don't know if you mean if it does it in the head or in the body, I have tried loading it in the head and it gives the same result.
from lforms.
I am not seeing your app code in that screen shot of the page. You should be able to see where it shows up in the developer tools.
from lforms.
That looks like LForms is not loaded. It could be due to that LForms reference error.
Comment out line LForms reference at line 35 and see if you can access LForms object in console. If you can, it probably means that you are accessing LForms, before it is loaded?
from lforms.
If you can, it probably means that you are accessing LForms, before it is loaded?
Yes, I was thinking the same thing. That is why I was asking where the script tag for the application code is relative to the script tags for lforms. That might only be visible through the developer tools.
from lforms.
Would this capture work for you or what do you need?c
After commenting on the line you mentioned, it shows the following,
And the console doesn't allow access either.
from lforms.
That is not valid HTML -- you can't have an "html" tag inside "body", unless it is coming from an iframe. Also, I don't see the script tags for lforms anywhere. I guess they were stripped out by the build process.
from lforms.
Although I think there must be some way to get the script tags included in your output, you might find it easier to use our lforms-loader package (npm install lforms-loader), documented at https://github.com/lhncbc/lforms-loader. You call it from your app to put the lforms scripts tags onto the page, and then it returns a promise that resolves when the files are loaded. It introduces a slight delay in loading the lforms files, because it has to wait for your app to starting running before it can starting loading lforms. So, I think the script tags are better, but evidently that will require some investigation into how to add scripts tags to angular app.
from lforms.
Hello,
I've gotten the code to work, but it doesn't run until after loading the index page.From the console you can see that you can now access the library.
And it will also be a problem not being able to autocomplete to know the functions that LForms contains. If I copy the files that I am bringing with the script, would I have access to the library when developing?
from lforms.
You should only use the functions that are documented at http://lhncbc.github.io/lforms/index.html. The others are internal and might change. There are only a few of them.
from lforms.
Hello,
I wanted to make a query, I managed to paint a form of my own by invoking the function
LForms.Util.addFormToPage(fhirQ, 'formContainer');
It shows me the following:
It would be very complex or if possible, modify the display style format. Would I have to modify the lforms libraries or can it be done from the component of my own application?
from lforms.
That depends on what you want to change. The tree lines on the side can be turned off with an option to "addFormToPage" -- you can pass in any of the "templateOptions" listed in https://github.com/lhncbc/lforms/blob/master/form_definition.md. Also, you should be able to override the styles with CSS from your app.
from lforms.
@DaniArj1980 How did you get it to work? LForms is recognized in my console, but I get all sorts of errors
I tried putting the scripts in my index.html
or directly in the html of the component I want to show but none of it works.
I put the js files in assets
and in tsconfig.json
i set allowJs
to true
from lforms.
EDIT: I removed the loading of the scripts from index.html and did this dynamically in the component. This resolved all but one of my errors but I don't see any form (nothing in the html - probably due to the error I cannot seem to resolve)
from lforms.
I see you've written your own code to load lforms dynamically. I just want to mention again here the we do have an "lforms-loader" package (npm install lforms-loader), documented at https://github.com/lhncbc/lforms-loader, that does basically the same thing as your code, and returns a promise. The lforms-loader package is being used by several of our websites.
from lforms.
Hi,
In the package.json file change:
"build:version": "node -e 'require("fs").writeFileSync("src/version.json", JSON.stringify({lformsVersion: require("./package.json" ).version}))'"
by:
"build:version": "echo {"version": "${npm_package_version}"} > ./src/assets/version.json",
Thus, it would compile perfectly, but if what you want is to use the formbuilder, download the git: https://github.com/lhncbc/formbuilder-lhcforms.git.
Compile it following the instructions and replace the line that exists in package.json that is incorrectly parsed with this:
"create-version-file": "echo {"version": "${npm_package_version}"} > ./src/assets/version.json".
from lforms.
Thanks @plynchnlm for repeating using lforms-loader. This worked!
from lforms.
Hi @plynchnlm.
Is there a way to load files from a local address in a new project.
![image](https://private-user-images.githubusercontent.com/164068691/333123259-5d7a2b70-0c9e-4d03-8ebb-91611dfb0d4d.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTk0NjMzMjcsIm5iZiI6MTcxOTQ2MzAyNywicGF0aCI6Ii8xNjQwNjg2OTEvMzMzMTIzMjU5LTVkN2EyYjcwLTBjOWUtNGQwMy04ZWJiLTkxNjExZGZiMGQ0ZC5wbmc_WC1BbXotQWxnb3JpdGhtPUFXUzQtSE1BQy1TSEEyNTYmWC1BbXotQ3JlZGVudGlhbD1BS0lBVkNPRFlMU0E1M1BRSzRaQSUyRjIwMjQwNjI3JTJGdXMtZWFzdC0xJTJGczMlMkZhd3M0X3JlcXVlc3QmWC1BbXotRGF0ZT0yMDI0MDYyN1QwNDM3MDdaJlgtQW16LUV4cGlyZXM9MzAwJlgtQW16LVNpZ25hdHVyZT1jNTNhZmUyNTU4YjQ5MzI5MmQ0NDc2ODIzZGE0MWQ0ZWExMWY1YTQzZTRjYzAwODIzYmJlYjRiZjFkNGEzZTNmJlgtQW16LVNpZ25lZEhlYWRlcnM9aG9zdCZhY3Rvcl9pZD0wJmtleV9pZD0wJnJlcG9faWQ9MCJ9.iVP4q_NHsZICq7MHDkXYuctE4FI-IDdiT6IFmsF2SuE)
My idea is to load the library from the files that I show in the screenshot.
Greetings, thank you
from lforms.
Is there a way to load files from a local address in a new project.
Yes. If you are using the lforms-loader package to load the lforms files, the third parameter to the loadLForms function is "lhcFormsSource", which is the base URL for loading the lforms files. So, you can specify the URL of your own website for that, pointing to the directory containing the "fhir" and webcomponent sub-directories.
(It should also be possible without lforms-loader.)
from lforms.
Related Issues (20)
- Prepopulating forms HOT 5
- Do we have any feature for patient resource? We need to update patient resource using LHC. HOT 1
- 0 value for number types in response is ignored HOT 3
- How to pre-populate values setting lhcFormData trough LhcDataService
- Integer & date datatype field issue HOT 2
- CSS is overwriting other CSS in my application HOT 2
- Static images used by lforms cannot be found. HOT 7
- Error on library import: Uncaught TypeError: Cannot read properties of null (reading 'appendChild') HOT 2
- In repeat questions, SNOMED Answer valuesets are not rendered in the second repetition HOT 2
- How to extract the full panel structure? HOT 3
- conditionnal display not well managed HOT 4
- UI issue in dropdown options list when resizing the window HOT 2
- Validation popover addresses wrong answer in repeatable item HOT 2
- No response is created if an answer contains an invalid data type
- Preview in multiple columns HOT 3
- A new widget HOT 3
- Use R5 of Fhir HOT 15
- CalculatedExpressions not working? HOT 1
- Prepopulate form with source data HOT 3
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from lforms.