Hi Guys,
Just want to share this as i found it useful (depends on the requirements).
This will explain if we want to embed a Joget Datalist inside a Joget Form (vice versa).
(DataList and Form Both are designed separately using Form & DataList Designer.)

Refer to following image (How it looks like). This is done using iframe and jquery to expand the iframe height and width to full. Refer to the code at the end of this post.

HOW TO : Inside your Joget Form, Insert an Custom HTML element and the paste the below code in it.

<script>
$(document).ready(function()
	{
		// Set specific variable to represent all iframe tags.
		var iFrames = document.getElementsByTagName('iframe');

		// Resize heights.
		function iResize()
		{
			// Iterate through all iframes in the page.
			for (var i = 0, j = iFrames.length; i < j; i++)
			{
				// Set inline style to equal the body height of the iframed content.
				iFrames[i].style.height = iFrames[i].contentWindow.document.body.offsetHeight + 'px';
			}
		}

		// Check if browser is Safari or Opera.
		if ($.browser.safari || $.browser.opera)
		{
			// Start timer when loaded.
			$('iframe').load(function()
				{
					setTimeout(iResize, 0);
				}
			);

			// Safari and Opera need a kick-start.
			for (var i = 0, j = iFrames.length; i < j; i++)
			{
				var iSource = iFrames[i].src;
				iFrames[i].src = '';
				iFrames[i].src = iSource;
			}
		}
		else
		{
			// For other good browsers.
			$('iframe').load(function()
				{
					// Set inline style to equal the body height of the iframed content.
					this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
				}
			);
		}
	}
);
</script>

<iframe name='iframe' id="iframe" src="url of your datalist?embed=true" frameborder="0" border="0" cellspacing="0" height="100%" style="border-style: none;width: 100%;"></iframe>

Please take a note that you must pass "embed=true" parameter inside your iframe url.

This does the magic and brings the datalist view only and hides all the header, footer and menu etc.

  • No labels

6 Comments

  1. Witch link i must pass in field "url of your datalist"? 

    I try with http://server:port/jw/web/userview/APP_NAME/userview//datalistName?embed=true but i retrive error. 

    1. ?Hi,

      http://server:port/jw/web/userview/APP_NAME/userview//datalistName?embed=true

      What you included seem to be correct. What kind of error are you getting? You can also try the suggestion in this article - Embedded Mode

  2. Hi,

    Thank you for demo. 

    I found out that resizing in the iframe call can work too. 

    <iframe src="url?embed=true"  scrolling="no" frameborder="0" onload="$(this).height($(this).contents().height());$(this).width($(this).contents().width());" >Iframe not supported</iframe>.

    by the way:  Is there any way to filter the iframe datalist with value from the parent form. (or set the extra filter condition with value from the parent form)

    Thank you

  3. Hi,

    I am facing problem in datalist actions (like edit, delete) in embed mode and get internal server error. But these actions works fine in normal mode. Please suggest resolution.

    1. Hi Hassan,

      What kind of behavior or error are you getting? Steps to replicate them here would be useful.

      Cheers

  4. Hi

    I added hyperlink to view. But it is loading inside iframe. But i need to load it in parent form?