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.
| Code Block | ||
|---|---|---|
| ||
<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.