Create a widget with command

The gbc create-widget command generates the base structure for a widget by creating the necessary JavaScript, template, and SCSS files in the js and sass directories of your customization directory.

Important:

Use the simplest method possible for customization. If you can complete a customization requirement by setting a theme variable or by extending a widget, then set the theme variable! Extending a widget should be a last resort.

For details about the gbc create-widget command, go to gbc tool page.

For more specific information on extending and overriding widgets in the GBC, refer to the section provided in the following link Overriding and extending widgets

Steps to create a widget with command

  1. Identify if there is a built-in widget you can extend.
    Tip: Identifying widgets

    If unsure which widget to modify, use browser developer inspection tools (press F12) to find the CSS class ending with "...Widget" and identify the widget. For more information, refer to the JavaScript source files in the directory gbc-project-dir/src/js/base/widget/widgets and its subdirectories, where you can read the class documentation and comments for each widget implementation.

  2. Run the gbc create-widget command to extend or override a custom base widget.
    For example, to extend EditWidget, use the --base option:
    gbc create-widget customization/myCusto MyEditWidget --base EditWidget
    This command automatically creates the myCusto directory and generates all the essential files to get started. The following message is written to standard output:
    00:00:03:128 - === Create Widget Command ===
00:00:03:132 - File created at customization\myCusto\js\MyEditWidget.tpl.html
00:00:03:134 - File created at customization\myCusto\js\MyEditWidget.js
00:00:03:137 - File created at customization\myCusto\sass\customization.scss
00:00:03:137 - Widget MyEditWidget created successfully in customization/myCusto

    The command generates the following essential files:

    • JavaScript file: MyEditWidget.js
    • Template file: MyEditWidget.tpl.html
    • SCSS file: MyEditWidget.scss, which is referenced by an import statement in the customization.scss file.
  3. Make any necessary changes to the code in the js, tpl.html, and scss files to define the widget's behavior, appearance, and functionality.
  4. Save your changes and rebuild your customization using gbc build: 
    $ gbc build --customization customization-project-dir
  5. Test that your changes work as expected.
What to do next:

Once you have created your widget, you are ready to begin customizing it. For examples of how you might use widgets, go to Widget examples.