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:
- handleBuildingUnitChange()
- checkValuesOnPage()
- fetchPropertyHierarchy()
- 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);
}
