Configure connection mashup

adecora · ‎2024-10-23

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">
		<!-- Add host to this link if the mashup is on an external webserver -->	
		<link rel="stylesheet" href="../../resources/autogenerated/qlik-styles.css">
	</head>
	<body class="body" role="document">
       
        <!-- Content -->

		<!-- Load scripts -->	
		<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?

General Question