Skip to main content

Widget plugin

Please read this page carefully before you start creating a widget plugin. There are a lot of possibilities with widget plugins, but there are a few things we don't recommend using.

This is mainly to ensure that we can somewhat guarantee that your plugin will continue to work on different / newer versions of the Grexx Platform. If you do not follow these advices, we cannot provide you with support for your plugin.

Do not use​

Do not use the Widget Plugin option if you are inexperienced with Javascript / HTML / CSS. Freedom comes with a big price: Responsibility. You can do a lot, but that also means that you can break a lot and are responsible for the effect that your plugin can have. This includes pages that no longer work, cases that can no longer be loaded, reduced browser support or even data loss.

Only use the API made available by Grexx in your widget plugin (see below). Other ways of calling Grexx functions may not be used. This includes using the parent and window.gx variables, making your own ajax or websocket calls or any other method that is not the API described below.

In addition, there are a number of security techniques that ensure that a number of functions or resources cannot be used:

  • Content-Security-Policy header, so the techniques below cannot be used
    • inline style eg <span style="color:blue;">blue?</span>.
    • inline javascript eg <span onclick="setColorToBlue()">blue?</span>.
    • Retrieve data, requests, styles, scripts, fonts, images from a source other than the current domain.
    • use eval or new Function() to run 'dynamic' javascript.
  • Thread-Blocking components are blocked:
    • prompt
    • alert
    • confirm

API​

The API documentation is available in each box via the URL: https://{{env-name}}.grexx.today/docs/api/js/, e.g. https://my.grexx.today/docs/api/js.

It's important to note that in our API we consider all the following to be equal. So make sure your code can handle this:

  • []
  • [{}]
  • [{"A":{}}]
  • null

Libraries​

To use JQuery and other libraries within the plugin, you must first add them. This can be done in the studio via Home → Plugins & libraries →</> Frontend libraries →</> Create frontend library. The direct CDN link must be placed in the Javascript files and/or CSS files field. Then the plugin library can be selected in the widget plugin.

Disable Cross-Origin Resource Sharing (CORS)​

Some external libraries (e.g. Google Charts) do not work with CORS, so you can disable CORS for those plugins. This can be done in the studio by going to the settings of your frontend library and checking "Disable CORS".