Standalone Button for Add Record Popup Modal

Showcase
1

Since custom components don’t have “Add New” record buttons, I have been trying to figure out a way to put a standalone button on a details page that will have the same function as an “Add New” record in a table.

I got pretty close and I wanted share what I have so far. The only things I haven’t figured out yet are:
1. Automatically connecting the new child record back to the parent done
2. Getting the modal save button to work so I can eliminate the green form save button

Here is a link to a sample Tadabase app, just click on one of the details links to try it.

Bootstrap 3.3.7 - Add Record Popup Modal

1. HTML Component

Create an HTML component on your details page and put this HTML code in it

<div class="container">
  <h2 style="margin-bottom: 50px; text-align: center;">Bootstrap 3.3.7 - Modal</h2>
  <div class="row text-center">
    <h3>Add New Task</h3>
    <a class="btn btn-lg btn-primary" href="#" data-toggle="modal" data-target="#largeModal">Click to open Modal</a>
  </div>

  <div id="largeModal" class="modal fade" tabindex="-1">
    <div class="modal-dialog modal-lg">
      <div class="modal-content">
        <div class="modal-header"><button class="close" type="button" data-dismiss="modal">&times;</button>
          <h4 id="myModalLabel" class="modal-title">Add New Task</h4>
        </div>
        <div class="modal-body">
          <div id="embedForm" class="iframeEmbed">
            <p><iframe id="newIframe" class="newRecord" name="Add Record" width="100%" height="650px" frameborder="0" scrollbar="0"></iframe></p>
          </div>
        </div>
        <div class="modal-footer"><button class="btn btn-default" type="button" data-dismiss="modal">Close</button> <button class="btn btn-primary" type="button">Save changes</button></div>
      </div>
    </div>
  </div>
</div>

2. Create Custom Layout

The best way to create an iFrame is to follow the guide by @tim.young on this post.

As he explains:

  1. First, create a new Layout with no navigation menu or breadcrumbs
  2. Next, create a new blank page inside that Layout to house the form that we will eventually embed in the popup modal.

3. Create a Form

Create a form that adds a new record to your child table on the page you just created

4. Details Page JavaScript

This JS goes in the main JS section of your details page. The component it refers to is the HTML component, so yours may be different. You will also need to change /sample/add-task to the relative URL of the page with the form you created in step 2.

TB.render('component_5',function(data){ 
	$('#newIframe').attr('src','/sample/add-task'); 
});

4. Put this in your app’s main footer (JQuery library)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

5. Automatically relate the new modal record to the parent

In order to relate the record you just created in the popup model back to the parent table, you need to use the new “Save to Loan Storage” option and a Record Rule.

  1. First, add the record ID of the parent record somewhere on the parent detail page
  2. Next, get the component_id of where you put that field, and the field_id of wherever your parent record ID is stored in the datatable
  3. Use the following JavaScript on the parent details page (where you plan on triggering the popup)
TB.render('component_3', function(data) {
	localStorage.setItem('parent_record_id', data.record.field_26);
});

Don’t forget to change the component ID and the parent record ID to your own!

Lastly, just create a Record Rule on your modal form from step 3 and set it to “Update this record.”

Then set your rule up as shown below:

Thanks to @chem for helping with some JS, @tim.young for this post about using an iFrame, and this guy who coded a Bootstrap modal template.

5 Likes
2

@james Great work on this. Thanks so much for posting this too. I believe I may have a use case for this.

I know this was a while ago. I think there may be a simpler way to do what you want to do in this specific case.

  1. Create a new page and add the form you want on that page.
  2. Add the menu component to your page you want to have the button on. Add a link in the menu component to the new page from step 1, set to open as a modal, resize the menu (drag from right side) so it is basically the size of a button.
  3. Use step 5 from James post to relate the new record to the parent.

Then you are done. You can make things prettier with css.

Here is a quick app I put together copying yours but using the above method. I didn’t do much formatting on it.Test App