Designing and Implementing Composite Applications : webMethods CAF and OpenCAF Development Help : Working with Gadgets : New Business Console Gadget Wizard
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 you 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 five 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 this option 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
Click Next if you have to specify the AngularJS gadget settings. For details, see AngularJS Gadget Specification.
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. Select only SAML 2.0 authenticated servers.
*AgileApps
*Integration Server
*My webMethods Server
*Others
*Secure Select this option if you want to use HTTPS protocol for secure communication.
You need not specify the host if you want the gadget to connect to a local My webMethods Server REST API.
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 JavaScript knowledge to edit this file and program the gadget.
*custom.js
Optionally, you can use this file to programmatically customize the gadget.
Styles
style.css
This folder will contain the default style sheet for the gadget. You can add your own style sheets (.css 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 .
Copyright © 2017 Software AG, Darmstadt, Germany. (Innovation Release)

Product LogoContact Support   |   Community   |   Feedback