Vue Custom Popups

Summary

Developers using AdapTable Vue can create 2 types of Popups:
- Custom Windows
- Progress Indicators
Both are provided by leveraging VueFrameworkComponent

Custom Window

Users of AdapTable Vue can provide Vue-specific instances of Custom Windows.

Vue Components as Custom Windows

Fork Fork

In this demo we create a Custom Window that runs Quick Search using a bespoke Vue Framework Component

Expand to see the code provided

We define a CustomQuickSearch Vue Component...

<script setup lang="ts">
import {ref, watch, defineProps} from 'vue';

const props = defineProps({
  adaptableApi: {
    type: Object,
    required: true,
  },
});

const searchTerm = ref('');

watch(searchTerm, newSearchTerm => {
  props.adaptableApi.quickSearchApi.runQuickSearch(newSearchTerm);
});

const onSearchChange = (event: any) => {
  const searchText = event.target?.value || '';
  searchTerm.value = searchText;
};

const clearSearch = () => {
  searchTerm.value = '';
};
</script>

<template>
  <div class="customQuickSearch">
    <text>Enter the text to Search on:</text>
    <input type="text" v-model="searchTerm" @input="onSearchChange" />
    <button type="button" @click="clearSearch">Clear</button>
  </div>
</template>

<style scoped>
.customQuickSearch {
  display: flex;
  align-items: center;
  gap: calc(var(--ab-base-space) * 2);
}
.customQuickSearch .ab-Input.ab-Input--type-text {
  border: var(--ab-cmp-input__border);
}

...and in Dashboard Options we provide a button which, when clicked, opens a Custom Window containing that Component:

dashboardOptions: {
  showQuickSearchInHeader: false,
  customDashboardButtons: [
    {
      label: 'Run Custom Quick Search',
      buttonStyle: {
        variant: 'outlined',
        tone: 'accent',
      },
      onClick: (
        button: AdaptableButton<DashboardButtonContext>,
        context: DashboardButtonContext
      ) => {
        context.adaptableApi.userInterfaceApi.openCustomWindowPopup({
          id: 'quick_search_window',
          title: 'Custom Quick Search',
          icon: 'search',
          frameworkComponent: ({adaptableApi}) => {
            return <CustomQuickSearch adaptableApi={adaptableApi} />;
          },
        });
      },
    },
  ],
},

Progress Indicator

Users of AdapTable Vue can provide Vue-specific instances of Progress Indicators.

Vue Components as Progress Indicators

Fork Fork

In this demo we create a Progress Indicator using Vue Framework Component
It displays for 5 seconds and is then hidden

Expand to see the code provided

We define a ProgressIndicator Vue Component...

<script lang="ts">
export default {
  name: 'ProgressIndicator',
};
</script>

<template>
  <div className="progressIndicator">
    <p>Fetching your data...</p>
    <p>Please be patient</p>
  </div>
</template>

...and in Dashboard Options we provide a button which, when clicked, opens a Custom Window containing that Component:

dashboardOptions: {
  customDashboardButtons: [
    {
      label: 'Show Custom Progress Indicator',
      buttonStyle: {
        variant: 'outlined',
        tone: 'accent',
      },
      onClick: (
        button: AdaptableButton<DashboardButtonContext>,
        context: DashboardButtonContext
      ) => {
        const config: ProgressIndicatorConfig = {
          frameworkComponent: () => h(ProgressIndicator),
        };
        context.adaptableApi.userInterfaceApi.showProgressIndicator(config);
        setTimeout(() => {
          context.adaptableApi.userInterfaceApi.hideProgressIndicator();
        }, 5000);
      },
    },
  ];
}

PreviousSettings Panel