Skip to main content

Creating Sanbox 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 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

<!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

/**
 * 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
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_NewNormalShellFrame - Enum for the event.
             * @param {Function} callback - Callback function. Register the hanlder for shellFrame start event & New ShellListing.
             */
            shellUI.Events.Register( MFiles.Event.NewNormalShellFrame,
                ( 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");

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