Troubleshoot display value in lookup field

[oml]

Hi,

I have this strange issue where I have three related lookup fields in a hierarchy,

• flx_buildingtable
• flx_buildingfloor
• flx_buildingunit

I use the OOB filtering when going from parent lookup to child lookup. So going from Property (flx_buildingtable) to Floor, to Unit is all OOB filtering. This works just fine.

If I go directly to the Property Unit and select a unit, I have some JS code to populate the related parent Floor and Property. This is also working just fine.

However, I noticed something strange. When I remove the values in the Unit lookup and Floor lookup, my code executes correctly and fetches the right values for the Floor lookup. But, the display value remains blank as shown in the screenshot.

After re-selecting a unit, I inspected the floor lookup field and debugged the JS code. From my analysis, it appears that the correct value has been obtained to populate the floor lookup field. The function responsible for populating the field has also been triggered with the correct values. However, the field still appears to be blank despite all these efforts.

After refreshing the page, the fields are cleared and the function works the first time. However, any subsequent attempts to use the function result in blank display values, despite the inspected data being correct.

This is currently my JS code:

Here is the order in which the triggered functions are executed when selecting a unit to help you understand the behavior:

1.  handleBuildingUnitChange()
2. checkValuesOnPage()
3. fetchPropertyHierarchy()
4. populateLookupField()

$(document).ready(function () {
    debugger;
    // Filter unit lookup view
    var list = $("#flx_buildingunit_lookupmodal").find(".entity-lookup").find(".entity-grid").eq(0);
    list.on("loaded", function () {
        var propertyColumnIndex = 3;
        //var specificValueToShow = $("#flx_buildingtable").val();
        var specificDisplayValueToShow = $("#flx_buildingtable_name").val();

        if (specificDisplayValueToShow !== null && specificDisplayValueToShow !== "") {
            filterUnitLookupView(list, specificDisplayValueToShow, propertyColumnIndex);
        }
    })


    // Change event for flx_buildingunit
    $("#flx_buildingunit").change(function () {
        handleBuildingUnitChange($(this).val());
    });

    // Change event for flx_buildingfloor_name
    $("#flx_buildingfloor").change(function () {
        debugger;

        var selectedValue = $(this).val().trim();

        // Check if the value is not empty before calling handleBuildingFloorChange
        if (selectedValue !== "") {
            console.log("before handleBuildingFloorChange()");
            handleBuildingFloorChange(selectedValue);
        } else {
            console.log("before nullifyBuildingFloorField()");
            // Optionally, you can nullify the field here or perform any other action
            nullifyBuildingFloorField();
        }

        handleBuildingFloorChange($(this).val());
    });
});

function nullifyBuildingFloorField() {
    debugger;
    // Nullify the field on the page
    $("#flx_buildingfloor").val("");  // Set the value to an empty string
    $("#flx_buildingfloor_name").val("");  // Set the display name to an empty string
}

function handleBuildingUnitChange(selectedValue) {
    // Show loading wheel while waiting for the response
    showLoading();

    // Check if the values are already present on the page
    if (!checkValuesOnPage()) {
        console.log("inside checkValuesOnPage if condition!");
        // If not, make the fetch call
        fetchPropertyHierarchy(selectedValue);
    } else {
        // If yes, hide the loading indicator
        hideLoading();
    }
}

function handleBuildingFloorChange(selectedValue) {
    debugger;
    // Show loading wheel while waiting for the response
    showLoading();

    // Check if the values are already present on the page
    if (!checkPropertyValueOnPage()) {
        console.log("inside checkPropertyValueOnPage if condition!");
        // If not, make the fetch call for building table
        fetchBuildingTable(selectedValue);
    } else {
        // If yes, hide the loading indicator
        hideLoading();
    }
}

function filterUnitLookupView(list, specificDisplayValueToShow, propertyColumnIndex) {
    // Check if the specific value is not null or undefined
    if (specificDisplayValueToShow) {
        // Iterate through each row in the table
        list.find("table tbody > tr").each(function () {
            var tr = $(this);
            var columnValue = tr.find('td').eq(propertyColumnIndex).text().trim();
            
            // Show or hide the row based on the comparison
            if (columnValue === specificDisplayValueToShow) {
                tr.show(); // Show the row if the column value matches the specific value
            } else {
                tr.hide(); // Hide the row otherwise
            }
        });
    }
}

