Using the web UI framework extensibility workbench to modify a widget

You can modify a widget by using the web UI framework extensibility workbench.

1. In the application, open the screen that you want to change.
2. Click Shift + space bar.
3. Review and accept the Extensibility Workbench Usage Terms and Conditions.

   The Extensibility Workbench launches, provided you have also completed the Directory to URL Mapping and you have associated a file for the screen. Any subsequent use of the Shift + space bar hot key hides and then re-launches the workbench until the browser is refreshed or a new screen is opened, in which case the Terms and Conditions window re-appears.

   If you decline the terms and conditions, the workbench does not launch.

   The tools of the Extensibility Workbench appear in different views. You might have to click the plus sign button on the Extensibility Workbench toolbar to display all of the views.

4. Click the plus sign button to show all views or the minus button to minimize all views. When all of the views are minimized, you can click the tab of a view to display just that view. When a view is displayed, you can minimize the view by clicking the minus sign in the upper right hand corner of the view.
5. Before you can work with a widget on a screen, you need to select or associate the extension file for the screen. The extension file stores the extensions (changes) to the screen. The Add extension file for screen dialog box appears when you first try to work on a widget.

   The extension file contains metadata about your changes. Extension files are saved in your current working directory. They can be viewed in the Files tab of the Palette & Files view.

   When the Extensibility Workbench is launched for the first time, the current working directory is defaulted to the directory entered during mapping. You can later change this in the Files tab.

   1. In the Add extension file for screen dialog box, specify the extension file by either using the browse button to select an existing file, or by typing the name of the file in the Extension file field.

      Type the name of the file if you want to associate/create a new file. If you have already extended the screen and have an extension file for the screen, you can browse for the file.

   2. Click the OK button.

      If a dialog box appears that includes the message Selected file contains source that does not match with the current screen., click OK to overwrite the file or Cancel to choose another file. This message usually means that you have chosen the wrong metadata file.

   After you have saved the extensions to a screen and deployed those changes in the application, you do not have to add the extension file to make further changes to the screen. The extension file will be automatically loaded with the screen.

   After you select this extension file, the following view actions occur:

   • The Outline view populates with information about the widgets on the screen.
   • The Screen Details View populates with information about the extension file.

     The Extension Class Name field displays the name of the generated extension class. You can change this name.

   • The Properties view displays the original properties of the widget.
6. To add a widget to the screen, select the widget on the Palette tab. Right-click or left-click at the place on the screen where you want the widget to appear.

   When you add a new widget, the sciId property of the widget must include the default extn_ prefix. This differentiates an extended component from an out-of-the-box component.

7. To change a widget, select it on the screen or in the Outline view.
8. To change or create a widget property, do the following. For more information about widget properties, refer to the Ext JS framework documentation for Version 2.2.1 or Version 3.0.2.
   • If you want to change the properties of an item, click the Refresh instances button in the Screen Details view to make those property changes active.

     If you want to change the properties of an existing item, a separate grid titled “Original Properties” appears that displays the original property values of that item.

     The “Original Properties” grid is not shown for any new component added through extensibility. Any new properties added through extensibility are listed in a separate grid above the "Original Properties" grid (if the component is present in the base screen).

     You cannot change a property listed under “Original Properties”. However, you can override an existing property or add new properties to an out-of-the-box component.

   • To create a new property for an item, click the Add button in the Properties view. Before clicking the Add button, the desired property should be selected from the dropdown list of available properties.
9. To save your changes in your project directory (but not deploy them), click the Save button in the Screen Details view.
10. To work on another screen, go to the other screen and then re-activate the Extensibility Workbench by clicking Shift + space bar.
11. After you have saved all of your screen extensions, you must deploy the changes for them to take effect in the application.