Forum Discussion

LijaHarris's avatar
LijaHarris
Qrew Cadet
2 days ago

Code Page for User to Search And Return a Report Visual

 I have the following Code page.  I have successful code where the user inputs data into 2 fields and QuickBase data is returned.  However, where I am struggling is instead of data being returned, a report being returned ideally or I have a formula URL field that can be returned but needs to be an iframe.

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

<script>

document.getElementById('retrieveButton').addEventListener('click', function() {

        const inputValue = document.getElementById('inputField').value;

        const appDbId = 'XXXXXXXXXXX'; // Replace with your Quickbase App DBID

        const tableDbId = 'XXXXXXXX'; // Replace with your Quickbase Table DBID

        const targetFieldId = '6'; // THIS IS THE formula URL field

        const queryFieldId = '37'; // Replace with the FID of the field to query against

        const userToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

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

****I have also tried report is qid 6

const apiURL='https://xxxxxxxxxxx.quickbase.com/db/${tableDbId}? qid=6&nv=1&v0= {'${queryFieldId}'.EX.'${inputValue}'}

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 <possible_url>

                const statusNode = xmlDoc.querySelector("possible_url");

                if (statusNode) {

                    document.getElementById('result').textContent = statusNode.textContent;

                } else {

                    document.getElementById('result').textContent = "No field found in response.";

                }

            })

            .catch(error => {

                console.error('Error:', error);

                document.getElementById('result').textContent = 'An error occurred during the API call.';

            });

When I call the formula URL field I get this

so

1) is there a way instead of the URL being retrieved to have it in a iframe so that the report visual is shown?

2) Is there a way to instead filter the report for example:

const apiURL='https://xxxxxxxxxxx.quickbase.com/db/${tableDbId}? qid=6&nv=1&v0= {'${queryFieldId}'.EX.'${inputValue}'}

(this URL does work: https://xxxxxxxxxxxxxxxx.com/nav/app/xxxxxxxx/table/xxxxxxxx/action/q?qid=6&nv=1&v0=Minnie123 (Minnie123 would be the user's input to filter/query based of)

and then have visual show in the html?

The report does have a filter of "ask the user"

api

1 Reply

  • Denin's avatar
    Denin
    Qrew Cadet
    2 days ago

    You can try this, I haven't tested it so not sure if it will work. Just a basic idea using innerhtml to wrap the possible_url field with an iframe.

     

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

<script>
document.getElementById('retrieveButton').addEventListener('click', function() {
        const inputValue = document.getElementById('inputField').value;

        const appDbId = 'XXXXXXXXXXX'; // Replace with your Quickbase App DBID
        const tableDbId = 'XXXXXXXX'; // Replace with your Quickbase Table DBID
        const targetFieldId = '6'; // THIS IS THE formula URL field
        const queryFieldId = '37'; // Replace with the FID of the field to query against
        const userToken = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';

        const apiUrl = `https://xxxxxxxxxxx.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 => {
                const parser = new DOMParser();
                const xmlDoc = parser.parseFromString(xmlStr, "application/xml");
                const statusNode = xmlDoc.querySelector("possible_url");

                if (statusNode) {
                    document.getElementById('result').innerHTML = `<iframe src="${statusNode.textContent}" width="100%" height="600px" frameborder="0"></iframe>`;
                } else {
                    document.getElementById('result').textContent = "No field found in response.";
                }
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('result').textContent = 'An error occurred during the API call.';
            });
});
</script>
</body>
</html>