Accessing HTML Element in new ticket background app

App Platform
, , , ,
1

Hi,
I am making an app which runs in new ticket background. When I am trying to access the elements from the new ticket form, I am getting null value for the element as my app is in iframe and the elements I want to access are outside the iframe. Is there any way I can access the elements of the parent DOM inside an iframe without violating CORS policy?
My HTML code is(app/views/newTicket.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="{{{appclient}}}"></script>
    <title>New Ticket Background</title>
</head>
<body>
    <script src="./../scripts/newTicket.js"></script>
</body>
<script defer>
    document.onreadystatechange = function () {
        if (document.readyState === 'complete') init();
    };
    async function init() {
        var client;
        client = await app.initialized();
        await client.events.on('app.activated', async () => {
            await getRules(client);
        });
    }
</script>
</html>

And My JS Code is(app/scripts/newTicket.js):

async function getRules(client) {
    let { ruleName } = await client.db.get("New_Form");
    for (let i = 0; i < ruleName.length; i++) {
        let rule = await client.db.get(ruleName[i]);
        if (!rule.isOn) {
            continue
        }
        if (rule.condition.length > 0) {
            for (let j = 0; j < rule.condition.length; j++) {
                let attributeName = 'data-test-id';
                let attributeValue = rule.condition[j][0].trim().replace(/\s/g, "_");
                let selector = `div[${attributeName}="${attributeValue}" i]`;
                let conditionName = document.querySelector(selector); //It is giving null
                console.log(conditionName);
            }  
        }
    }
}

I am using localstore to save an object and then fetching it using the Id: “New_Form”. It contains “ruleName” array of all the object name which I have to use. Then I am iterating through all ruleName array, for each RuleName I am doing:

  1. Checking whether the condition array in that object has length > 0.
  2. If true, iterating through the condition array and selecting the field using querySelector.

Note: The condition array is array of arrays. Example:

condition: [[ “Source”, “anotherValue”, “anotherValue”]]

I have also tried accessing the parent DOM using window.parent.document but it violates CORS policy.
Any help will be Appreciated.
Thanks

3

Hey @Aryan_Maloo,

I’m afraid not.

We do have data methods that are available in ticket details page, if the use-case of having a ticket sidebar app where you can access ticket object. If that helps.

4

Hi @zach_jones_noel ,
Thank you for replying but the data methods does not serve my use-case. I wanted to retrieve DOM elements from the new ticket page using native JavaScript functions.
I have also tried accessing the parent DOM using window.parent.document but it violates CORS policy. The code for this is:

let parentDocument = window.parent.document;
let attributeName = 'data-test-id';
let attributeValue = String(rule.condition[j][0].trim().replace(/\s/g, "_"));
let selector = `div[${attributeName}="${attributeValue}" i]`;
let conditionName = parentDocument.querySelector(selector);
console.log(conditionName);
5

Hi @Aryan_Maloo,

It’s not possible to get the DOM elements from outside the app (or iframe). It’s a sandboxed iframe and will not provide access to the parent DOM elements—only the app’s DOM elements the app can access and change.

The data methods in the New Ticket Page are available to access the required data. Also, events methods and interface methods are available to listen to events happening on the page and interact with the page elements. If you want to do something that is not available, we would have to consider them as a feature request and include them for the app to access it.

Could you please expand on what details the app requires on the New Ticket Page?

6

This topic was automatically closed 90 days after the last reply. New replies are no longer allowed.