How Customize tags of qlik embed or the integration is directly attaching tag with object id in html?

[jaimeardp]

Hi, we are actually migrating from the Qlik Root API to Qlik Embed. I have already configured OAuth by injecting the script tag like this:

    async function updateHeaders(configParams) {
      var qlik_embed_script = document.createElement('script');
      qlik_embed_script.setAttribute('crossorigin', 'anonymous');
      qlik_embed_script.setAttribute('type', 'application/javascript');
      qlik_embed_script.setAttribute('src', 'https://cdn.jsdelivr.net/npm/@qlik/embed-web-components@1/dist/index.min.js');
      qlik_embed_script.setAttribute('data-host', 'https://' + configParams.tenantHostname)
      qlik_embed_script.setAttribute('data-get-access-token', 'getAccessToken');
      qlik_embed_script.setAttribute('data-auth-type', 'Oauth2');
      qlik_embed_script.setAttribute('data-client-id', configParams.oAuthClientId);
      qlik_embed_script.setAttribute('data-access-token-storage', 'local');
      await document.head.appendChild(qlik_embed_script);
    }

 and after we are invoke tag like this  in html

            <qlik-embed id="sheet-change" ui="analytics/sheet" app-id="1111-2222-3333-4444-5555" object-id="hAbB4T"></qlik-embed>

However, this approach does not meet our objectives because our design with the API Root API is more customized. We imported the Qlik JavaScript library and used the openApp method to obtain an instance of the app. Based on that, we declared the "app" variable, used selectValues, and made calls like this.

const SetupManager = {
    initialize: function(app, page) {
        this.page = page;
        this.selectVariableX(app);
    },
    selectVariableX: function(app) {    app.field("%_Variable_X").selectValues([bussinessGoal.filters["_Variable_X"].toString()], false, false)
            .then(() => this.selectVariableX(app));
    },
    selectCurrency: function(app) { app.field("Currency").selectValues([bussinessGoal.filters["Currency"]], false, true)
            .then(() => this.selectCurrency(app));
    },

    selectBBBBB: function(app) {
        app.field("BBBBB").selectValues([bussinessGoal.filters["BBBBB"]], false, true)
            .then(() => this.selectBBBBB(app));
    },
    selectCCCCCC: function(app) {
        app.field("CCCCCC").selectValues([bussinessGoal.filters["CCCCCC"]], false, true)
            .then(() => this.loadMaxPeriodo(app));
    },
    loadMaxPeriodo: function(app) {
        bussinessGoalBS.loadMaxPeriodo(app)
            .catch((err) => {
                alert("Error to load period:", err);
            })
            .then((periodResult) => this.processPeriodResult(periodResult, app));
    },
    processPeriodResult: function(periodResult, app) {
        var meses = 12;
        var dataPeriod = [];
        var result = periodResult.layout.qHyperCube.qDataPages[0].qMatrix[0][0].qText;

However, with Qlik Embed, I don't see a way to achieve this style. I understand that I should use QIX, but my backend is in Java, and Java does not have libraries like QIX. Therefore, I cannot use it.

    const appSession = qix.openAppSession({
        appId: myConfig.appId,     
        hostConfig: {        
            authType: "oauth2", 
            host: myConfig.tenantHostname,
            accessTokenStorage: "local",
            clientId: "XXXXXXXXXXXXXXXXXXX",
            clientSecret:  ""XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX,
            redirectUri: "https://localhost:3000/callback",
            userId: "AAAAAAAAAABBBBBBBBBBBCCC",
            scope: "user_default"
        },
        withoutData: false, }); 

Actually, this method also creates a conflict with the tenant login page (which is limited as well). Is it possible to use Java for backend and integrate frontend (html,js,jquery), only calling the session with Qlik in a secure manner? Or perhaps to use a custom Qlik embed tag?

My ideal scenario would be like this: