Hack to show components in the same modal page!

Hello folks!

Right now, Tadabase does not support opening a modal inside a modal but, we found a way to do it using Javascript , we’ll show you how step-to-step:

  1. Create the modal
  2. Hide the desired component
  3. Create a custom component
  4. Add the custom component to the template
  5. Add this function on the Javascript tab
  6. Show the components in the same modal

Step 1: Create the modal
We have our example table:


The first thing we have to do is to click on “edit” in the table options

Then we click on Show in popup option, then, update

After we created our modal, it should look like this:

Step 2: Hide the desired component
In this example, we want to show Details from the Parent and then click on a button that lets us edit this parent in the same modal.
So, for this we will hide the edit form component:

First, we click on this button at the component we want to keep visible
image
Then, paste on the Javascript tab, and should look like this:
image

Then, we will hide the component we want, in this case, will be the edit form component
**Make sure that, if you already have a component with this id, please create again the component you want to hide and use the new number

TB.hideComponent(‘component_7’);
image

Modal now should look like this:

Step 3: Create a custom component
Then, we will create a custom component
** If you do not see this icon, please reach out Tadabase support since this is in early beta and it is available for some developers.


Click on details with any table, it does not matter which table you use for this custom component.

Step 4: Add the custom component to the template

{{#each records}}

<button class="btn btn-primary td-data-link" id="opennewModal">Open new modal</button>

{{/each}}

Step 5: Add this function on the Javascript tab

document.getElementById("opennewModal").onclick = function () { modal() };
function modal(){
   TB.hideComponent('component_5');
   TB.showComponent('component_7');  
   TB.showComponent('component_8');
}

Step 6: Show components in the same modal!
Result:

Clicks on Open new modal

If you liked this, please leave a comment below, we’d love to read it!

5 Likes