How to import a javascript library properly?

HCL Volt MX Volt MX Forum
,
1

From my previous approach as a simple html/js/css app, the following code shows the needed library:

<!DOCTYPE html>
<html>
<head>
    <script
  src="https://res.cdn.office.net/teams-js/2.0.0/js/MicrosoftTeams.min.js"
  integrity="sha384-QtTBFeFlfRDZBfwHJHYQp7MdLJ2C3sfAEB1Qpy+YblvjavBye+q87TELpTnvlXw4"
  crossorigin="anonymous"
></script>
    <meta http-equiv="cache-control" content="no-cache" />
  </head>
<body>
    <script>
        microsoftTeams.initialize();
        const testClick1 = function() {
            microsoftTeams.settings.setValidityState(true);
            microsoftTeams.settings.registerOnSaveHandler((saveEvent) => {
                microsoftTeams.settings.setSettings({
                    websiteUrl:           "https://<FoundryURL>/apps/test/",
                    contentUrl:           "https://<FoundryURL>/apps/test/",
                    entityId:             "test",
                    suggestedDisplayName: "Volt MX Test"
                });
                saveEvent.notifySuccess();
            });
        }
    </script>
	<b><font size="5" color="#006699" face="Arial">Volt MX Test-App für Microsoft Teams</font></b>
	<br>
	<font color="#808080" face="Arial">Bitte wählen Sie den Inhalt dieses Tabs aus:</font><br>
	<ul>
		<li type="square"><font color="#808080" face="Arial">Test-App</font><br>
			<div style="width:200px" onclick="testClick1()">auswählen</div>
		</li><br>
	</ul>    
</body>
</html>

How would I do the same in a form in Iris?

1) How to load the foreign library from Microsoft?

2) How to address the functions from the library in an on click event of a from button?

Would like to stay in the "low code" paradigm as much as we can, not the "vanilla JS" pattern, if possible.

2

It would be interesting to see why this code is considered to be wrong:

Community-Pasted-Attachment-1687084750854.png1678×795 123 KB

3

I learned that I can add html script tags to the header of the app in app settings

Community-Pasted-Attachment-1687115939784.png912×673 44.1 KB

4

Nevertheless, I would also like to learn how to work with libraries that exist as files in the localfiles folder of the web app. Please help me to find some references...

5

Hi @Bernd Gewehr,

thank you for this thread, you already helped one of our students to get started with external JavaScript libraries in Volt MX Iris.

Are you still using the HTML header section from the project settings to add the external JS libraries, or have you found a better way to do this?

I found a documentation for the browser widget [1][2], which is basically an iFrame and suggests to use the web/localfiles directory for html+js files. I assume this is not the best way to do this?

[1] Integrating Third-party Libraries in HCL Volt MX (hcltechsw.com)

[2] Browser Widget Basics - HCL Volt MX Documentation V9.2 (hcltechsw.com)