Did you know 3DEXPERIENCE widgets can enhance productivity? If you haven’t been using them, keep reading to learn how to use them.

Let’s start with what widgets are. A widget is a relatively simple and easy-to-use software application or component. Widgets work on the Universal Widget API (UWA).

UWA is a simple widget format based on web standards such as HTML, CSS, XML, and JavaScript. It is also able to store user’s preferences and determine which users and which widgets are authorized to save preferences.

A widget is made for one or more different software platforms. Widgets are lightweight and load on the Client-side and use JSON for data exchange purposes from the server, so performance is faster than the server-side technologies like- JSP, etc.

We see some common widgets in the below screen like- Daily weather, Notes, News Feeds, Music, etc.

Widgets in the 3DEXPERIENCE Platform

Widgets for the 3DEXPERIENCE Platform are specialized applications developed using standard web technologies- HTML5, JavaScript, and CSS. Widgets are Movable, resizable, configurable, shareable, and removable from the Dashboard. They are fast in performance as Widgets load UI elements only once. A widget within the 3DEXPERIENCE Dashboard can fetch data from internal and external sources. Widgets in the 3D Dashboard looks like the below:

Widgets – Technical Architecture

As we see above the UI elements including HTML, Javascript, RequireJS, etc. load on the 3D Dashboard for the first time when the page loads. On the backend side, the RESTful web services and the database play a major role in providing the business logic and data respectively. The data exchange between the UI and the backend is done via JSON data interchange and various business logic may be used that resides in the matrix database kernel.

Sample Widgets

We have few samples that run on the 3D Dashboard and can be interesting to use and customize.

1. This is a widget for getting the Auto Number series from 3DSpace.

How to Create Widgets

To learn how to create widgets, we should be familiar with a few topics:

• Technologies
• Require JS
• JSON
• Tools
• Source Code Placement

Technologies Required for Building 3D Dashboard Widgets

Widgets are developed using the latest web technologies like HTML, JavaScript, UWA, JSON, and CSS. Concepts of Modules and AMD are used in developing Widgets. RequireJS documentation is available at http://requirejs.org/ JSON also finds a massive use in widget development. Only jQuery and RequireJS frameworks are supported by Dassault Systèmes.

RequireJS

RequireJS is a JavaScript file and module loader. It is optimized for in-browser use, but it can be used in other JavaScript environments, like Rhino and Node. Using a modular script loader like RequireJS will improve the speed and quality of your code.

• Why RequireJS:
• In a large application, a lot of JavaScript files are needed, and each script tag needs a request.
• You have to put them in the same order in which they are called, i.e. a file that is dependent on another should be loaded after the dependent ones.

You can browse complete documentation and learn more on this at- https://requirejs.org

JSON

JSON means JavaScript Object Notation. JSON is an open standard file format and data interchange format. JSON uses human-readable text to store and transmit data objects consisting of attribute-value pairs and array data types (or any other serializable value).

It is a very common data format, with a diverse range of applications, such as serving as a replacement for XML in AJAX systems.

• JSON is built on two structures:
  • A collection of name/value pairs, i.e. an object, record, struct, dictionary, hash table, etc.
  • An ordered list of values, i.e. array, vector, list, etc.

You can browse complete documentation and learn more on this at https://www.json.org/json-en.html

Tools Required for Widget Development

Widgets: JS Code

• For Editor: Any Text Editor
  • Notepad++, Eclipse IDE, VS Code, Atom
• For Debug: The Web Browser Console
  • Use CTRL + Shift + K or F12 to open the console in most Web Browsers
• Web Services: Java Code
  • For Edition and Debug: Eclipse IDE, IntelliJ IDEA, or any other IDE
  • To test your Web Services: RestClient (Firefox Extension), Postman (Chrome Extension) can be used.

Advantages of Widgets

Widgets are lightweight HTML-based applications and load faster. Multiple data sources can be plugged and configured to fetch and show data on a Dashboard. Easy to use, deploy and configure finds it good usage. Widgets utilize client machine processing power, leading to improved performance. RESTful web service can enhance the capabilities of widgets. Widgets usually use JSON for data exchange purposes. You have the ability to create customized widgets for specific business needs.

To learn more about widgets, be sure to watch the on-demand webinar titled: 3DEXPERIENCE Widget Fundamentals.