Is it possible to run an HTML file that is in Mash up outside of Mash up?

65 Views Asked by At

I have this html code that I put in the Qlik sense hub:

<!DOCTYPE html>
<html lang="en"> 
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Qlik Sense Mashup</title>
    <meta charset="utf-8">
    <script src="https://pa-qliksense.aviv.gov.il/sense/app/8a9ba0aa-386b-423d-a0a5-a2305e1e7896"></script>
    <meta http-equiv="content-type" content="text/html; 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">
    <script src="../../resources/assets/external/requirejs/require.js"></script>
    
</head>

<body style="overflow: auto"> 
    <div id="CurrentSelections" class="qvobjects" style="position:relative; top:0; left:0; width:100%; height:38px;"></div>
    <!-- Qlik Sense object placeholder --> 
    <div id="4ae44ca4-baee-4031-9d93-3b9895052f24"></div>

    <!-- Automatically trigger export on page load -->
    <script>
        var prefix = window.location.pathname.substr(0, window.location.pathname.toLowerCase().lastIndexOf("/extensions") + 1);
        var config = {
            host: window.location.hostname,
            prefix: prefix,
            port: window.location.port,
            isSecure: window.location.protocol === "https:"
        };

        require.config({ 
            baseUrl: (config.isSecure ? "https://" : "http://") + config.host + (config.port ? ":" + config.port : "") + config.prefix + "resources"
        });

        require(["js/qlik"], function (qlik) {
            qlik.setOnError(function (error) { 
                console.error('Error:', error);
                alert('Error: ' + error.message);
            });

            // Open app
            var app = qlik.openApp('8a9ba0aa-386b-423d-a0a5-a2305e1e7896', config);

            // Get table object
            app.getObject('4ae44ca4-baee-4031-9d93-3b9895052f24').then(function (model) {
                // Create a table object 
                var table = qlik.table(model);

                // Export data from the table
                table.exportData({ download: true, format: 'OOXML' }).then(exportData => {
                    var blob = new Blob([exportData], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
                    var url = URL.createObjectURL(blob);
                    
                    // Create a link element
                    var a = document.createElement('a');
                    a.href = url;
                    a.download = 'exported_data.xlsx'; // Set desired file name

                    // Trigger a click event on the link to initiate download
                    a.click();
                    
                    // Release the object URL
                    URL.revokeObjectURL(url);
                }).catch(error => {
                    console.error('Error exporting table data:', error);
                    alert('Error exporting table data. See console for details.');
                });
            }).catch(error => {
                console.error('Error getting table object:', error);
                alert('Error getting table object. See console for details.');
            });
        });
    </script>
</body>
</html>

The code exports me an object in Excel format by entering an object ID and an application, I want to export the Excel file not directly from the mash up but in an external way so that I click on a file and an object in Excel format will be exported. Is there such a possibility? I would appreciate ideas

1

There are 1 best solutions below

2
SmoothBrane On

If I'm understanding correctly, you want to be able to dynamically export data from a Qlik object using this mashup rather than hard-coding the app and object IDs into the mashup itself.

There are probably several ways of achieving this but probably the easiest to implement would be to simply use URL parameters. Let's assume you just need for the end user to provide the app ID and object ID -- here's some JavaScript code you can add to your mashup:

// Get the URL search parameters for the mashup page
const params_raw = window.location.search;
const params = new URLSearchParams(params_raw);

// Get the Qlik App ID parameter, `qlikAppID`, and
// throw an error if it was not provided
const qAppID = params.get("qlikAppID");
if (!qAppID) {
    const err = "No Qlik app ID provided!";
    alert(err);
    throw err;
};

// Get the Qlik Object ID parameter, `qlikObjectID`, and
// throw an error if it was not provided
const qObjID = params.get("qlikObjectID");
if (!qObjID) {
    const err = "No Qlik object ID provided!";
    alert(err);
    throw err;
};

// Open app
var app = qlik.openApp(qAppID, config);

// Get table object
app.getObject(qObjID).then(function (model) { ... });

So then in your mashup URL, you'll just add those two parameters like so:

https://qlik-server/extensions/my-mashup?qlikAppID=8a9ba0aa-386b-423d-a0a5-a2305e1e7896&qlikObjectID=4ae44ca4-baee-4031-9d93-3b9895052f24

If for whatever reason you need a more Qlik-centric solution, you could consider using variables from the app itself, accessed with the Variable API.