I have a page that needs to display one of three different Details Component depending on a field value. Can someone help with a way to accomplish this?
Example:
If {Type}= In Network then Show Detail1
If {Type}= Out of Network then Show Detail2
If {Type}= Cash then Show Detail3
We’ve now added ability to add record details right inside the Javascript console. We’re also adding simpler event listeners. I think between the 2 new features you’ll be able to do this very easily.
I’ll update this thread in the next day or so with a way of accomplishing this.
Hi @moe. Any update on this? I had someone write the following code which works if I add it using the Inspect Code Console in Chrome, but it does nothing when adding it to the Javascript on the page.
Here is the page: https://crm.sleeptest.com/#!/linked-pages/referral-details/M03rzDpQ69
Here is the code:
if(document.getElementsByTagName(“span”)[0].innerHTML == “Normal”){
document.getElementsByClassName(“label-position-Top”)[2].style.display = “none”;
document.getElementsByClassName(“img-responsive”)[1].style.display = “none”;
document.getElementsByClassName(“label-position-Top”)[3].style.display = “none”;
document.getElementsByClassName(“img-responsive”)[2].style.display = “none”;
}
else if(document.getElementsByTagName(“span”)[0].innerHTML == “Express”){
document.getElementsByClassName(“label-position-Top”)[1].style.display = “none”;
document.getElementsByClassName(“img-responsive”)[0].style.display = “none”;
document.getElementsByClassName(“label-position-Top”)[3].style.display = “none”;
document.getElementsByClassName(“img-responsive”)[2].style.display = “none”;
}
else if(document.getElementsByTagName(“span”)[0].innerHTML == “Express Cash”){
document.getElementsByClassName(“label-position-Top”)[1].style.display = “none”;
document.getElementsByClassName(“img-responsive”)[0].style.display = “none”;
document.getElementsByClassName(“label-position-Top”)[2].style.display = “none”;
document.getElementsByClassName(“img-responsive”)[1].style.display = “none”;
}
That’s likely because the code is running before the components have loaded on the page. You’d need to add code with a timeout to check for that those components are painted on the page first. Or better yet… as soon as we’re live on all the servers with the latest you’ll be able to achieve this with very few lines of code.
In the code below, I’m making an assumption that you have 3 components on the page (component_8, 9, and 10)
We wait for the component_8 to render, check what the field value of field_x is and hide other components based on that value.
TB.render('component_8', function(data) {
fieldValue = data.record.field_40;
if(fieldValue === "Seed"){
TB.hideComponent('component_9');
TB.hideComponent('component_10');
}
})
To add some more context, the response from the function(data) returns several things depending on the component. We can see all of it by simply doing:
console.log(data)
The main things you’ll see are:
This will console log the entire response
everything = data;
console.log(everything);
This is just the Element details
element = data.ele;
console.log(element);
This is the Tadabase Object ID:
objectId = data.objId;
console.log(objectId);
This will output the entire record:
record = data.record;
console.log(record );
This will get the value of a specific field inside the record:
fieldValue = data.record.field_40;
console.log(fieldValue);
This will get the component type (like dataTable, details, calendar etc…)
componentType = data.type;
console.log(componentType);
I know a lot of this is repetitive and you could have deduced all of these by just logging the ‘data’, but I wanted to be a bit descriptive especially since we don’t yet have docs on this new feature.
So I’m way out of my paygrade now. 
The code you wrote would be for when it’s rolled out to all servers, correct?
If so, would this be correct for my example page linked above?
TB.render(‘x_element_page_502_1’, function(data) {
fieldValue = data.record.field_806;
if(fieldValue === “Normal”){
TB.hideComponent(‘field_block_field_781’);
TB.hideComponent(‘field_block_field_782’);
}
})
Yes! Exactly.
Except, we started our own component naming mechanism to make this easier to find. So instead of the ID (x_element_page_502_1), you’d use ‘component_x’
At this time you must preview enabled to see the component ID’s.
Sweet!! Now the million $ question… when might this be available?
For sure today.
But you can get a head start by logging into the beta builder and adding this script there
I set this up as you said and it works great…but not on mobile. Is there something I’m missing or will it just not work.
My mistake. This actually does work on mobile.
I`m not able to get a value from a field from dataTable.
I need to read a field from each row and would like to compare it with other field from the same row.
After that, I need to hide only the line is really equal to both fields
Could you help me?
var DETAIL_COMPONENT_ID = “component_ID”;
var minumum_price = “field_413”;
var price = “field_76”;
var COMPONENT_TO_SHOW = “component_9”;
TB.render(COMPONENT_TO_SHOW, function(data) {
TB.showComponent(COMPONENT_TO_SHOW);
//objectId = data.objId;
//console.log(objectId);
componentType = data.type;
console.log(componentType);
//fieldValue = data.record.field_413;
//console.log(fieldValue);
//fieldValue = '{data.record.field_413}';
//console.log(fieldValue);
console.log(data.records.length)
if (data.records === undefined || data.records.length > 0) {
console.log('undefined');
} else {
console.log('defined');
}
//console.log(document.getElementById("field_413"));
// console.log(data.record[minumum_price]);
//console.log(data.record[price]);
//TB.showComponent(COMPONENT_TO_SHOW);
});
This sounds like it belongs in a new thread, but have you checked this:
Perhaps that can be a starting point for you.