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 will display the custom render content which was provided by the developer.

Find Out More

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

These can be displayed (and then hidden) at run-time using functions in the UserInterfaceApi.

Caution

This page describes how to provide custom windows when using vanilla / pure TypeScript AdapTable
For Framework-specific instructions, see Angular Custom Windows or React Custom Windows

These windows can be given an initial size and position and contain a Close button.

Hint

Custom Windows are also are fully movable and resizable
Windows that have been resized and / or moved, will display with those new properties when they re-open

The Custom Window is managed programatically via 2 companion functions in User Interface Api:

openCustomWindowPopup - displays the a Custom Window, with the supplied rendering
closeCustomWindowPopup - closes the open window (with a given Id)

Deep Dive

Configuring the Custom Window

The CustomWindowConfig object is defined as follows:

Property	Description
frameworkComponent	React, Angular or Vue Framework component to use for Custom Window content
icon	Icon to display in Custom Window header
id	Unique identifier for Custom Window
onFrameworkComponentDestroyed	Callback function invoked when framework component is destroyed
position	Position of window in pixels (provided as x, y)
render	Render function to display content in Custom Window (if not using a framework component)
size	Size of window in pixels (provided as width, height)
title	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

The position and size properties are of types WindowPosition and WindowSize and each has 2 properties:

position: {
  x: 100,
  y: 100,
},
size: {
  width: 400,
  height: 300,
},

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 programatically to close after 10 seconds (via closeCustomWindowPopup)

Try It Out

Click the Button to open the Custom Window and not that while it opens in the position and with the size provided, you can move and resize it as required
Wait 10 seconds and note that the Window automatically closes
Re-open the Window and note that it assumes the same position and size that you previously 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) => {
                  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 programatically set it to close after 10 seconds</p></div>';
                },
              };
              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,
        },
      ],
    },
  },
};

PreviousStyling Editable & ReadOnly Cells NextSupplying an Adaptable Style

Framework: