Is there a way to interact with DOM objects using an fdk custom app?

[Aleksey_Pashnin]

I’m new to writing apps, but I have JS and PHP experience. My task is to interact with the default HTML elements in the ticket. For example, remove quotes from an email or change the display of the conversation status (add text to it).

I ran into a problem that the code from the app.js does not apply to the elements of the ticket and works only for the elements from the app templates. For example, the following code returs null, i.e. it will not find the #nucleus-navbar element (although it is actually present in the DOM)

var client;

init();

async function init() {
  client = await app.initialized();
  client.events.on('app.activated', mainFunction());
}

async function mainFunction() {
    document.querySelector('#nucleus-navbar')
}

I found a topic related to my issue Remove email quote, but still did not understand exactly how I can interact with the quotes, because the app does not define them.

Perhaps I misunderstand the logic. I will be glad of any hints.

Also, just in case, I attach manifest.json. Thank you!

{
  "platform-version": "2.3",
  "product": {
    "freshdesk": {
      "location": {
        "full_page_app": {
          "url": "template.html",
          "icon": "icon.svg"
        },
        "ticket_sidebar": {
          "url": "index.html",
          "icon": "styles/images/icon.svg"
        }
      }
    }
  },
  "engines": {
    "node": "18.14.0",
    "fdk": "9.0.8"
  }
}

[Raviraj (Raviraj Subramanian)]

Hi @Aleksey_Pashnin,

Welcome to the Freshworks Developer Community!

The Freshworks apps cannot interact with the DOM elements directly. It’s blocked for the security reasons. However, there are features provided by the Freshworks Developer Platform to interact with the elements with limited features.
The features are listing in the documentation under Data Methods, Events Methods, and Interface Methods.

As their names suggest, the data methods provide the data already available on the app page. You can refer to the documentation for the data list available on the respective page. If the app is rendered on a particular page with one of the available placeholders, the app can fetch those data with the listed method.

With Events Methods, when an event occurs due to the user action, the app gets the same HTML events.

With Interface Methods, the app can make changes to the DOM elements.
In your case, the app can use one of the available interface methods to change the DOM element if the same is available.