Widgets

Widgets are easily configurable external objects, usually used to compose home pages.

How to integrate widgets

This is just a reminder, as widgets just build on the existing external objects

• create a view (home page, domain home, etc)
• through the view template editor, add a view area
  • type : External Page
  • source : External Object
  • External Object : "MyCounterName" (copy that name)
• create a new External Object
  • name: "MyCounterName"
  • UI Widget: Yes
  • Nature: UI Page or component
  • Class: one of the available widgets class, see bellow

note

Widgets are basically external objects which means that if they are displayed alone they have a title and other UI-related decoration (Close button, ...).

This decoration can be explicitly disabled by adding "decoration": false" in the setting. It can also use a custom logic by overriding the hasDecoration hook.

When displayed embedded as a view component or in an area of an object form, they are displayed without decoration (regardless of the above "decoration" setting or the custom logic implemented in the hasDecoration hook).

Counters

The Counters external object widget (class: com.simplicite.webapp.web.widgets.CountersExternalObject) displays the count(s)/aggregate(s) of some specified objects.

Configuration is done like such in the configuration field of the external object:

• color must be an available CSS class, typically one of the color classes
• name is the functional name of the object you need to count
• icon is one of the available SVG icons in the app

{
    "objects": [
        {
            "color": "violet",
            "name": "MyObject",
            "icon": "fas/box"
        }
    ]
}

Carousel

The Carousel external object widget (class: com.simplicite.webapp.web.widgets.CarouselExternalObject) displays a carousel of data and is configured with the following JSON:

{
    "name": "DemoProduct",
    "imageField": "demoPrdPicture",
    "titleField": "demoPrdName",
    "subTitleField": "demoPrdReference",
    "descriptionField": "demoPrdDescription",
    "filters": {
        "demoPrdFeatured": true
    },
    "height": "18rem"
}

Cards

The Cards external object widget (class: com.simplicite.webapp.web.widgets.CardsExternalObject) displays data as cards and is configured with the following JSON:

{
    "name": "WebNews",
    "titleField": "nws_title",
    "subTitleField": "nws_human_readable_date",
    "imageField": "nws_image",
    "descriptionField": "nws_description",
    "onclick": false,
    "cardWidth": "15rem",
    "rowClasses": "row-horizontal"
}

Accordion

The Accordion external object widget (class: com.simplicite.webapp.web.widgets.AccordionExternalObject) displays data as a basic accordion and is configured with the following JSON:

{
  "titleField": "demoPrdName",
  "name": "DemoProduct",
  "contentField": "demoPrdDocumentation"
}

Time line

The Time line external object widget (class: com.simplicite.webapp.web.widgets.TimelineExternalObject) displays data as a basic time line and is configured with the following JSON:

{
  "name": "WebNews",
  "titleField": "nws_title",
  "dateField": "nws_date",
  "contentField": "nws_description",
  "filters": {
    "order__nws_date": 1
  }
}

Mermaid chart

The Mermaid external object widget (class com.simplicite.webapp.web.widgets.MermaidExternalObject) displays a Mermaid charts from a specification.

The principle is to provide the Mermaid specification either statically in the settings of the external object:

e.g.

sequenceDiagram
    Customer->>User: I want to order a laptop
    User->>Customer: Your order is placed
    User->>Admin: Please validate
    Admin->>User: Done!
    User->>Customer: Your order is on its way

or dynamically using the getMermaidChartSpec hook of the class

Custom chart

The Custom chart external object widget (class com.simplicite.webapp.web.widgets.ChartjsExternalObject) displays a Chart.js custom chart from a specification.

The principle is to provide the Chart.js specifications either statically in the settings of the external object:

e.g.

{
  "options": {
    "indexAxis": "y",
    "plugins": {"legend": {"position": "bottom"}}
  },
  "type": "bar"
}

or dynamically using the getChartOptions hook of the class.

And the provide the chart data dynamically using the data hook of the class:

e.g.

private static final int NB_DATASETS = 3;
private static final int NB_VALUES = 5;

@Override
public JSONObject data(Parameters params) {
    JSONArray labels = new JSONArray();
    for (int j = 1; j <= NB_VALUES; j++)
        labels.put("val " + j);

    JSONArray datasets = new JSONArray();
    for (int i = 0; i < NB_DATASETS; i++) {
        JSONArray vals = new JSONArray();
        for (int j = 0; j < NB_VALUES; j++)
            vals.put(Tool.randomNumber(2));

        datasets.put(new JSONObject()
            .put("label", "dataset " + (i + 1))
            .put("data", vals)
            .put("backgroundColor", COLORS[i%COLORS.length]));
    }

    return new JSONObject().put("labels", labels).put("datasets", datasets);
}