Resource Name search on Project Online Resource Center PDP in Project Online
Hi Team,
It seems like you’re trying to develop a JavaScript script to enable resource name search on Project Online Resource Center, but it’s not filtering the resources as expected
Here is the script:
`<!DOCTYPE html>
<html>
<head>
<title>Resource Name Filter</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function () {
// Fetch resource names and initialize autocomplete
$.ajax({
url: "<ProjectOnineURL>/_api/ProjectData/Resources",
type: "GET",
headers: {
"Accept": "application/json;odata=verbose"
},
success: function (data) {
var resources = data.d.results;
var resourceNames = resources.map(function(resource) {
return resource.Name;
});
// Initialize autocomplete
$("#resourceSearch").autocomplete({
source: resourceNames,
minLength: 1, // Minimum characters before autocomplete starts
select: function (event, ui) {
// Filter the web part based on selected resource name
filterWebPart(ui.item.value);
}
});
},
error: function (error) {
console.log("Error fetching resource names: " + JSON.stringify(error));
}
});
// Function to filter the web part based on resource name
function filterWebPart(resourceName) {
try {
// Replace 'YourWebPartID' with the ID of your Project Online Resource Center web part
var webPart = document.getElementById('WebPartWPQ4');
if (webPart) {
// Set the filter criteria for the web part
webPart.set_filter(resourceName);
// Apply the filter
webPart.applyFilter();
} else {
console.log("Web part not found.");
}
} catch (error) {
console.log("Error filtering web part: " + error);
}
}
});
</script>
</head>
<body>
<label for="resourceSearch">Search Resource:</label>
<input type="text" id="resourceSearch">
</body>
</html>`