Creating Sandbox Attributes Support.

Overview

This sample demonstrates how to support sandbox in your application.

Creating the application structure

Creating the application definition file

First we should create an application definition file. This file must be named appdef.xml. The application will use version 5 of the client schema (as we are only targeting newer M-Files versions). The application level sandbox attribute will declare in Shell UI module and dashboards.

Supported Attributes

• "allow-downloads" // Allow downloading files
• "allow-popups" // Allow the use of popups
• "allow-modals" // Allow the use of modal dialogs
• "allow-forms" // Allow the use of forms
• "allow-popups-to-escape-sandbox" // Allow popups to escape the sandbox

appdef.xml

XML

<?xml version="1.0"?>
<application xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="http://www.m-files.com/schemas/appdef-client-v5.xsd">
    <guid>94A65B60-1BEC-4B85-A510-6C64A713A717</guid>
    <name>Search Examples</name>
    <version>0.1</version>
    <description>A demonstration application for searches.</description>
    <publisher>M-Files Corporation</publisher>
    <enabled-by-default>true</enabled-by-default>
    <modules>
        <module environment="shellui" sandbox-attributes="allow-popups">
        <file>main.js</file>
        </module>
    </modules>
    <dashboards>
        <dashboard id="TimeZone" sandbox-attributes="allow-popups">
            <content>index.html</content>
        </dashboard>
  </dashboards>
</application>

Ensure that your application has a unique GUID by using a GUID generator.

Supporting for dashboard.

"This example demonstrates how to open a new browser tab with JavaScript when a button is clicked."

index.html

HTML

<!DOCTYPE html>
<html>
<head>
  <title>Window Open Example</title>
  <script src="index.js" defer></script>
</head>
<body>
  <h2>Open Documentation Example</h2>

  <button id="openBtn">Open MDN Docs</button>
</body>
</html>

index.js

js

/**
 * Opens a new tab with the given documentation URL.
 */
function openDoc() {
  window.open(
    'https://developer.mozilla.org/en-US/docs/Web/API/Window/open'
  );
}

// Attach click event to the button
document.getElementById('openBtn').addEventListener('click', openDoc);

Supporting for Module.

"This example demonstrates how to open a new browser tab on New ShellUI"

main.js

js

function OnNewShellUI( shellUI ) {

    // Custom command.
    const customCommands = {};

    /**
     * Register event handler for the shellUI started event.
     *
     * @param Event_Started - Enum for the event.
     * @param {Function} callback - Callback function.
     */
    shellUI.Events.Register( MFiles.Event.Started,
        () => {

            /**
             * Register event handler for the new normal shell frame created event.
             *
             * @param Event_NewShellFrame - Enum for the event.
             * @param {Function} callback - Callback function. Register the hanlder for shellFrame start event & New ShellListing.
             */
            shellUI.Events.Register( MFiles.Event.NewShellFrame,
                ( shellFrame ) => {

                    /**
                     * Register event handler for the shellFrame started event.
                     *
                     * @param Event_Started - Enum for the event.
                     * @param {Function} callback - Callback function.
                     */
                    shellFrame.Events.Register( MFiles.Event.Started,
                        async() => {

                            // Create custom command.
                            customCommands.TestCommand1 = await shellFrame.Commands.CreateCustomCommand( 'TestButton' );

                            // Add Commands to group.
                            shellFrame.Commands.AddCustomCommandToMenu( customCommands.TestCommand1,
                                26, // MenuLocation_ContextMenu_ObjectOperations
                                0 );

                            shellFrame.Commands.Events.Register( MFiles.Event.CustomCommand,
                                ( commandID ) => {

                                    // Test if the command id matches the TestCommand 1
                                    if( commandID === customCommands.TestCommand1 ) {

                                        // Construct alert message object.
                                        const alertMessage = {
                                            message: `TestButton is clicked! CommandID is: ${commandID} and customCommands.TestCommand1 is: ${customCommands.TestCommand1}`,
                                            icon: 'warning'
                                        };
                                        shellFrame.ShowMessage( alertMessage );

                                        // Open New window to navigate with link.
                                        window.open('https://developer.mozilla.org/en-US/docs/Web/API/Window/open');

                                    } else {
                                        const errorMessage = {
                                            message: `TestButton error! CommandID does not match clicked message! ID: ${commandID} and customCommands.TestCommand1 is: ${customCommands.TestCommand1}`,
                                            icon: 'warning'
                                        };
                                        shellFrame.ShowMessage( errorMessage );

                                        // Open New window to navigate with link.
                                        window.open('https://developer.mozilla.org/en-US/docs/Web/API/Window/open');

                                    }
                                } );
                        } );
                } );
        } );
}