Giter Club home page Giter Club logo

azure-devops-extension-sdk's Introduction

Azure DevOps Web Extension SDK

Release Notes

New major version, v4.*.* provides multiple module support to the SDK.

Details

  • ES Module Support: SDK now supports ES (ECMAScript) modules in addition to the existing AMD (Asynchronous Module Definition) modules. You can now import SDK using the ES module syntax, which provides performance improvements and reduces the application size.

  • Backward Compatibility for AMD Modules: Existing support for AMD modules remains intact. If your project is using AMD modules, you can continue to use them as before without any changes.

How to Use

If you're using AMD modules, you can continue to import SDK using the require function:

require(['azure-devops-extension-sdk'], function(SDK) {
  // Use the module here
});

For ES modules, you can import our modules using the import statement:

import * as SDK from 'azure-devops-extension-sdk';
// Use the module here

Get started with a new extension

See the Develop a web extension for Azure DevOps documentation for instructions on getting started with a new extension. You can also refer to the azure-devops-extension-sample repository as a working reference.

Overview

Client SDK for developing Azure DevOps extensions.

The client SDK enables web extensions to communicate to the host frame. It can be used to:

  • Notify the host that the extension is loaded or has errors
  • Get basic contextual information about the current page (current user, host and extension information)
  • Get theme information
  • Obtain an authorization token to use in REST calls back to Azure DevOps
  • Get remote services offered by the host frame

A full API reference of can be found here.

Get started with a new extension

See the Develop a web extension for Azure DevOps documentation for instructions on getting started with a new extension. You can also refer to the azure-devops-extension-sample repository as a working reference.

Import the SDK within your extension project

  1. Add azure-devops-extension-sdk to the list of dependencies in your package.json
  2. Add import * as SDK from "azure-devops-extension-sdk" to your TypeScript code

Initialize the SDK

When you have rendered your extension content, call SDK.init(). Your extension content will not be displayed until you have notified the host frame that you are ready. There are two options for doing this:

  1. Call SDK.init() with no loaded option
  2. Call SDK.init({ loaded: false }) to start initializing the SDK. Then call SDK.notifyLoadSucceeded() once you have finished your initial rendering. This allows you to make other SDK calls while your content is still loading (and hidden behind a spinner).

Example:

import * as SDK from "azure-devops-extension-sdk";

SDK.init();

API

A full API reference of can be found here.

Code of Conduct

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact [email protected] with any additional questions or comments.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.