How to include a fragment in an Angular dialog ?

Development
1

I desperately tried many things, but couldn’t find a how to do this:

In order to change the date of an encounter, I would like to include the datetimepicker.gsp fragment into the AngularJS ngDialog. (I am using it in an HtmlFormEntry form)

ngDialog will take an HTML template to be displayed within the dialog.

Something such as:

<script type="text/ng-template" id="dialogTemplate">
	<div class="dialog-header">
		<h3><uimessage code="lfhcforms.pastencounter.editencounterdate" /></h3>
	</div>
	<div class="dialog-content">
		<p style="margin-bottom:10px;">
			<em><uimessage code="lfhcforms.pastencounter.enterencounterdate" /></em>
		</p>
	</div>
</script>

But if I add the <uiInclude> tag in this template:

<script type="text/ng-template" id="dialogTemplate">
	<div class="dialog-header">
		<h3><uimessage code="lfhcforms.pastencounter.editencounterdate" /></h3>
	</div>
	<div class="dialog-content">
		<p style="margin-bottom:10px;">
			<em><uimessage code="lfhcforms.pastencounter.enterencounterdate" /></em>
		</p>
		<uiInclude provider="uicommons" fragment="field/datetimepicker" config="{ "id": "startDate",
		"formFieldName": "encounterDate",
		"label":"label",
		"useTime": "false"
	}"/>
	</div>
</script>

the form won’t load as expected.

I think this is because the fragment I want to load returns some HTML AND some Javascript (within <script> tags).

Here is all what the fragment returns:

Therefore, I end up with <script> tags within <script type="text/ng-template" id="dialogTemplate"></script> template definition tags and the form is not displayed correctly.

Q: Any idea how I can include a fragment in my ngDialog ?

Note: Iit is also possible to provide the template as an external resource and not within <script type="text/ng-template" id="dialogTemplate"></script> tags. However, I am afraid that I can’t use <uiInclude> in a resource other than an <htmlform>

Note2: I guess I could try to do this in a .gsp fragment instead of an HtmlFormEntry form and use ui.includefragment... but I guess the problem would be the same

2

Hello, Could you please confirm if you have found the solution to implement this? I have been trying to load a fragment when a button is clicked but I have not been successful.

3

Hi @hariniparth,

I didn’t use ng-dialog in the end, but rather a normal dialog. Didn’t know enough about AngularJS at the time.

If what you want is to simply open a dialog on click, then you could check out an example. For instance the quick visit creation dialog in Core Apps:

  • The code below is where your button is configured. In this case we add one line in the Overall Actions panel, and trigger the visit.showQuickVisitCreationDialog() function:
  • Then the visit.showQuickVisitCreationDialog() is defined here:
  • And finally, your actual fragment template:

There is documenation on how to include fragements here: UI Framework Step By Step Tutorial

Hope this helps.

Romain

4

Thank you! This helps! Although I am not having a pop-up window or a dialog box opening…