Click here to Skip to main content
15,920,383 members
Please Sign up or sign in to vote.
1.00/5 (2 votes)
See more:
Resource Name search on Project Online Resource Center PDP in Project Online Hi Team,

It am 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

<!DOCTYPE
</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>">


What I have tried:

<pre><!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>
Posted
Comments
Richard Deeming 18-Apr-24 7:50am    
We don't have access to the API you're calling, and we have no idea what you were expecting or what you are actually getting. Nobody can help you without a lot more information than you have provided here.

1 solution

First of all, thank you for posting a code sample with your question. Unfortunately, there's a lot of context missing from this question so we can't really help until you fill in some of the blanks. As others will tell you, we can't see your screen so we don't know what's going on, or what you expect to happen.

You say that this isn't filtering as expected, but you need to tell us whether the filter portion is throwing an error, or you are just not getting results that you are expecting. If I were you, I would set a debug point in this code and step through it to see what's happening.

A note on style - try not to use var in JavaScript. You have const and let available to you which is a much better way to declare variables as their scope is predictable. You can protect yourself against unintended side effects from something outside the scope changing a variable that was hoisted by var.
 
Share this answer
 
Comments
Member 10897967 18-Apr-24 9:00am    
Hi Pete,

Thanks for your response.

I have a Project Online Resource Center PDP (Project Detail Page) and attempting to filter resources based on their names using the script provided above. However, after updating the script in the Project Online Script Editor web part, I am not seeing any results and not encountering errors.
Pete O'Hanlon 18-Apr-24 10:08am    
It looks like you're expecting to use OData here, but the URL you are hitting looks like a plain URL with no filtering available. You need to check the documentation to see what endpoint you should be hitting and what parameters you need to pass to support filtering. We can't help you with that - only the documentation is going to do that for you.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900