New Business Console Gadget Wizard
General Gadget Specification
In the New Business Console Gadget wizard, provide the project and gadget details as described in the table below:
Field / Control | Description |
Project | Specifies the web or portlet application project selected for gadget creation. |
Gadget Type | Specify one of the following type:  AngularJS if you want to use AngularJS framework for the new gadget . For example, the AngularJS framework will contain a template for invoking REST services. Default with empty stubs if you want to design the new gadget from scratch without using any pre-defined templates. |
Gadget Root Directory Name | (Optional) Specify a name for the folder in which the new gadget should be stored under project’s WebContent node. If you do not specify a folder name, the new gadget will be stored directly under project’s WebContent node. |
Gadget Name | Specify a name for the new gadget. The gadget name: Must have minimum 5 characters and maximum 50 characters. Should not have any special characters. Should be a single word. |
Gadget Title | Specify the title to be displayed on the gadget. |
Preview Image | Click Browse and select an icon in .png or .jpg format for the gadget. The image size should not be more than 50KB, and the preferred size of the image is 70 X 70. |
Settings Title | Specify a name for the gadget setting dialog. |
Description | Provide a description for the new gadget. |
Gadget ID | Specifies the auto-generated ID for the new gadget. This field is not editable. |
Gadget Group Name | Select one of the options for the gadget group name: Use project name if you want to use the project name as the gadget group name. Use custom name if you want to enter the name for the gadget group in the input field. The group name provided here will be used to categorize gadgets in the Add New Gadget dialog in Business Console. |
Finish | Click if you selected Default with empty stubs as the gadget type. A new gadget will be created under the project selected for the gadget. |
Next | |
AngularJS Gadget Specification
The table below describes what you can specify when you create a new AngularJS gadget.
Element | Description |
Hosts | For each remote server that you want to configure with the gadget , specify the following host details: Name Type the alias name of the server. Host name Type the host name of the server. Port Type the port used by the server. Server type Select one of the server types from the list. AgileApps Cloud (Uses SAML 2.0 authentication) Integration Server (Uses SAML 2.0 authentication) My webMethods Server (Uses SAML 2.0 authentication) Others (Does not use SAML 2.0 authentication) Secure Select this option if you want to use HTTPS protocol for secure communication. |
JavaScript Event Bus | Select this option if you want to specify publish and subscribe events for the gadget. To define publish events 1. Click Add next to Publish. 2. Specify the publish event name. 3. (Optional) Provide the payload for the publish event in a text window. Specify a payload only if the event has to send a fixed payload each time the event is fired. To define subscribe events 1. Click Add next to Subscribe. 2. Specify the subscribe event name. |
REST Invocation | Select the Use Cross-origin resource sharing (CORS) support on host servers option if you want the gadget to communicate with host servers that support CORS. Select the Use Business Console proxy service option if you want the gadget to use Business Console's inbuilt Proxy REST service to communicate with the host servers. |
Finish | Click this option to create a new gadget as specified in the wizard. |
Gadget Configuration Files
You can find the folders and files that the New Business Console Gadget wizard creates in the following locations:
In the Solutions view, the folders and files are in the User Interfaces/
<gadget_folder_if_provided>/
gadget_name folder.
In the Navigator view or Package Explorer view, the folders and files are in the
web_or_portlet_application/WebContent/
<gadget_folder_if_provided>/
gadget_name folder.
The following table describes the folders and files.
Folder | Files | Description |
Images | gadget_icon_image.png or gadget_icon_image.jpg | This image file will be used as the icon for the new gadget. |
Scripts | config.js | This file will contain the gadget configuration details. Do not edit this auto-generated file. |
| controller.js | This file is created only if the gadget type is AngularJS. This file specifies how the gadget will work. You need to know JavaScript and AngularJS to edit this file and program the gadget. |
| custom.js | Optionally, you can use this file to programmatically customize the gadget. |
Styles | style.scss | This folder will contain the default style sheet for the gadget. You can add your own style sheets (.scss files) to this folder. |
Views | settings.xhtml | This file will be empty initially. In this file, you can build a custom form to capture the values of the custom parameters specified when the gadget is configured in a Business Console AppSpace. The controller for an AngularJS gadget decides the business logic based on the values it receives from the custom form. For non AngularJS applications (for example JQuery), you can use selectors to directly capture the form values and then apply the business logic. |
| view.xhtml | You can edit this file and specify how the gadget should be displayed on the web. For gadget of type AngularJS , each view is tied to its respective controller. Controller decides the content for display. |
Gadget Definition File
In the Navigator view or Package Explorer view, the gadget definition file is listed in the web_or_portlet_application/WebContent/WEB-INF/gadgets/gadgetName_gadgetID folder.
Folder | Files | Description |
gadgetName_gadgetID | gadgetDefinition.xml | This file will contain gadget details such as the location of the files pertaining to gadget styles, scripts, and run-time parameters. Use the gadget definition editor to edit the gadget definitions. See
Gadget Definition Editor . |