Example on HTML form entry reference

I need to add a third party java script library to an HTML form. Are there any example for doing that?

I read through the HTML java script reference but I could not find an example which reference to a thirds party java script library.

@mogoodrich @dkayiwa Have you worked on an example like that?

This isn’t a third party library, but in this form you can see an example of the “uiInclude” tag which we use to include a js file we wrote:

@mogoodrich thank you for the link.

I have this issue, I tried building HTMLFormEntry UI, 1.3 version does not build on its own, but the 1.6 version builds fine. but to run with the latest OpenMRS war file I need to have the 1.3 version. Is there a way to solve this problem??

@mogoodrich : I tried that referencing method, that should work. I have this problem though. Even though reference link is there in the source code when the page is loaded. the source has not been connected. What I did was I copied the js files to htmlformentryui folder’s script folder and gave the link to that as follows

<uiInclude provider="htmlformentry" javascript="jspedigrees/jspedigrees.nocache.js" />  
<uiInclude provider="htmlformentry" javascript="jspedigrees-view/jspedigrees.nocache.js" />

My problem is cant we add sources after we deploy the web app??

I’m not 100% sure, you may need to redeploy after adding a library.

Looking at your code, though, if you copied the js files int the htmlformentryui module’s script folder, the provider should be htmlformentryui not htmlformentry.

(That being said, the “right” thing to do would be to provide the library in your own module, not add it to htmlformentryui)

Take care, Mark

@mogoodrich Yes, that what I am going to do.

And yes I copied to the htmlformentry folder. Sorry for the confusion.

I will try to deploy my own module and let you know the progress :slight_smile:

@mogoodrich @dkayiwa @wyclif @burke @surangak

I created my own module and added the the resources to the webapp folder.

You can find the code here


I also added the reference to the HTML form by adding the following lines

    <uiInclude provider="basicexample" javascript="jspedigrees/jspedigrees.nocache.js" />  
    <uiInclude provider="basicexample" javascript="jspedigrees-view/jspedigrees.nocache.js" /> 

When I checked the source of the webpage where the HTML form is loaded I could find the following lines as well.

<script type="text/javascript" src="/openmrs-standalone/ms/uiframework/resource/basicexample/scripts/jspedigrees/jspedigrees.nocache.js?cache=1465913835124"></script>
<script type="text/javascript" src="/openmrs-standalone/ms/uiframework/resource/basicexample/scripts/jspedigrees-view/jspedigrees.nocache.js?cache=1465913835124"></script>

Even though this is shown when I click on that it does not show the resource. I assume the reference is not done properly. Any advice on how to fix it?

Here is an example of how i do it in the xforms module: https://github.com/openmrs/openmrs-module-xforms/blob/master/omod/src/main/webapp/formEntry.jsp#L77

@dkayiwa : Thank you. I am currently on my mobile. I will try to use this method when I get home.

Before that I have a question. This is used in the jsp file. I have tried that before and it works fine. Would this work if I add the same line in the htmlform that we are creating?

Try by first hard coding the path in your htmlform.

@dkayiwa I tried the method I have mentioned earlier

 <uiInclude provider="basicexample" javascript="jspedigrees/jspedigrees.nocache.js" />  
    <uiInclude provider="basicexample" javascript="jspedigrees-view/jspedigrees.nocache.js" />

I am not sure why this is not working :confused: Can you think of why?

I mean first try use the actual expanded link as i should appear in the final html source.

@dkayiwa I managed to get it working using the following code. I will let you know how it goes.

 <script type="text/javascript" src="/openmrs-standalone/moduleResources/basicexample/scripts/jspedigrees/jspedigrees.nocache.js"></script>
          <script type="text/javascript" src="/openmrs-standalone/moduleResources/basicexample/scripts/jspedigrees-view/jspedigrees.nocache.js"></script>

Next step will be to avoid hardcoding “openmrs-standalone”

We can use the context and get it working right?

Anything you can do to avoid hardcoding it.

sure.I will try to get it done :smiley:

@dkayiwa @mogoodrich @surangak @burke


I am still searching on a method to replace OpenMRS-Standalone key word. as I checked with source code, it has been used as the OpenMRS_Context as well. Is there a way to get the exact location of the web app or a similar folder ( inside a html form)

Other option is to load the HTML form to the module itself and hard code the references locally inside the module.

Any suggestion on this method??

Try this: “…/…/moduleResources/basicexample/scripts/jspedigrees/jspedigrees.nocache.js”

@akshika47, did this work? we need to make sure that the module works with the core as well as the standalone :slight_smile: