adding jQuery libraries in GSP file

Development
1

Hi guys, i am still working on the orderEnteryUI and i want to add some js and jquery libraries into it (timePicker…) . i was able to add the js files so they will be visible outside the server by using :

ui.includeJavascript(“orderentryui”, “timepicker.js”)

and i was only able to get the Js files with no errors on the browser’s console by using :

<script  src="../ms/uiframework/resource/orderentryui/scripts/jquery-1.11.3.min.js"></script>
<script src="../ms/uiframework/resource/orderentryui/scripts/timepicker.js"></script>

and even so the library doesn’t work like i didn’t import anything into the code.

2

Isn’t the time picker and jquery already included by default if you add the standardEmrIncludes?

3

actually i don’t know how to use any of that, i have basic knowledge on angular and i dont know how to use gsp files! can u give me a quick hint ^^!

4

Hello @mouad take a look at this wiki guide to get started :slight_smile:

5

@grimm i like the way you have come back in style! :smile: Hopefully your government will not frustrate you again.

1 Like
6

All you need is this line at the top of your gsp

<%
    ui.decorateWith("appui", "standardEmrPage", [ title: ui.message("moduleId.label") ]);
%>

The title is optional, you can pass in an empty map. This would require the appui module running too

7

i did that, and still the input time field doesn’t show up properly, i am using this one:

<input type="text" name="name" value="" placeholder="12:00" data-timepicker>

and i added the link to the library on top :

<script src="http://www.jqueryscript.net/demo/jQuery-Plugin-To-Auto-Format-Time-Format-timepicker-js/timepicker.js"></script>

here is the demo of the library that i am trying to use: http://www.jqueryscript.net/demo/jQuery-Plugin-To-Auto-Format-Time-Format-timepicker-js/

is there any fast way to implement this one real quick?, or how can i use the integrated time picker that u have told me about ?

8

I think that the RA uses bootstrap’s date time picker, and to use it in a gsp you can include it as a fragment, did you look at the link @grimm added on how to work with fragments? Below is a sample usage:

${ ui.includeFragment("uicommons", "field/datetimepicker", [
    formFieldName: "your-form-field-name",
    label: "your-label",
    useTime: true
])}
9

ohh tried it looks cool but :confounded: , what i want is a daytime picker not a date time picker means i want only the time (eg. 08:00). is there any template that does it already in the uicommons module or i shall import it from outside, if so how can use the jQuery library that i have mentioned before!!
thank you a lot for your time tho ^^ !!!

10

Hi,

It doesn’t look like there is a time picker in uicommons. Here’s the link to all of the fields that are available. This would be a good contribution if you are able to add a field to uicommons.

Craig

11

I’m not sure if it supports picking time only, for sure the fragment doesn’t provide that feature, you might have to dig into the library documentation for the way to do so and then use the date picker the standard way instead of via a fragment. Or you could use a different library.