Forum Discussion

LijaHarris's avatar
LijaHarris
Qrew Cadet
2 days ago
Solved

Code Page for User to Search And Return Value

Hi, I have the following Code page.  Basically I want the user to enter in text and search.  Then the result finds their input and matches with field id 256 and return field id 29.  I will replace a...
Code Page
  • Denin's avatar
    Denin
    2 days ago

    In this case, you want to use DOMParser in Javascript. It will parse XML. Try this and see if it works:

    <!DOCTYPE html>
<html>
<head>
    <title>Quickbase Data Retriever</title>
</head>
<body>
    <label for="inputField">Enter Record ID or Search Term:</label><br>
    <input type="text" id="inputField"><br><br>
    <button id="retrieveButton">Retrieve Data</button>
    <div id="result" style="white-space: pre-wrap; border:1px solid #ccc; padding:10px; margin-top:10px;"></div>

    <script>
    document.getElementById('retrieveButton').addEventListener('click', function() {
        const inputValue = document.getElementById('inputField').value;
        const appDbId = 'XXXXXXXX'; // Replace with your Quickbase App DBID
        const tableDbId = 'XXXXXXX'; // Replace with your Quickbase Table DBID
        const targetFieldId = '29'; // Replace with the FID of the field you want returned
        const queryFieldId = '256'; // Replace with the FID of the field to query against
        const userToken = 'XXXXXXXXX'; // Replace with your Quickbase User Token

        // Build the API_DoQuery URL
        const apiUrl = `https://XXXXXX-XXXXXXX.quickbase.com/db/${tableDbId}?a=API_DoQuery&query={'${queryFieldId}'.EX.'${inputValue}'}&clist=${targetFieldId}&usertoken=${userToken}`;

        fetch(apiUrl)
            .then(response => response.text()) // Quickbase returns XML
            .then(xmlStr => {
                // Parse the XML string into a DOM object
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(xmlStr, "application/xml");

                // Extract the value inside <status>
                const statusNode = xmlDoc.querySelector("status");

                if (statusNode) {
                    document.getElementById('result').textContent = statusNode.textContent;
                } else {
                    document.getElementById('result').textContent = "No <status> field found in response.";
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('result').textContent = 'An error occurred during the API call.';
            });
    });
    </script>
</body>
</html>

     

Denin's avatar
Denin
Qrew Cadet
2 days ago

You have a query selector looking for this: 

const fieldNode = data.querySelector(`f[id="${targetFieldId}"]`);

But the API response probably doesn't include that, so you are getting an error (which is generated by the code, not from the API).

 

Try this simplified version that doesn't try to parse the response:

<!DOCTYPE html>
<html>
<head>
    <title>Quickbase Data Retriever</title>
</head>
<body>
    <label for="inputField">Enter Record ID or Search Term:</label><br>
    <input type="text" id="inputField"><br><br>
    <button id="retrieveButton">Retrieve Data</button>
    <div id="result" style="white-space: pre-wrap; border:1px solid #ccc; padding:10px; margin-top:10px;"></div>

    <script>
    document.getElementById('retrieveButton').addEventListener('click', function() {
        const inputValue = document.getElementById('inputField').value;
        const appDbId = 'XXXXXXXX'; // Replace with your Quickbase App DBID
        const tableDbId = 'XXXXXXX'; // Replace with your Quickbase Table DBID
        const targetFieldId = '29'; // Replace with the FID of the field you want returned
        const queryFieldId = '256'; // Replace with the FID of the field to query against
        const userToken = 'XXXXXXXXX'; // Replace with your Quickbase User Token

        // Build the API_DoQuery URL
        const apiUrl = `https://XXXXXX-XXXXXXX.quickbase.com/db/${tableDbId}?a=API_DoQuery&query={'${queryFieldId}'.EX.'${inputValue}'}&clist=${targetFieldId}&usertoken=${userToken}`;

        fetch(apiUrl)
            .then(response => response.text()) // Quickbase returns XML
            .then(xmlStr => {
                document.getElementById('result').textContent = xmlStr;
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('result').textContent = 'An error occurred during the API call.';
            });
    });
    </script>
</body>
</html>

If that works, then I think the real issue you might want to solve is how to parse the API response. Maybe provide a sample of the API response without any sensitive information.

  • LijaHarris's avatar
    LijaHarris
    Qrew Cadet
    2 days ago

    I think my last response didnt make it but thank you! It came out like this (no confidential info just a random project)

    <?xml version="1.0" ?> <qdbapi> <action>API_DoQuery</action> <errcode>0</errcode> <errtext>No error</errtext> <dbinfo> <name>Projects</name> <desc></desc> </dbinfo> <variables> </variables> <chdbids> </chdbids> <record> <status>PFS Development</status> <update_id>1757082846172</update_id> </record> </qdbapi>

    How would i parse the API response to get just "PFS Development" (the status)?

    • Denin's avatar
      Denin
      Qrew Cadet
      2 days ago

      In this case, you want to use DOMParser in Javascript. It will parse XML. Try this and see if it works:

      <!DOCTYPE html>
<html>
<head>
    <title>Quickbase Data Retriever</title>
</head>
<body>
    <label for="inputField">Enter Record ID or Search Term:</label><br>
    <input type="text" id="inputField"><br><br>
    <button id="retrieveButton">Retrieve Data</button>
    <div id="result" style="white-space: pre-wrap; border:1px solid #ccc; padding:10px; margin-top:10px;"></div>

    <script>
    document.getElementById('retrieveButton').addEventListener('click', function() {
        const inputValue = document.getElementById('inputField').value;
        const appDbId = 'XXXXXXXX'; // Replace with your Quickbase App DBID
        const tableDbId = 'XXXXXXX'; // Replace with your Quickbase Table DBID
        const targetFieldId = '29'; // Replace with the FID of the field you want returned
        const queryFieldId = '256'; // Replace with the FID of the field to query against
        const userToken = 'XXXXXXXXX'; // Replace with your Quickbase User Token

        // Build the API_DoQuery URL
        const apiUrl = `https://XXXXXX-XXXXXXX.quickbase.com/db/${tableDbId}?a=API_DoQuery&query={'${queryFieldId}'.EX.'${inputValue}'}&clist=${targetFieldId}&usertoken=${userToken}`;

        fetch(apiUrl)
            .then(response => response.text()) // Quickbase returns XML
            .then(xmlStr => {
                // Parse the XML string into a DOM object
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(xmlStr, "application/xml");

                // Extract the value inside <status>
                const statusNode = xmlDoc.querySelector("status");

                if (statusNode) {
                    document.getElementById('result').textContent = statusNode.textContent;
                } else {
                    document.getElementById('result').textContent = "No <status> field found in response.";
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('result').textContent = 'An error occurred during the API call.';
            });
    });
    </script>
</body>
</html>

       

      • LijaHarris's avatar
        LijaHarris
        Qrew Cadet
        2 days ago

        Thank you thank you so much - you are a miracle worker!!! That worked perfectly!