Development process

This section provides information about the process to be followed for widget development, including the prerequisites and process of widget development. Additionally, it contains links to additional information that users can use to develop their custom widgets.

Prerequisites to widget development

Before developing custom widgets, it's important to have some understanding of the following:

• AngularJS: https://docs.angularjs.org/guide
• HTML: https://html.spec.whatwg.org/
• CSS: https://www.tutorialspoint.com/css
• JavaScript: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide

Basic knowledge of Bootstrap: https://getbootstrap.com/ is also beneficial.

Process of widget development

Widgets can be created using the 'Widget Building Wizard' in Content Hub, as detailed in the "User Guide" in the FortiSOAR Product Documentation. Values entered during initial configuration are used to generate the info.json and other default files such as:

• view.html
• edit.html
• view.controller.js
• edit.controller.js
• widgetUtility.service.js (from release 7.5.0 onwards)
• locales folder, containing files for various locales (languages), such as en.json, ko.json, etc. (from release 7.5.0 onwards)

The directory structure of a widget is as follows:

widgetname folder
--+ info.json
--+ view.html
--+ edit.html
--+ viewController.js
--+ editController.js
--+ images
---+ imagefiles
--+ WidgetAssets
---+ css
----+ <widgetName>.css
---+ html
----+ <sampleTemplate>.html
---+ js
----+ widgetUtility.service.js
----+ <sample>.directive.js
----+ <sample>.service.js
----+ widgetUtility.service.js
---+ locales
----+ en.json
----+ ja.json
----+ ko.json
----+ zh_cn.json

For more information on the widget's directory structure, see the Widget Library chapter in the "User Guide."

Additionally, the following copyright should be included in the widget's html, css, and js files:

MIT License 
Copyright (c) <copyright year> Fortinet Inc  

For example,

MIT License 
Copyright (c) 2024 Fortinet Inc 

The info.json file includes the following fields:

• name: Name used to access the widget.
• title: Title displayed for the widget.
• subtitle: Short description for the widget.
• version: Version of the widget in the x.y.z format.
• published_date: Current timestamp using https://www.unixtimestamp.com/?unixTimestampInput=%7B%7B%7Bs%7D%7D%7D
• metadata:
  • certified: Whether the widget is certified by FortiSOAR.
  • publisher: Organization name to be added as the publisher of the widget.
  • compatibility: Comma-separated list of FortiSOAR versions with which the widget is compatible.
  • pages
  • snapshots: Path of the screenshots that are part of the widget.
  • help_online: Contains the link to the widget documentation in the HTML format.
  • description: Information about the widget, including its feature list.

An example of the info.json of the 'User Tile Widget':

An example of the info.json of the 'User Tile Widget':

{ 
  "name": "userAssignments",
  "title": "User Tile", 
  "subTitle": "Shows required information related to the user.", 
  "version": "2.1.1", 
  "published_date": "1694006825", 
  "metadata": { 
    "certified": "Yes", 
    "publisher": "Fortinet", 
    "compatibility": ["7.0.2", "7.2.0"], 
    "pages": ["Dashboard", "Reports", "View Panel", "Listing", "Add Form"], 
    "snapshots": [ 
      "https://repo.fortisoar.fortinet.com/fsr-widgets/userAssignments-2.1.1/images/user-assignments-settings.png",

      "https://repo.fortisoar.fortinet.com/fsr-widgets/userAssignments-2.1.1/images/user-assignments-view.png" 
    ], 
    "help_online": "https://github.com/fortinet-fortisoar/widget-user-assignments/blob/release/2.1.1/docs/README.md", 
    "description": " > User Asssignments Feature List\n\n* Allows ability to select multiple modules and apply filters to build context around the user.\n* Shows User Avatar \n* Has support to filter records in Settings \nExample: User Avatar along with data such as Assigned alerts and incidents." 
  } 
}

After creating the basic structure of a widget, you can use various available widget dependencies, such as Services, Directives, and Filters, to edit the widget to meet your specific requirements.

Additionally, see Angular JS events and the FortiSOAR Web Socket service topic to get information about services for event-based communication between controllers and FortiSOAR Web Socket, and the Appendix B: Frequently asked questions (FAQs) section to get answers to common questions.

For a step-by-step guide to developing widgets, including steps on how to localize widgets, etc. see the Appendix A: Tutorials chapter.

Once you have created your widget, you can submit the same using the process listed in https://github.com/fortinet-fortisoar/how-tos.