Overview
In Bizagi, you may extend the user interfaces by using Bizagi Widgets.
To create your own Widgets, you may use the online Widget Editor provided by Bizagi Ltd.
Before you move on, make sure you have read about Creating Widgets.
Widget Editor access
Use a browser of your choice to access the online Widget Editor (Google Chrome is recommended)
Access the Widget Editor by typing the following URL:
https://www.bizagi.com/widgeteditor/
You will be presented with the possibility to start creating a new Widget, or to load an existing one (from your recently worked on widgets, or from a .bwg file):
New Widget
Click on New to create your Widget from the default starting template.
Make sure you:
•Define the Widget's name, by editing the default name.
Notice you may localize the name in English and Spanish by clicking on the small icon to the right of this field.
•Select the Widget's type: choose User control for a regular Widget or choose Column for a Widget which should be displayed inside of a table (once per row).
•Define the category in which the Widget will be presented in the forms designer.
Notice you may localize the name in English and Spanish by clicking on the small icon to the right of this field.
•Include a brief meaningful description for your Widget.
The default starting template provides everything you need for a Widget and it shows an initial hello-world behavior (a "dummy implementation") so that you can use the Run option right away to test it and verify your modifications.
Open Widget
Click on Open to restore the progress of one of your Widgets or to load an existing one and modify it.
You will view a list of the recent Widgets you have worked on as well:
Notice you may also download recent Widgets or see further detail through these options:
Widget Editor user interface
Once you are working on a Widget, the Widget Editor will present the UI described below.
Upper ribbon
Provides the management options for the development of your Widget:
•New: Allows you to start creating a new Widget, as described in the section above.
•Open: Allows you to open an existing Widget, be it completed or still in progress, as described in the section above.
•Download: Saves your current progress, and builds up your Widget as a .bwg file. It is downloaded into your local drive (you may be prompted about this download, according to your browser settings).
It is strongly recommended to save your work periodically and use the Download option to store a backup copy of your Widget in your local hard drive.
•Run: Simulates the Widget's behavior at runtime. The built-in Simulator launches a Simulator view in the Work area and preview panel, in which you will see your Widget as presented in Bizagi's forms. Through the Run option, your current progress is saved as well.
For detailed information on the simulation data used by the Run option, refer to Simulating your Widget.
•Undo / Redo: Takes back the last action / Includes the last undone action.
•Save: Saves the current file your are working on.
•Save All: Saves all of the current progress of your Widget (all files).
•Functions: Shows a list of available functions for the API for Widgets in the lower part of the work area. Functions are listed with their documentation and examples.
For more information refer to API for Widgets.
Note that you may anytime use the Language selector option located in the upper right, in order to switch the language of the Widget Editor. Available options are English and Spanish.
Widget toolbox
In addition to the options mentioned above for the Widget management, note that for a Widget, the Editor will present a toolbox in two panels: The Widget structure, and the Widget properties.
In each panel of the toolbox, there is an option to toggle on/off that panel's visibility (in order to optimize the work area's space).
1. The Widget structure
It is the first panel located at the upper part of the toolbox and it shows all of the internal files and folder structure of a Widget:
Within the Widget structure you may:
•Double-click any file to open it in the work area and edit it.
Note that where you implement your Widget's behavior is at the myWidget.js file.
For detailed information about the Widget's file and folder structure, refer to Widget structure.
•Right-click any file to delete it or rename it.
•Drag and drop any file into the structure so that you include it in your Widget and its definition.
•Right-click a folder to create new files (New file) sub-folders (New folder), or to include files into your Widget and its definition the same as dragging and dropping (Upload file).
2. The Widget properties
It is the second panel located at the lower part of the toolbox and it shows all of the current properties of a Widget:
Keep in mind that properties of a Widget will allow the Bizagi Studio user to configure the Widget so that it is really a completely reusable UI building block.
Recall that you can have configurable static properties or configurable dynamic properties having values incoming from your process data model.
For the Widget's properties you may:
•Search for a given property in this list, by using the search box.
•Use the Add option to include a new property.
You will need to specify its unique name, its display name and type:
According to the type of property, you may need to include additional information.
For detailed information about all types of properties and their use, refer to Widget Properties.
•Use the Layout option to design how these properties are presented for the Bizagi Studio user to configure.
The layout configuration of the properties allows you to split them into logical tabs and groups, and usually present those properties which are strictly mandatory (required to configure) into the basic tab:
Note that it is best if you keep visible, editable and required in the basic tab.
•Use the sorting option to list the properties alphabetically, by ascending or descending order.
•Click on any property to redefine it, or to delete it.
To redefine it, use the Open icon.
To delete it, use the Delete icon.
Work area
The Work area will present tabs with any files you are working on.
This includes the following aspects:
1. When working with images, the work area will present the image's preview (i.e by clicking on an image):
|
Supported image files are those with these extensions: |
This preview will provide useful information such as the pixels width and height for that image.
Further options to help you work with images are:
•Zoom In / Zoom Out / Zoom to 100%: Allows you to preview the image with zooming options.
•Color picker: Works as in MS Paint, where you can get the color of an specific spot of your image.
•Embed this image: Encodes your image into bytes, so that you can use it in your js or css code.
This is a really useful and powerful option to have your Widget provide by itself any necessary images used for its behavior or styling.
For more information about this option, refer to Using images.
2. When working in js files (coding):
You will see the line numbers for the file, its code, and rely on IntelliSense features.
In the work area, you may toggle the Functions option to view a list of the API for Widgets and its help.
For more information about this option, refer to API for Widgets.
3. When simulating your Widget (run option):
You will see the preview for your Widget's behavior when accessed in any device.
For more information about this option, refer to Simulating your Widget.
Last Updated 1/23/2023 12:05:00 PM