Welcome to
Help Desk

Product Updates
Training
Support
Ideas Contact Support

Creating your own Custom Application in Egnyte

Overview

Create your own custom application in Egnyte so that your users can have custom actions and workflows. Use our UI Integration Framework which enables you to hook into the Egnyte Web UI to expose custom actions for your app. Currently, you can extend actions that can be performed on the selected item(s) in the "More" menu and the Context menu.

 

Your Custom App can appear in the More Menu:webui_redesign_folder_details_custom_app.png

 

Or in Egnyte's Context menu when you right click on a file:

webui_redesign_folder_context_menu_custom_app.png

 

How to get started

An Admin can add their own app by going to the bottom of the Apps & Integration page and adding a Custom App

webui_redesign_navigation_apps_integrations.png

Once clicking Create you will have the ability to update your own manifest .json file.

 

webui_redesign_apps_integrations_custom_app_upload_json.png

Here is a sample manifest file for testing

{
    "appId": "exampleuint",
    "name": "Example UI Integration",
    "company": {
        "name": "Partner Integrations team"
    },
    "support": {
        "web": "https://xkcd.com"
    },
    "categories": [],
    "userSettings":
        "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/settings.html",
    "appLogo":
        "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/tool.png",
    "type": "egnyte_ui",
    "industries": [],
    "description": "Example UI Integration for testing purposes.",
    "screenshots": {
        "images": [
            "https://imgs.xkcd.com/comics/antique_factory.png",
            "https://imgs.xkcd.com/comics/the_bdlpswdks_effect.png",
            "https://imgs.xkcd.com/comics/placebo_blocker.png"
        ]
    },
    "apiKey": "cabb83n7yqgy35qq8q44g65h",
    "integrations": {
        "myAllAction": {
            "entryPoint": "context_menu",
            "types": ["file", "folder"],
            "accessLevel": "selection",
            "serviceUrl":
                "https://integrations-staging.qa-egnyte.com/exampleuint/service",
            "selectionQuantity": "single",
            "invocationMethod": "post_to_tab",
            "icon":
                "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/tool.png",
            "text": "hello, I'm here",
            "scope": ["Egnyte.filesystem", "Egnyte.permission", "Egnyte.user", "Egnyte.launchwebsession"]
        },
        "myShareAction": {
            "entryPoint": "context_menu",
            "types": ["file", "folder"],
            "actionType": "share",
            "accessLevel": "selection",
            "serviceUrl":
                "https://integrations-staging.qa-egnyte.com/exampleuint/service",
            "selectionQuantity": "single",
            "invocationMethod": "post_to_tab",
            "icon":
                "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/tool.png",
            "text": "sharing is caring"
        },
        "myOpenAction": {
            "entryPoint": "context_menu",
            "types": ["file", "folder"],
            "actionType": "open",
            "accessLevel": "selection",
            "serviceUrl":
                "https://integrations-staging.qa-egnyte.com/exampleuint/service",
            "selectionQuantity": "single",
            "invocationMethod": "post_to_tab",
            "icon":
                "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/tool.png",
            "text": "choose me!"
        },
        "myEditAction": {
            "entryPoint": "context_menu",
            "allowedPaths": ["/Shared/*"],
            "types": ["file"],
            "accessLevel": "selection",
            "serviceUrl":
                "https://integrations-staging.qa-egnyte.com/exampleuint/service",
            "extensions": ["png", "jpg"],
            "permissionLevels": ["Owner", "full"],
            "selectionQuantity": "single",
            "invocationMethod": "post_to_tab",
            "icon":
                "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/tool.png",
            "text": "edit a single image (custom icon)"
        },
        "myEditActionFAIcon": {
            "entryPoint": "context_menu",
            "allowedPaths": ["/Shared/*"],
            "types": ["file"],
            "accessLevel": "selection",
            "serviceUrl":
                "https://integrations-staging.qa-egnyte.com/exampleuint/service",
            "extensions": ["png", "jpg"],
            "permissionLevels": ["Owner", "full"],
            "selectionQuantity": "single",
            "invocationMethod": "post_to_tab",
            "icon": "plus-circle",
            "text": "edit a single image (fontawesome icon)"
        },
        "myViewAction": {
            "entryPoint": "context_menu",
            "serviceUrl":
                "https://integrations-staging.qa-egnyte.com/exampleuint/service",
            "types": ["file", "folder"],
            "selectionQuantity": [2, 5],
            "invocationMethod": "post_to_tab",
            "text": "open multiple items",
            "icon":
                "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/tool.png",
            "tooltip": "hello, I'm a tooltip"
        },
        "myMoreAction": {
            "entryPoint": "more_menu",
            "serviceUrl":
                "https://integrations-staging.qa-egnyte.com/exampleuint/service",
            "types": ["folder"],
            "selectionQuantity": "single",
            "invocationMethod": "post_to_tab",
            "text": "perform a folder action from more menu",
            "icon":
                "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/tool.png",
            "tooltip": "hello, I'm a tooltip"
        },
        "myNewAction": {
            "entryPoint": "new_menu",
            "serviceUrl":
                "https://integrations-staging.qa-egnyte.com/exampleuint/service",
            "types": ["folder"],
            "invocationMethod": "post_to_tab",
            "text": "perform a folder action from new menu",
            "icon":
                "https://integrations-staging.qa-egnyte.com/exampleuint/staticapp/tool.png",
            "tooltip": "hello, I'm a tooltip"
        }
    }
}

Once the Custom Application is loaded it will show in the Apps & Integrations page with a Custom Banner.

Screen_Shot_2020-10-18_at_10.13.52_PM.png

Once created Admin can turn on the Custom Application for their users by clicking on Enable Integration

webui_redesign_apps_integrations_custom_app_details.png

 

Admin can also delete or re-upload a new manifest file if needed by clicking the Custom App Configuration Button inside of the Application

webui_redesign_apps_integrations_new_custom_app.png

 

How it works

Basic Concepts

App definition - a json file with metadata about the app necessary to register a Custom Application. 

Invocation - the process of calling a your app from Egnyte UI.

Invocation's access token - the token that's sent along with invocation is scoped to allow you to use FS API, Users API and Permissions API. You can request a different scope by setting it in the API definition, see App definition docs

Public API Key - This is a key that you can register to your domain from developers.egnyte.com

UI Integration Framework - This is the framework that allows Custom Applications to be shown in the Egnyte UI.

 

Detailed Documentation

  • UI Invocation flow
  • App definition docs
  • For app definition, you'll only have to write the content for the integrations field manually, everything else is separate fields in the App Definition Form.
  • User and domain Settings - settings are there in case you really need them, but we recommend building UI integrations in a way that doesn't need a settings screen, but asks for settings on first invocation.
  • API Keys can be found in developers.egnyte.com

Limitation

  • You are able to create up to 5 custom applications
Was this article helpful?
0 out of 0 found this helpful

For technical assistance, please contact us.