Installation

Basic Setup

Set up Dealogic UI Toolkit by linking to CSS and JavaScript files from your pages. Both styles and scripts are hosted on our CDN.

UI Toolkit versions follow semantic versioning. We are aiming not to release a new major version for as long as possible. Specific versions will be available under fixed paths:

// Patch version, e.g. 6.5.0

<head>
	...
	<link rel="stylesheet" href="https://connect-cdn.dealogic.com/uitoolkit/6-5-0/styles/light.css">
	...
	<script type="module" src="https://connect-cdn.dealogic.com/uitoolkit/6-5-0/scripts/dealogicui/dealogicui.esm.js"></script>
	...
</head>

Development Setup

For your development setup, it is best to use npm packages, which include TypeScript definitions for all components. Follow the steps below:

Step 1: Connect to Feed

Go to VSTS "Dealogic" feed and “Connect to feed”.

In the pop-up, select "npm" and follow the installation instructions to:

add the feed to your project
install and run the auth helper OR add credentials to your user .npmrc manually

Step 2: Register @dealogic

Add these lines to “.npmrc” file in the root directory of your project, to register “@dealogic” in your project.

@dealogic:registry=https://dealogic.pkgs.visualstudio.com/_packaging/Dealogic/npm/registry/
@dealogic:always-auth=true

Step 3: Install Stylesheet

Install “@dealogic/dealogic-styles” package

npm install @dealogic/dealogic-styles
OR
yarn add @dealogic/dealogic-styles

The package will be installed to node_modules/@dealogic/dealogic-styles/ directory from your project root. Inside "dist" subdirectory will include light.css and dark.css files.

Add the stylesheet to your page

<link rel="stylesheet" href="[path to]/light.css">

Add “dealogic” class on your <body> tag to apply Dealogic styles.

<body class="dealogic">

Notes:

If you're using a bundler like Webpack, please make sure you configure a loader for CSS and for WOFF/WOFF2 files
If you use webpack but don't want to include the stylesheets & fonts in your bundle, consider using the copy-webpack-plugin.

Step 4: Set Up Components

Install “@dealogic/dealogic-components” package

npm install @dealogic/dealogic-components
OR
yarn add @dealogic/dealogic-components

Add the script with components interactions to your page.

<script type="module" src="dist/dealogicui/dealogicui.esm.js"></script>

Notes:

Do NOT include the JS using import handled by Babel / Webpack / Rollup because it will not work!
This package also includes TypeScript definitions for all components. Please check the dist/types folder.

'ready' event

Every custom UI component (a component with a dl- prefixed tag) emits a 'ready' event after initialization. Listen for this event to make sure the methods on the components are ready to be called.
Because nested components will trigger this event as well, please filter the emitted events on their target. Example:

element.addEventListener('ready', function(event) {
    if (event.target != element) {
        return
    }

    // use element methods etc
})

Alternatively you can use the whenDefined promise (on the customElementRegistry interface) that resolves when the component is defined.

customElements.whenDefined('dl-autocomplete').then(function() {
    // use dl-autocomplete methods etc
})

React Wrapper

If you are using React, you may experience some difficulties with UI Toolkit's web components - e.g. related to handling data or events. There is React wrapper for Dealogic UI Toolkit, to seamlessly solve these problems for you.

Next: Try out live example

Add "Hello World!" Button

Dealogic Styleguide

section menu