Example on HTML form entry reference

akshika47 · June 11, 2016, 11:36am

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?

mogoodrich · June 12, 2016, 12:58pm

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:

github.com

PIH/openmrs-module-pihcore/blob/master/omod/src/main/webapp/resources/htmlforms/haiti/patientRegistration-contact.xml

<htmlform formUuid="9EE91561-42A0-4E1C-9469-ABA6726056BE" formName="Patient Registration Contact Person" formEncounterType="873f968a-73a8-4f9c-ac78-9f4778b751b6" formVersion="1.0">

    <ifMode mode="VIEW" include="false">
        <uiInclude provider="registrationapp" javascript="field/personAddressWithHierarchy.js" />

        <script type="text/javascript">

            jq(function() {

                var personAddressWithHierarchy = {
                    id: 'contactAddress',
                    container: jq('#contactAddress-container'),
                    initialValue: null,
                    shortcutFor: 'address1',
                    manualFields: ['address2']
                }

                PersonAddressWithHierarchy(personAddressWithHierarchy);

                // remove the first title span that is automatically generated by the HFE

This file has been truncated. show original

akshika47 · June 12, 2016, 1:09pm

@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??

akshika47 · June 12, 2016, 2:49pm

@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??

mogoodrich · June 12, 2016, 9:40pm

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

akshika47 · June 13, 2016, 4:30am

@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

akshika47 · June 14, 2016, 2:48pm

@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

https://github.com/akshika47/hgu

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?

dkayiwa · June 14, 2016, 8:24pm

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

akshika47 · June 15, 2016, 4:03am

@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?

dkayiwa · June 15, 2016, 8:32am

Try by first hard coding the path in your htmlform.

akshika47 · June 15, 2016, 4:51pm

@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 Can you think of why?

dkayiwa · June 15, 2016, 6:39pm

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

akshika47 · June 15, 2016, 7:38pm

@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>

dkayiwa · June 15, 2016, 7:47pm

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

akshika47 · June 15, 2016, 7:48pm

We can use the context and get it working right?

dkayiwa · June 15, 2016, 7:54pm

Anything you can do to avoid hardcoding it.

akshika47 · June 15, 2016, 8:17pm

sure.I will try to get it done

akshika47 · June 16, 2016, 11:06pm

@dkayiwa @mogoodrich @surangak @burke

Hi,

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??

dkayiwa · June 17, 2016, 12:31am

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

surangak · June 17, 2016, 8:48pm

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