Custom Element: Modal Popup from Clickable Row

App Development
1

I’m trying to create a custom table that has 3 main characteristics:

  1. Fully responsive, collapsing down to a block view on mobile
  2. Every row is clickable through to the details page
  3. Details page opens in a popup modal

So far, I have been able to accomplish 1 and 2, but I seem to be stuck on 3. I am able to create a clickable row, and I’m able to create a details popup, but have yet been able to combine them.

Resources:

  1. In theory, it should be possible. Bootstrap 3.3.7 does have the ability to create custom modal popups
  2. @Chem generously showed us how to turn a list object into a clickable link
  3. Documentation for working with links in custom components

There are pluses and minuses to using actual tables <tr><td> structure vs <div> style grid. The benefit to using a Bootstrap grid is that you can wrap an entire row in an <a href=""> tag and make it clickable without JavaScript:

 <div class="custom-table">
      <div class="custom-table-head">
          <div class="custom-row">
              <div class="col-sm-2 custom-cell">Name</div>
              <div class="col-sm-2 custom-cell">Company</div>
              <div class="col-sm-2 custom-cell">Phone</div>
              <div class="col-sm-2 custom-cell">Email</div>
          </div>
      </div>
      <div class="custom-table-body">
        {{#each records}}
          <a class="custom-row" href="/contacts/contact-details/{{id}}">
              <div class="col-sm-2 custom-cell">{{field_name}}</div>
              <div class="col-sm-2 custom-cell">{{field_company}}</div>
              <div class="col-sm-2 custom-cell">{{field_phone}}</div>
              <div class="col-sm-2 custom-cell">{{field_email}}</div>
          </a>
        {{/each}}
      </div>
</div>

There can be a lot of CSS, but the important thing is to turn it into a table as follows:

.custom-table .custom-table-head,
.custom-table .custom-table-body {
    display: table-header-group;
}

.custom-table .custom-row {
    display: table-row;
}

.custom-table .custom-cell {
    display: table-cell;
}

I believe the solution can be done a couple of ways:

  1. Using the option in the Tadabase docs, somehow substitute "Detail" for a JS variable:
    {{tb_link this tb-id="3" tb-value="Detail" tb-open-popup="1"}}
  2. Use a custom Bootstrap modal popup
  3. Something that I haven’t considered

Once I’ve got a solution, I’m happy to circle back and post the whole thing for everyone to use, I just need to figure out this last part.

PS - bonus points if we can figure out how to open a “Connected” page as a popup modal :slight_smile:

2

I’ll get this conversation going by first addressing the link tag.

For opening a link in a popup, you can set “a” tag like below. Keep in mind, you can’t put href tag inside a table row, so you’d have to keep tweaking your code’s CSS.

In your code, it will look similar to this:

{{#each records}}
          <a href='{{tb_link this}}' class="tb-link-action-click tb-link-in-popup" data-tb-page-id="K2ejlOQo9B" data-tb-rid="{{id}}" data-tb-page-title="Edit This From Custom Page">
              <div class="col-sm-2 custom-cell">{{field_name}}</div>
              <div class="col-sm-2 custom-cell">{{field_company}}</div>
              <div class="col-sm-2 custom-cell">{{field_phone}}</div>
              <div class="col-sm-2 custom-cell">{{field_email}}</div>
          </a>
        {{/each}}

Make sure to set the Page ID of the page you wish to open. You can find the child page ID in the URL in the builder:

If you’re working with connected records, for example, if each of these records connects to a ‘parent’ record, we can open a child page that belongs to records from this table. I’ll clarify. Suppose you’re showing a list of jobs and each of these jobs are assigned to a user. If you have another page in the app that shows details about each user, we can open that page as well. It’s a bit tricky though.

First, find the ID of that page. Then we have to loop through the connection field incase there is more than one record. In my case, the ID is: L5MjKxr0kq


 {{#each obj.field_38}}
   <a href='{{tb_link this}}' class="tb-link-action-click tb-link-in-popup" data-tb-page-id="L5MjKxr0kq" data-tb-rid={{@key}} data-tb-page-title="Editing the employee this job belongs to">
     {{this}}
    </a>
{{/each}}

I’d be happy to clarify further.

1 Like
3

@moe Thanks for the response! The first option worked perfectly, and I’ll work on implementing the 2nd one next.

I also wanted to share a use case for the popup to connected page that may make more sense. For this example I created a basic CRM with Deals, Contacts, and Companies.

The challenge I have faced is that Detail, Edit, and Add pages are tied to the table they are created with. As I have built out our app, I will complete a table and associated pages only to realize that it makes much more sense to design the element as a list or a custom object instead of the original table.

However, swapping out that table for a list becomes quite complicated:

  1. I need to not only delete the old table, but also all of the corresponding Add, Delete, and Edit pages along with it
  2. Lists and custom components don’t have an “Add” option, and there isn’t really a solid workaround other than using an action button to create a blank record (which is kinda confusing for users)

I currently have 21 pages cascading off of a single table that I no longer use, and I don’t know what to do with them.

My goal would be to have a single Add, Edit and Detail page to reference for each “Object” (Deals, Contacts, Companies).

The idea is that you would still be opening the record related to whatever page you are currently on, but you would only have to maintain a single page for each object in your app.

Does that resonate or am I missing something?

4

Hey @james I need something similar for my project. I’ve got a basic custom list component working but I’d like to get a modal editing enabled. Please post any progress updates if you can a chance it would be greatly appreciated. :+1:

1 Like