UI Application Context Menu

After an application has been loaded on a display client it is possible to access its context menu. This is done by right clicking on its window outline from the client UI interface.

Default entries

By default, once an application has loaded on a display client its context menu will contain at minimum the following entries:

• Send to Back - Pushes the application behind all other open applications
• Maximize - Enlarges the window to the maximum height or width of the display. Whichever is smaller.
• Share with - If your wall has remote sites, this will be filled with site that have Green status.
• Close APPLICATION_TITLE - Closes the application
• Close Menu - Closes the window.

How to add entries

An application can specify entries that will be placed above the previously listed entries. In the main application file specified by instructions.json, add another property called getContextEntries. In the file it would look like:

... // End of previous property or function.
},

getContextEntries: function() {
    var entries = [];

    var entry   = {
        description: "What is displayed in the context menu", // A string
        callback: "existingFunction", // Name of an existing function within this application. Must be in a string.
        parameters: {}, // An object that will be passed to the callback function
        accelerator: "A", // OPTIONAL: string that will be displayed to the far right of the entry
        entryColor: "lightBlue", // OPTIONAL: string that will alter the entry color. Can be any of the valid color names recognized by browser or a valid hex string.
        inputField: true, // OPTIONAL: Set to true to allow text input
        inputFieldSize: 10, // OPTIONAL: Integer to specify input field size
        value: "default input", // OPTIONAL: The input area will be filled with this if specified

    };
    entries.push(entry);

    entry = { description: "separator" }; // This creates a line entry used for visual separation
    entries.push(entry);

    return entries;
},

... // Next property of application object

The function name must match exactly. No parameters are given to the function. An array is must be returned from this function containing all entries. Each entry follows the above format and must match capitalization. The description, callback, and parameters properties are necessary.

Callback

The standard usage is that the name of an existing function should be specified as a string. That function will be called when the user selects that entry. If the function does not exist, the display will throw an error, but will not crash the display client.

There are also special strings keywords that can be used:

• SAGE2_download - Will attempt to download the file with path specified by the parameters object's url property
• SAGE2_copyURL - Will copy to system clipboard the value specified by the parameters object's url property

The following are reserved:

• SAGE2DeleteElement - Closes the application
• SAGE2SendToBack - Pushes application behind all other applications
• SAGE2Maximize - Maximizes the application window
• SAGE2_shareWithSite - Used to share application with remote site
• SAGE2_editQuickNote - Opens the quick note editor in the UI

Accelerator

The accelerator field does not have any effect on the entry or how it works. The string value is justified right on the entry. This is commonly used by developers to display shortcuts. For example, the pdf application uses the accelerator to show that the entries to control going to the previous and next page have the shortcut of left arrow (\u2190) and right arrow (\u2192). The following are quick references for arrows:

• \u2190
• \u2192
• \u2191
• \u2193

Entry color

This is used to alter the color of the entry. The default is "#FFF8E1" an off-white color. It must be a string, For more information see the information page at MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/color_value

Input Field

The field inputField is optional. Entries will act as a button without the inputField property. By including the inputField property and specifying true:

• Users can type into the entry
• Even though the inputFieldSize may be specified, users can still type beyond the stated value
• • Sizing is mainly for visual control
• • The default is 5 if not specified.
• After a user types into the input field, pressing Enter will send the response to the application
• • Included by default is also an OK button which will also submit into the input field.

If the value property is specified, the input field will be filled with the value.

Separator entry

A special entry is the separator entry specified like the following

entry = { description: "separator" }; // This creates a line entry used for visual separation
entries.push(entry);