Displaying Custom Windows

Summary

AdapTable allows developers to provide custom windows
These are custom, movable, resizable with bespoke content

AdapTable allows developers to create and display bespoke Windows.

These windows display bespoke content supplied by the developer.

Hint

Custom Windows are fully movable and resizable
If a user moves or resizes a window, it re-opens with those dimensions and position

Open and close Custom Windows via User Interface API:

openCustomWindowPopup — displays a Custom Window using the supplied CustomWindowConfig
closeCustomWindowPopup — closes the open window with the given id

Deep Dive

The Custom Window object

The CustomWindowConfig object is defined as follows:

Property	Type	Description
frameworkComponent	`AdaptableFrameworkComponent`	React, Angular or Vue Framework component to use for Custom Window content
icon	`AdaptableSystemIconName`	Icon to display in Custom Window header
id	`string`	Unique identifier for Custom Window
onFrameworkComponentDestroyed	`() => void`	Callback function invoked when framework component is destroyed
position	`WindowPosition`	Position of window in pixels (provided as x, y)
render	`(customRenderContext:CustomRenderContext) => string \| null`	Render function to display content in Custom Window (if not using a framework component)
size	`WindowSize`	Size of window in pixels (provided as width, height)
title	`string`	Title of Custom Window

As can be seen content is provided in one of 2 ways:

in Framework versions of AdapTable, by using the frameworkComponent property
in the vanilla (i.e. non-Framework) AdapTable version, by using the render property

Developer Guide

Providing a Custom Window

const config: CustomWindowConfig = {
  id: 'demo_window',
  title: 'Demo Window',
  icon: 'laptop',
  position: {x: 100, y: 100},
  size: {width: 400, height: 300},
  render: context => {
    if (context.phase === 'onMount') {
      return '<div style="padding:10px"><p>Custom window content</p></div>';
    }
    return null;
  },
};

Create Custom Window Config

Build a CustomWindowConfig:

id — required unique identifier; pass the same value to closeCustomWindowPopup
title — label shown in the window header
icon — optional AdaptableSystemIconName for the header (e.g. 'laptop', 'search')
position — optional initial placement in pixels (x, y) — WindowPosition
size — optional initial dimensions (width, height) — WindowSize
render — function returning HTML; receives CustomRenderContext (phase, element, adaptableApi). Return markup on 'onMount'; return null on 'onDestroy'.

Users can move and resize the window at run time; AdapTable restores the last position and size when the window opens again.

onClick: (button, context) => {
  context.adaptableApi.userInterfaceApi.openCustomWindowPopup(config);
},

Open from application code (e.g. a Dashboard or Toolbar Button)

Call openCustomWindowPopup wherever you have adaptableApi — commonly in a Custom Toolbar Button or Custom Dashboard Button onClick handler.

setTimeout(() => {
  context.adaptableApi.userInterfaceApi.closeCustomWindowPopup('demo_window');
}, 10000);

Optionally close the window programmatically

A close button is always shown in the header (not configurable). To close from code, call closeCustomWindowPopup with the config id (for example after a timeout).

Creating a Custom Window

Fork Fork

This example contains a Custom Dashboard Button - Show Custom Window - which opens a Custom Window popup that displays the rendered content that was provided
The Custom Window is given an initial Size and Position but is also fully movable and resizable by the run-time user
The Custom Window contains a Close button for manual close, but is also set programmatically to close after 10 seconds (via closeCustomWindowPopup)

Try It Out

Click Show Custom Window — the window opens at the configured position and size; move and resize it as needed
Wait 10 seconds — the window closes automatically via closeCustomWindowPopup
Open it again — it restores the position and size you last set

import {
  CustomRenderContext,
  CustomWindowConfig,
} from '@adaptabletools/adaptable';
import {
  AdaptableButton,
  AdaptableOptions,
  CustomToolbarButtonContext,
} from '@adaptabletools/adaptable';
import {WebFramework} from './rowData';

export const adaptableOptions: AdaptableOptions<WebFramework> = {
  primaryKey: 'id',
  adaptableId: 'Custom Window Popup',
  dashboardOptions: {
    customToolbars: [
      {
        name: 'Buttons',
        title: 'Buttons',
        toolbarButtons: [
          {
            label: 'Show Custom Window',
            buttonStyle: {
              variant: 'text',
              tone: 'info',
            },
            onClick: (
              button: AdaptableButton<CustomToolbarButtonContext>,
              context: CustomToolbarButtonContext
            ) => {
              const config: CustomWindowConfig = {
                id: 'demo_window',
                title: 'Demo Window',
                icon: 'laptop',
                position: {
                  x: 100,
                  y: 100,
                },
                size: {
                  width: 400,
                  height: 300,
                },
                render: (customRenderContext: CustomRenderContext) => {
                  if (customRenderContext.phase === 'onMount') {
                    return '<div style="background-color:lightyellow; color:brown; padding:10px; margin:10px"><p>This is a custom, movable and resizable window displaying bespoke content</p><p>The window has a close button but we have also programmatically set it to close after 10 seconds</p></div>';
                  }
                  return null;
                },
              };
              context.adaptableApi.userInterfaceApi.openCustomWindowPopup(
                config
              );
              setTimeout(() => {
                context.adaptableApi.userInterfaceApi.closeCustomWindowPopup(
                  'demo_window'
                );
              }, 10000);
            },
          },
        ],
      },
    ],
  },

  initialState: {
    Dashboard: {
      Tabs: [
        {
          Name: 'Messages',
          Toolbars: ['Buttons'],
        },
      ],
    },
    Theme: {CurrentTheme: 'dark'},
    Layout: {
      CurrentLayout: 'Standard Layout',
      Layouts: [
        {
          TableColumns: [
            'name',
            'language',
            'github_stars',
            'license',
            'has_projects',
            'has_pages',
            'created_at',
            'has_wiki',
            'updated_at',
            'pushed_at',
            'github_watchers',
            'week_issue_change',
          ],
          Name: 'Standard Layout',
          AutoSizeColumns: true,
        },
      ],
    },
  },
};

Find Out More

It is also possible to display Progress Indicators when running a long task

PreviousTechnical Reference NextLoading Screen