Overview
Bizagi offers a comprehensive set of controls (out of the box) to include in your Activities forms (user interfaces).
These set of controls are the most commonly used and required by any Process, such as: The upload control, image thumbnails, combo boxes, radio buttons, and different types of input fields, amongst others.
In projects which require custom UI and more sophisticated controls, Bizagi presents the possibility to create Widgets as described at Extending or customizing the UI.
You can create custom Widgets to extend your Process forms with any interactive options or specific behavior (i.e, invoke REST services, render charts and specific illustrations, embed videos, frames or custom buttons and functionality, etc).
This section presents preliminary concepts to create your own Widgets.
Required profile
To create Bizagi Widgets, you require the following profile:
1. Language-programming skills
Knowledge is required specifically about:
•Javascript and HTML (preferably HTML 5).
•CSS (preferably CSS 3).
•Expertise in jQuery (and jQuery UI).
For more information about jQuery, refer to http://jquery.com/.
2. Understanding JSON notation
If you are not familiar with JSON files but have worked with XML files, you may rely on web sites to help you quickly learn the basics of JSON when converting information from XML to JSON or vice versa (i.e http://www.freeformatter.com/json-to-xml-converter.html).
3. Being familiar with the console and debugging options provided by browsers
It is likely that you will need to debug and trace Widgets while creating and testing them.
For this, we recommend using Google Chrome as a browser and using its Developer tool options (often launched through the F12 key).
Important
Though it is required to meet with the aforementioned profile to create Widgets (regarding having knowledge around web-programming skills), no specific framework is actually needed to build the Widgets (i.e, you may even create Widgets directly using notepad).
In other words, Widgets are created outside of Bizagi Studio and are not bound to any specific platform since they rely on web-based technology (jQuery, HTML, CSS, JSON).
The concept behind a Widget is to define and develop controls which comply with a specific structure (powered to support display in any device) so that these are model-driven. This means, having certain parameters which allow them to be configured and attached to any Process and business scenario in general (plug and play).
To create Widgets, Bizagi Ltd provides an online resource kit called the Widget Editor.
The Widget Editor
The Widget Editor is a service provided by Bizagi Ltd will allow you to create your own Widgets in an assisted manner.
To use the Widget Editor, simply use a browser to access and make the most of the following features:
•Start creating Widgets from a ready-to-run template.
•Have automatic validations of your code's syntax.
•Simulate your Widget at run-time for all devices (desktop, tablets and smartphones).
•Rely on friendly and powerful options that accelerate and assist you with the coding, such as: the possibility to include libraries in your Widget, preview any images and icons used by it, use IntelliSense features to use Bizagi's API, and to easily build the Widget file.
•Keep your personal Widgets workspace in the browser, by having a list of recently worked-on Widgets and having worked saved in the browser (though it is recommended to download a copy of your Widget and save it locally).
For more information about the Widget Editor features and user interface explained, refer to Widget Editor's user interface explained.
Last Updated 1/6/2022 11:29:11 AM