Configure connection mashup

adecora — Wed, 23 Oct 2024 11:08:54 GMT

Hello, actually I made the connections on my mashup through require.js here is an example o my actual configuration simplified.

index.html

<!doctype html> <html qva-bootstrap="false"> <head> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Mashup</title> <meta charset="utf-8"> <meta name="HandheldFriendly" content="True"> <meta name="MobileOptimized" content="320"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-status-bar-style" content="black"> <meta http-equiv="cleartype" content="on">  <link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css"> </head> <body class="body" role="document">   <script src="../../resources/assets/external/requirejs/require.js"></script> <script src="index.js"></script> </body> </html>

index.js

'use strict'; const configuracion = { config: { host: window.location.hostname, prefix: window.location.pathname.substr(0, window.location.pathname.toLowerCase().lastIndexOf('/extensions') + 1), port: window.location.port, isSecure: window.location.protocol === "https:" }, appId: 'xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx', }; require.config({ baseUrl: (configuracion.config.isSecure ? 'https://' : 'http://') + configuracion.config.host + (configuracion.config.port ? ':' + configuracion.config.port : '') + configuracion.config.prefix + 'resources', paths: { 'angular.controller': '/extensions/app/src/controllers/controller', 'angular-route-segment': '/extensions/canales/vendor/angular-route-segment.min' } }); define('angularJS.config', ['angular-route-segment'], () => { // We start with angular JS definition angular.module('angularApp', ['ngRoute', 'route-segment', 'view-segment']); // Defining the paths angular.module('angularApp').config(['$routeSegmentProvider', '$routeProvider', '$locationProvider', function($routeSegmentProvider, $routeProvider, $locationProvider) { $locationProvider.hashPrefix(''); // Path content... }]); }); define('angularApp', ['angularJS.config'], () => { require([ 'angular.controller', ], () => { require(['js/qlik'], function (qlik) { // Configuration variables const { config, appId } = configuracion; // Application bootstrap must be before use Qlik Sense API // qva-bootstrap="false" must be set on the html angular.bootstrap(document, ['angularApp', 'qlik-angular']); qlik.setOnError(function (error) { console.error(`Error: ${error.message}.`); }); }); } ) } ) require(['angularApp'], () => console.log('Qlik API connected to our app'))

I want to update my configuration to avoid require.js and use the modern approach with web integration ID (mention on https://qlik.dev/embed/nebula/quickstart/build-a-simple-mashup/)

const app = await connect({ url: "https://your-tenant.us.qlikcloud.com", webIntegrationId: "8Ys9sBVyq6i2lxtclPWaaZhQr7OgwKaT", appId: "7fc4d85c-0e07-4160-90a9-c2ca4a45fd81", });

I have not access to all settings on the qmc, server are hosted by an external company, where they have to set up options to have available the web integration ID?

topic Configure connection mashup in App Development

Configure connection mashup