Create a widget manually

You create a widget by copying the original JavaScript, template, and SCSS files associated with the widget you want to customize and editing the copied files.

Steps to create a widget manually

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

   Widgets that are currently in use can be found in the AUI tree. If you are not sure which widget to modify, use browser developer tools (press the F12 key) to identify the widget.

2. Create the JavaScript (.js) file and add the code to implement the widget. For information about the contents of this file, see Widget JavaScript file.
3. Create the template (.tpl.html) file to contain the HTML code structure of the widget. For information about the contents of this file, see Widget template file.

   By default, the JavaScript and template files share the same name.

   Tip:

   Follow the naming convention MyxxxWidget, where xxx is the parent widget name.

   For example, if extending the EditWidget, call the files MyEditWidget.js and MyEditWidget.tpl.html.

4. Save both files in the customization-project-dir/js directory.
5. If your template file uses a different name to the JavaScript file, or if you want to reuse an existing template file, specify the template file in the JavaScript file with __templateName. For example:

   __name: xxx,
   __templateName: "yyy"

6. If your widget requires a library, add the library to the customization-project-dir/resources/lib/ directory and add a reference in the config.json file:

   {
     "compile": {
       "libraries": {
         "library-name.js": "customization-project-dir/resources/lib/library-name.js"
       }
     }
   }

7. Add any necessary styles. You can either:
   • Edit the style directly in the gbc-project-dir/customization/customization-project-dir/sass/customization.scss file.
   • Create a new style sheet (see Widget scss file), and add a reference to that style sheet in the customization.scss file.

     For example, if you create a file called MyEditWidget.scss, add the following in the customization.scss file:

     @import "MyEditWidget";

8. Save your changes and rebuild your customization using gbc build:

   $ gbc build --customization customization-project-dir

9. Test that your changes work as expected.