View record Details on a Parent Page

Hi all,

As you are well aware, the core of Tadabase’s front-end involves displaying an overview view of records in a data table via a table or list component, and then adding a Details Page to view record details and connected records.

What I wanted to do was find a way to be able to view record details and connected records on a parent page. It’s a bit of a hack but it does work well when implemented correctly.

We hope to add this capability into the Tadabase platform in the future.

This is a bit advanced as far as customization goes, so hopefully the instructions make sense. Here’s a demo link for anyone interested!

https://timyoung.tadabase.io/iframe-details#!/iframe-details

How To:

  1. Create a text field in your Data Table and name it “recordId”

  1. Create a table rule that says: On Create or Edit, set {recordId} to a record value of (Record ID)

  1. Create an equation field and paste the following equation…

CONCAT('<button',CHAR(32),'recordId="',{recordId},'"',CHAR(32),'id="detailsLink"',CHAR(32),'class="btn',CHAR(32),'btn-block',CHAR(32),'btn-primary',CHAR(32),'loadIntoIframe">VIEW</a>')

  1. On the parent page you wish to display record details, create a new row with an HTML component inside.

  1. Paste the following HTML into the source code of the HTML component.

<p><iframe id="my-iframe" class="taskDetails" name="detailsIframe" width="100%" height="800px" frameborder="0"></iframe></p>

  1. Paste the following CSS into the page CSS tab

     @media only screen and (min-width: 992px) {
    
         .taskDetails {
    
             color: black;
    
             background-color: #fff;
    
             height: 100vh;
    
             /*Sets the width of the side bar*/
    
             width: 400px;
    
             position: fixed;
    
             top: 0;
    
             /*Positions the side bar next to the Main Menu - 125px is the width of the menu*/
    
             right: 0px;
    
             z-index: 5;
    
             outline: none;
    
             overflow-y: hide;
    
             border-left: 2px solid #eeeeee;
    
         }
    
         .t-pagecontainer {
    
             margin-right: 400px;
    
         }
    
     }
    
  2. The CSS above does a few things,

  • Affixes the iframe to the right side of the screen at all times.
  • Shift the page-container for the app to the left to make room for the iframe.
  • The media query restricts this CSS to screen sizes to larger than 992px.
  1. Paste the following into the JS tab of the page

     TB.render('component_3',function(data){
        $('.loadIntoIframe').each(function(){
            var recordId = $(this).attr('recordid');
            $(this).click(function(){
               $('#my-iframe').attr('src','details_URL_goes_here'+recordId); 
            });
        });
     });
    
  2. Create a new layout with no menu, breadcrumbs, or user menu. We want this layout to be completely blank.

  1. Create a parent + details page in the new layout for the data table you were working with in the previous steps.

  1. Preview the parent page you just created, go to the details page, and get the URL for the details page. Copy the URL without the record ID

  1. Go back to step 8 and paste in your details URL where it says “details_URL_goes_here”

  2. Get the component_id for your data component on the parent page with the iframe

  1. Go back to step 8 and replace “component_3” with your component_id from Step 13

  2. On the page that contains your iframe, make sure the equation field with the details link is visible in your data component.

  1. Preview the page and click the button!
1 Like

@tim.young I am happy about plans of Tadabse to have this details field on a parent page included in the possibilities. Second this (a lot!)