function fetchPropertyHierarchy(unitId) {
    webapi.safeAjax({
        type: "GET",
        url: "/_api/flx_buildingunits(" + unitId + ")?$expand=flx_BuildingFloor($select=flx_buildingfloorid,flx_floor),flx_BuildingTable($select=flx_buildingtableid,flx_buildingid)",
        contentType: "application/json",
        headers: {
            "Prefer": "odata.include-annotations=*"
        },
        success: function (data, textStatus, xhr) {
            // Hide the loading indicator when the response is received
            hideLoading();
            debugger;
            var result = data;
            
            // Many To One Relationships
            if (result.hasOwnProperty("flx_BuildingFloor") && result["flx_BuildingFloor"] !== null) {
                var flx_BuildingFloor_flx_buildingfloorid = result["flx_BuildingFloor"]["flx_buildingfloorid"]; // Guid
                var flx_BuildingFloor_flx_floor = result["flx_BuildingFloor"]["flx_floor"]; // Text

                var flxBuildingFloorField = $("#flx_buildingfloor").val();
                if (!flxBuildingFloorField) {
                    populateLookupField("flx_buildingfloor", flx_BuildingFloor_flx_buildingfloorid, flx_BuildingFloor_flx_floor, "flx_buildingfloor");
                }
                hideLoading();
            }
            if (result.hasOwnProperty("flx_BuildingTable") && result["flx_BuildingTable"] !== null) {
                var flx_BuildingTable_flx_buildingtableid = result["flx_BuildingTable"]["flx_buildingtableid"]; // Guid
                var flx_BuildingTable_flx_buildingid = result["flx_BuildingTable"]["flx_buildingid"]; // Text

                var flxBuildingTableField = $("#flx_buildingtable").val();
                if (!flxBuildingTableField) {
                    populateLookupField("flx_buildingtable", flx_BuildingTable_flx_buildingtableid, flx_BuildingTable_flx_buildingid, "flx_buildingtable");
                }
                hideLoading();
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            // Hide the loading indicator in case of an error
            hideLoading();
            console.log(xhr);
        }
    });
}

function fetchBuildingTable(floorValue) {
    // Make a fetch call for building table based on the floor value
    webapi.safeAjax({
        type: "GET",
        url: "/_api/flx_buildingfloors(" + floorValue + ")?$expand=flx_BuildingTable($select=flx_buildingtableid,flx_buildingid)",        
        contentType: "application/json",
        headers: {
            "Prefer": "odata.include-annotations=*"
        },
        success: function (data, textStatus, xhr) {
            hideLoading();

            var result = data;
            console.log(result);

            // Many To One Relationship
            if (result.hasOwnProperty("flx_BuildingTable") && result["flx_BuildingTable"] !== null) {
                var flx_BuildingTable_flx_buildingtableid = result["flx_BuildingTable"]["flx_buildingtableid"]; // Guid
                var flx_BuildingTable_flx_buildingid = result["flx_BuildingTable"]["flx_buildingid"]; // Text
                // Process the fetched data and populate the flx_buildingtable_name field
                populateLookupField("flx_buildingtable", flx_BuildingTable_flx_buildingtableid, flx_BuildingTable_flx_buildingid, "flx_buildingtable");
            }
        },
        error: function (xhr, textStatus, errorThrown) {
            hideLoading();
            console.log(xhr);
        }
    });
}


function checkValuesOnPage() {
    debugger;
    // Check if values are already present on the page
    var flxBuildingFloorField = $("#flx_buildingfloor").val();
    var flxBuildingTableField = $("#flx_buildingtable").val();

    return (flxBuildingFloorField && flxBuildingFloorField !== null && flxBuildingFloorField !== "") &&
           (flxBuildingTableField && flxBuildingTableField !== null && flxBuildingTableField !== "");
}

function checkPropertyValueOnPage() {
    debugger;
    // Check if values are already present on the page
    var flxBuildingTableField = $("#flx_buildingtable").val();

    return (flxBuildingTableField && flxBuildingTableField !== null && flxBuildingTableField !== "");
}

function showLoading() {
    // Show the loading indicator
    $("#loadingIndicator").show();
}

function hideLoading() {
    // Hide the loading indicator
    $("#loadingIndicator").hide();
}

function populateLookupField(lookupFieldId, entityId, entityName, entityLogicalName) {
    // Set the ID part of the lookup field
    $("#" + lookupFieldId).attr("value", entityId);

    // Set the entity name part of the lookup field
    $("#" + lookupFieldId + "_name").attr("value", entityName);

    // Set the entity type part of the lookup field
    $("#" + lookupFieldId + "_entityname").attr("value", entityLogicalName);
}

[saudali_25]

Hi @oml ,

Assuming the issue occurred only when you change Unit value not when you're changing Floor. As per my understanding, it seems to be some issue with fetchPropertyHierarchy() function. Try calling nullifyBuildingFloorField() before calling populateLookupField() function. Also, remove this highlighted condition.

Please give it a try and see if it works, if not better to add some console logs in your code so you may get exact idea at what point it is failing. Never mind if it doesn't work because I cannot debug this code. 

Thanks,

Saud

If you like this post, give a Thumbs up. Where it solved your request, Mark it as a Solution to enable other users find it.

[oml]

Hi @saudali_25 ,

Thanks for your quick reply.

Adding the nullify function before populateLookup is breaking the logic even more because populateLookup is executed before the nullify function is complete.. I guess this is classic async javascript.. 🙂

However, I inspected the HTML DOM while doing the triggers, and here is what I found (unfortunately I didn't get any wiser... but maybe you see something) 

1. 

2.

3.

4.

So again, works first time. But not any attempts after that. Also did a console.log of the values being passed to the populateLookupField - which are correct: