Expand Nested Datalist in an iFrame

Introduction

In this article, we will show you how to make a Nested Datalist to expand in an iframe.

How does it work ?

Prerequisites

• Create a Form and a List to populate and display data.
• Create a Nested Datalist that contains the List.
• In the UI Builder, display the Nested Datalist using CRUD. 

Creating a Nested Datalist that expand in an iframe

Create an additional Form and follow the steps below:

1. In the Form Builder, add a Custom HTML form element into the form.
2. Configure the Custom HTML properties, enter the ID, and the Custom HTML.
3. You can use the script below in the Custom HTML, alter the code based on your app. 

   <iframe name='iframe' id="iframeLoanedItems" src="/jw/web/userview/kb_nestedDatalistIFrame/v/_/basicForm_crud?embed=true" frameborder="0" border="0" cellspacing="0" height="500px" scrolling="yes" style="border-style: none;width: 100%"></iframe>
   <script>
       $(document).ready(function(){
           $('iframe#iframeLoanedItems').load(function(){
               $('.nesteddl_trigger', $('iframe#iframeLoanedItems').contents()).trigger('click');
           })
       })
   </script>

   Markup

   Copy
4. To embed a List inside an iframe, you will need to use the <iframe> attribute and target the Menu ID containing the previously created Nested Datalist. Based on the example, 'basicForm_crud' is the targeted Menu; change the code accordingly.
5. Click Save and Launch to view the List in the iframe.

Expected outcome

In the runtime, you can view the Nested Datalist display in the iframe expanded.

Download sample app