Resource name search on project online resource center PDP in project online

Question

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 18-Apr-24 1:41am

Member 10897967

Add a Solution

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

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Pete O'Hanlon · Answer 1 · 2024-04-18T01:53:00

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.