Popup details page?

Hi. I am not sure if this is a suggestion or if I am missing it somewhere.

You have an option for a popup edit link. Can you add this for details pages now or will you add the option in the future?

tks

2 Likes

Yes… this is huge for us. Please add this

@CJeon @muhammad

This is indeed on our road-map and will likely be done during the 3rd quarter of 2020. Cjeor, you are right this is now only an option on edit link. Detail links are not quite like the edit page.

However, I must point out. Inside the edit link you can remove the form and add a details component instead of the form. This will server as a pop up details page. That being said - adding tables/data on this newly created edit page that’s connected to the parent record will not display accurate data.

3 Likes

@moe That’s neat! Didn’t realize I can change the edit page into a ‘fake’ details page.

Amazing.

In case you didn’t hear this from me yet - Tadabase is some next level stuff. Keep on pounding out those features and updates. You guys are unstoppable. :heart_eyes:

3 Likes

Thought I would share a bit of a different approach as I que up for an expanded question. If you know of another way to do this or can clean it up, please share.

A little set up - Create a rule in your table that sets a text field to the Tadabase Record ID on Create/Insert if the text field is blank (use Create/Insert to avoid a put/push problem when inserting new connected records using form rules, otherwise Create works) for the records you will want to use these links for.
creating links
Image 1 – Set up your links using HTML editor and give them ID’s (these are styled using CSS). Ensure the record ID is on the page so you can reference using Jquery (I actually hide this at the bottom most times using the rules in the Row so it is not visible to anyone except myself when I am building the app).
Chem taught me a lot here so I wouldn’t feel right without saying the core of the idea and some, if not most of this code is his.
Run a check to ensure the page is loaded – Chem has a nice piece of code that works here. It has likely been posted and he/Moe may be able to link to it, if not maybe he can throw it up. I do add a “reload event” to his check flag if the links need to change based on values (otherwise some of the data may be old once you come back to the page so double check the flagged field after you get a true call from Chem’s check flag and add a reload if it is not defined – yell if you need it).
Chem developed the split href function here that dissects the window location and creates the dynamic link. Using this, you can update the last couple bits of code and call your page from anywhere in your app. You can use this to change the location of the current window, call a new tab, or call it in a pop up.
Here is the code for calling the link:
$(function () {
var getSplitHref = function () {
var splitHref = window.location.href.split("/");
return splitHref;
};
$(’#LINK ID’).click(function () {
var id = ($(’#YOUR RECORD ID – TADABASE USING FIELD_BLOCK_FIELD WITH THE FIELD NUMBER’).html());
if (id !== undefined) {
window.location.href = ‘/’ + getSplitHref()[3] + getSplitHref()[4] + ‘/page-name/’ + id;
}
});

This code assumes you keep your app at 2 levels deep at all times – ie a parent page and 1 child level deep (yell if it is confusing and I or someone can pop up a better explanation). I would imaging you could modify the function call to go as deep as you want or just keep updating the link if you needed.
The last line is what changes. The last 3 parts are important, the rest should only change if you get rid of the #! Part of the link in your app.
The “id” at the very end is the RECORD id you want to work on. The “page-name” is the page slug of your page. The getSplitHref()[4] is your parent page slug. This is important if you are referencing a child page with a different partent. Just delete the function call for that part and paste in the slug so the link looks like this:
window.location.href = ‘/’ + ‘/’ + getSplitHref()[2] + ‘/’ + getSplitHref()[3] + ‘/parent-slug/page-name/’ + id;
This example calls the page to the current location – normally calls the link. Modify to call a new tab like this:
$(’#LINK ID HERE’).click(function (event) {
event.preventDefault();
var id = ($(’#YOUR RECORD ID – TADABASE USING FIELD_BLOCK_FIELD WITH THE FIELD NUMBER’).html());
if (id !== undefined) {
link = ‘https:/’ + ‘/’ + getSplitHref()[2] + ‘/’ + getSplitHref()[3] + ‘/parent-slug/page-name/’ + id;
window.open((“href”, link));
}
});
Just add your popup to the window call for a popup window like below:
window.open((“href”, link), “popupWindow”, “width=600,height=600,scrollbars=yes”);
That’s it. Remember to check your page load and if you have content/links that change based on values or have problems when navigating back use a reload – kinda clunky if you use this but works.
I have not figured out how to get past the default Tadabase submit action to tie a close function to the submit button on the popup yet so if you run it down, please share.

Now the expanded question -> If anyone can help here it would be great. Using the thought above to ensure I am only updating minimum number of pages in my app I am looking to use this inside a list/table/accordian, etc.

Because these layouts call multiple records you can not call the record ID the same as you do above as a single list will have an equal number of Field_Block_Field_# calls as it does records on the page. I have looked for a way to call a row and then the field within the row, but I think it will come down to calling the nyth child or some version of running down the path. The idea is to use the link at the top of a list details or accordion details element to work on or view records attached to the record where the link resides.

Any ideas?

If anyone needs. I suspect it can be modified for nearly any list elements although I used it in an accordion.

function getLinInfo() {
var linID = $(this).closest(’.accordion-body’).find(‘field_block_field**** span’).text();
var linkID = $(this).attr(‘id’);
link = ‘https:/’ + yourLinkInfo;
window.open((“href”, link), “popupWindow”, “width=600,height=600,scrollbars=yes”);
}

$(‘ul.tableClassName li’).on( “click”, getLinInfo );

The setup went:
add an html block in the accordion and set up a horizontal list for your links
give the list ul a class
give each link an ID – this will choose the correct page – I used Chem’s splitRef and called the slug midLink but you could do it anyway
ensure you have the record ID in the accordion element (you can hide if you need)

linID runs up to the first accordion body and then locates the field_block_field ID that contains your Record ID and sets linID’s value to that record ID

linkID grabs the ID you gave the link

Set up variables or whatever for the midlink based on the linkID and roll.

Hope it helps.

Thank you for sharing this :+1:

I know now that this is the reason why the table component inside my “pop-up edit-page” is not showing any data.

I’m looking forward with this update :slight_smile: