Complex Component Visibility

[andreas]

I’m a total novice with JavaScript so I need some help. I have a rather complex setup for hiding and showing components on a page. I used Chat GPT to write the script below. While the logic works perfectly fine (according to console log), the instructions prevent the page to be displayed at all. As soon as the script is done I only get a blank white page.

// Define component IDs and field names directly
var DETAIL_COMPONENT_ID = "component_23";
var DETAIL_FIELD = "field_872"; // Renamed from FIELD_872 to DETAIL_FIELD
var COMPONENT_TO_HIDE = "component_15";
var COMPONENT_TO_SHOW = "component_24";
var ABENDSHOW = "component_4"; // Renamed from COMPONENT_4_ID to ABENDSHOW
var MITTAGSHOW = "component_14"; // Renamed from COMPONENT_14_ID to MITTAGSHOW

// Functions to get data from components
function getComponent23Data() {
    return new Promise(function(resolve, reject) {
        TB.render(DETAIL_COMPONENT_ID, function(data) {
            console.log("Component 23 data:", data);

            var detailFieldValue = null;

            try {
                if (data && data.records && data.records.length > 0) {
                    detailFieldValue = data.records[0][DETAIL_FIELD];
                    console.log("Detail field value:", detailFieldValue);
                } else {
                    console.warn("Component 23 has no data.");
                }

                resolve(detailFieldValue);
            } catch (error) {
                console.error("Error in getComponent23Data:", error);
                reject(error);
            }
        });
    });
}

function getAbendshowData() {
    return new Promise(function(resolve, reject) {
        TB.render(ABENDSHOW, function(componentData) {
            console.log("Abendshow data:", componentData);

            var hasContentInAbendshow = false;

            try {
                if (componentData && componentData.records && componentData.records.length > 0) {
                    hasContentInAbendshow = true;
                    console.log("Abendshow has records.");
                }

                resolve(hasContentInAbendshow);
            } catch (error) {
                console.error("Error in getAbendshowData:", error);
                reject(error);
            }
        });
    });
}

function getMittagshowData() {
    return new Promise(function(resolve, reject) {
        TB.render(MITTAGSHOW, function(componentData) {
            console.log("Mittagshow data:", componentData);

            var hasContentInMittagshow = false;

            try {
                if (componentData && componentData.records && componentData.records.length > 0) {
                    hasContentInMittagshow = true;
                    console.log("Mittagshow has records.");
                }

                resolve(hasContentInMittagshow);
            } catch (error) {
                console.error("Error in getMittagshowData:", error);
                reject(error);
            }
        });
    });
}

// After all data is retrieved, update visibility
Promise.all([getComponent23Data(), getAbendshowData(), getMittagshowData()]).then(function(values) {
    console.log("Promise.all resolved, values:", values);
    var detailFieldValue = values[0];
    var hasContentInAbendshow = values[1];
    var hasContentInMittagshow = values[2];

    // Variables to control visibility
    var shouldHideComponent15 = false;
    var shouldShowComponent24 = false;

    // Check the main condition (Detail Field)
    if (!detailFieldValue || detailFieldValue.toLowerCase() !== "ja") {
        // Detail field is not "ja", empty, or component 23 has no data
        shouldHideComponent15 = true;
        shouldShowComponent24 = true;
        console.log("Detail field is not 'ja' or not available.");
    } else {
        console.log("Detail field is 'ja'.");
    }

    // Check Abendshow component
    if (hasContentInAbendshow) {
        shouldHideComponent15 = true;
        console.log("Abendshow has records.");
    }

    // Check Mittagshow component
    if (hasContentInMittagshow) {
        shouldHideComponent15 = true;
        console.log("Mittagshow has records.");
    }

    console.log("shouldHideComponent15:", shouldHideComponent15);
    console.log("shouldShowComponent24:", shouldShowComponent24);

    // Update visibility of components using TB.showComponent and TB.hideComponent
    try {
        if (shouldHideComponent15) {
            TB.hideComponent(COMPONENT_TO_HIDE); // Hide component 15
            console.log("Component 15 hidden.");
        } else {
            TB.showComponent(COMPONENT_TO_HIDE); // Show component 15
            console.log("Component 15 shown.");
        }
    } catch (error) {
        console.error("Error updating visibility of component 15:", error);
    }

    try {
        if (shouldShowComponent24) {
            TB.showComponent(COMPONENT_TO_SHOW); // Show component 24
            console.log("Component 24 shown.");
        } else {
            TB.hideComponent(COMPONENT_TO_SHOW); // Hide component 24
            console.log("Component 24 hidden.");
        }
    } catch (error) {
        console.error("Error updating visibility of component 24:", error);
    }

}).catch(function(error) {
    console.error("Error retrieving components:", error);
});

I also tried using the other method of hiding Components via “data.ele.css(‘display’, ‘none’);” but the second TB.render wont fire at all

// Definieren der Variablen
var DETAIL_COMPONENT_ID = "component_23";
var FIELD_872 = "field_872";
var COMPONENT_15_ID = "component_15";
var COMPONENT_24_ID = "component_24";
var COMPONENT_4_ID = "component_4";
var COMPONENT_14_ID = "component_14";

// Funktionen zum Abrufen der Daten von Komponenten
function getComponent23Data() {
    return new Promise(function(resolve) {
        TB.render(DETAIL_COMPONENT_ID, function(data) {
            console.log("Komponente 23 Daten:", data);

            var field872Value = null;

            if (data && data.records && data.records.length > 0) {
                field872Value = data.records[0][FIELD_872];
                console.log("Feld 872 Wert:", field872Value);
            } else {
                console.warn("Komponente 23 hat keine Daten.");
            }

            resolve(field872Value);
        });
    });
}

function getComponent4Data() {
    return new Promise(function(resolve) {
        TB.render(COMPONENT_4_ID, function(component4Data) {
            console.log("Komponente 4 Daten:", component4Data);

            var hasContentInComponent4 = false;

            if (component4Data && component4Data.records && component4Data.records.length > 0) {
                hasContentInComponent4 = true;
                console.log("Komponente 4 hat Datensätze.");
            }

            resolve(hasContentInComponent4);
        });
    });
}

function getComponent14Data() {
    return new Promise(function(resolve) {
        TB.render(COMPONENT_14_ID, function(component14Data) {
            console.log("Komponente 14 Daten:", component14Data);

            var hasContentInComponent14 = false;

            if (component14Data && component14Data.records && component14Data.records.length > 0) {
                hasContentInComponent14 = true;
                console.log("Komponente 14 hat Datensätze.");
            }

            resolve(hasContentInComponent14);
        });
    });
}

// Alle Daten abrufen und dann die Sichtbarkeit aktualisieren
Promise.all([getComponent23Data(), getComponent4Data(), getComponent14Data()]).then(function(values) {
    var field872Value = values[0];
    var hasContentInComponent4 = values[1];
    var hasContentInComponent14 = values[2];

    // Variablen zur Steuerung der Sichtbarkeit
    var shouldHideComponent15 = false;
    var shouldShowComponent24 = false;

    // Überprüfung der Hauptbedingung (Feld 872)
    if (!field872Value || field872Value.toLowerCase() !== "ja") {
        // Feld 872 ist nicht "ja", leer oder Komponente 23 hat keine Daten
        shouldHideComponent15 = true;
        shouldShowComponent24 = true;
        console.log("Feld 872 ist nicht 'ja' oder nicht verfügbar.");
    }

    // Überprüfung von Komponente 4
    if (hasContentInComponent4) {
        shouldHideComponent15 = true;
        console.log("Komponente 4 hat Datensätze.");
    }

    // Überprüfung von Komponente 14
    if (hasContentInComponent14) {
        shouldHideComponent15 = true;
        console.log("Komponente 14 hat Datensätze.");
    }

    // Basierend auf den gesammelten Informationen die Sichtbarkeit der Komponenten aktualisieren
    // Anstelle von TB.hideComponent() verwenden wir data.ele.css('display', 'none');

    // Komponente 15 aktualisieren
    TB.render(COMPONENT_15_ID, function(component15Data) {
        if (shouldHideComponent15) {
            component15Data.ele.css('display', 'none');
            console.log("Komponente 15 ausgeblendet");
        } else {
            component15Data.ele.css('display', '');
            console.log("Komponente 15 eingeblendet");
        }
    });

    // Komponente 24 aktualisieren
    TB.render(COMPONENT_24_ID, function(component24Data) {
        if (shouldShowComponent24) {
            component24Data.ele.css('display', '');
            console.log("Komponente 24 eingeblendet");
        } else {
            component24Data.ele.css('display', 'none');
            console.log("Komponente 24 ausgeblendet");
        }
    });

}).catch(function(error) {
    console.error("Fehler beim Abrufen der Komponenten:", error);
});

[Peter]

Hoi Andreas. I have also asked ChatGPT what could be wrong with the code.
Chat thought it might be the promise.all .

So I asked for code without the promise, and this is what it came up with.

// Define component IDs and field names directly
var DETAIL_COMPONENT_ID = "component_23";
var DETAIL_FIELD = "field_872";
var COMPONENT_TO_HIDE = "component_15";
var COMPONENT_TO_SHOW = "component_24";
var ABENDSHOW = "component_4";
var MITTAGSHOW = "component_14";

// Function to get data from Component 23
function getComponent23Data(callback) {
    TB.render(DETAIL_COMPONENT_ID, function(data) {
        console.log("Component 23 data:", data);

        var detailFieldValue = null;
        try {
            if (data && data.records && data.records.length > 0) {
                detailFieldValue = data.records[0][DETAIL_FIELD];
                console.log("Detail field value:", detailFieldValue);
            } else {
                console.warn("Component 23 has no data.");
            }
        } catch (error) {
            console.error("Error in getComponent23Data:", error);
        }
        callback(detailFieldValue);
    });
}

// Function to get data from Abendshow
function getAbendshowData(callback) {
    TB.render(ABENDSHOW, function(componentData) {
        console.log("Abendshow data:", componentData);

        var hasContentInAbendshow = false;
        try {
            if (componentData && componentData.records && componentData.records.length > 0) {
                hasContentInAbendshow = true;
                console.log("Abendshow has records.");
            }
        } catch (error) {
            console.error("Error in getAbendshowData:", error);
        }
        callback(hasContentInAbendshow);
    });
}

// Function to get data from Mittagshow
function getMittagshowData(callback) {
    TB.render(MITTAGSHOW, function(componentData) {
        console.log("Mittagshow data:", componentData);

        var hasContentInMittagshow = false;
        try {
            if (componentData && componentData.records && componentData.records.length > 0) {
                hasContentInMittagshow = true;
                console.log("Mittagshow has records.");
            }
        } catch (error) {
            console.error("Error in getMittagshowData:", error);
        }
        callback(hasContentInMittagshow);
    });
}

// Main logic to control visibility based on data
getComponent23Data(function(detailFieldValue) {
    getAbendshowData(function(hasContentInAbendshow) {
        getMittagshowData(function(hasContentInMittagshow) {

            // Variables to control visibility
            var shouldHideComponent15 = false;
            var shouldShowComponent24 = false;

            // Check the main condition (Detail Field)
            if (!detailFieldValue || detailFieldValue.toLowerCase() !== "ja") {
                shouldHideComponent15 = true;
                shouldShowComponent24 = true;
                console.log("Detail field is not 'ja' or not available.");
            } else {
                console.log("Detail field is 'ja'.");
            }

            // Check Abendshow component
            if (hasContentInAbendshow) {
                shouldHideComponent15 = true;
                console.log("Abendshow has records.");
            }

            // Check Mittagshow component
            if (hasContentInMittagshow) {
                shouldHideComponent15 = true;
                console.log("Mittagshow has records.");
            }

            console.log("shouldHideComponent15:", shouldHideComponent15);
            console.log("shouldShowComponent24:", shouldShowComponent24);

            // Update visibility of components using TB.showComponent and TB.hideComponent
            try {
                if (shouldHideComponent15) {
                    TB.hideComponent(COMPONENT_TO_HIDE); // Hide component 15
                    console.log("Component 15 hidden.");
                } else {
                    TB.showComponent(COMPONENT_TO_HIDE); // Show component 15
                    console.log("Component 15 shown.");
                }
            } catch (error) {
                console.error("Error updating visibility of component 15:", error);
            }

            try {
                if (shouldShowComponent24) {
                    TB.showComponent(COMPONENT_TO_SHOW); // Show component 24
                    console.log("Component 24 shown.");
                } else {
                    TB.hideComponent(COMPONENT_TO_SHOW); // Hide component 24
                    console.log("Component 24 hidden.");
                }
            } catch (error) {
                console.error("Error updating visibility of component 24:", error);
            }

        });
    });
});

You could try this or otherwise continue with Chat for a solution that might work.

I love it when people, like me, are at work who have no clue about this and still come up with a solution. Long live Chat and its successors.

Good luck