2.2. Create Default Parameters for Component

To create the default parameters for our custom button we need to create a new file in /EZEXTEND_ROOT/ui/src/Components/Widgets/Defaults named CustomButton.js.

In this file, we need to create a single exported variable, a JSON object that contains information describing the default state of the component when it is initially dragged onto the dashboard:

export const CustomButtonData = {
   size: {
      width: 200,
      height: 40
   },

   data: {
      label: 'Action'
   }
}

Here we have defined the initial size of the element and the string text to be displayed on the button when it is first created. Now, we can navigate to the file /EZEXTEND_ROOT/ui/src/Components/Widgets/Defaults/index.js to import and apply the default data we have just created. First we will import the JSON object we just created:

...
import { ChartData } from './Chart';
import { ButtonData } from './Button';
import { CustomButtonData } from './CustomButton';
import { MarkdownData } from './Markdown';
...

Currently as you can see, all of the custom data is spread across multiple files. This index file will serve as a one-stop-shop to access all of these default data objects. To achieve this, all of the defaults that are imported are promptly exported from index.js so that they can be called elsewhere by importing this index file. We will include our imported custom button data as an available export:

Attention

More info needs to be added here as why this is necessary given that this list of exports is not used elsewhere in the code.

export {
  ChartData,
  ButtonData,
  CustomButtonData,
  MarkdwonData,
  ...
};

Lastly, we need to add some logic to the default function WidgetDefaultsProvider(type) so that when it is called with the argument WidgetsMapping.INPUTS.CUSTOM_BUTTON it returns the appropriate data:

export default function WidgetDefaultsProvider(type) {
   switch (type) {
      case WidgetsMapping.CHARTS.COMBO:
         return ChartData;
      case WidgetsMapping.INPUTS.BUTTON:
         return ButtonData;
      case WidgetsMapping.INPUTS.CUSTOM_BUTTON:
         return CustomButtonData;
      case WidgetsMapping.INPUTS.RADIO:
         return RadioData;
      ...
   }
}