TC1.22b: Create and configure a Snap4City SVG Custom Widget for real-time interaction

Test Case Title

TC1.22b: Create and configure a Snap4City SVG Custom Widget for real-time interaction


Create a Snap4City SVG custom widget and configure it to be embedded in a Snap4city dashboard.


  • To know how to create SVG graphics file using an editor;
  • To be logged in the Snap4city platform;
  • To know how to create dashboards.

Expected successful result

A Snap4City SVG custom widget is correctly shown in a dashboard and interact in realt time with the system.


See details below

This tutorial aims at training you in creating Snap4City SVG Custom Widgets and to instantiate the Synoptic to be published into a Dashboard.

Once the SVG file has been correctly created, it has to be uploaded on the platform as SVG template.

Please note that many different public templates are yet available on the the Snap4City platform and can be freely used. Otherwise, you can create your personal SVG template, as explianed before, and upload it on the platform and decide to make it public or not.

Upload a SVG template on Snap4City

Please note that to upload a new SVG custom widget you need to have at least the role AREA MANAGER. Users with role MANAGER cannot upload new SVG templates on the platform but can use public SVG templates.

After the Log In on the platform, on the main menu on the left, click on Extra Dashboard Widgets --> Register Custom Widget Template (1). As shown in the next image, the list of yet available SVG teamplates is shown as previews. The SVG template shown can be: public SVG templates, SVG templates uploaded by you and delegated SVG templates. On the top right corner the "New Template" button (2) is available to upload a new SVG template.



How to use a Snap4City SVG Custom Widget

Case 1: SVG interaction via a MyKPI on Snap4City

Step 1: Create KPIs

Now on the Snap4City platform it is necessary to define the new MyKPI, according to the new defined attributes in the SVG file. So that, we need to create the following new three KPI:

  • A KPI representing the value received from the feedback of the user. Each time a user click on a face, the system will receive one of the possible values: -2, -1, 0, 1 or 2.
  • A KPI representing the total number of clicks. We will see later how to calculate this KPI.
  • A KPI representing the mean rate value calculated on the basis of the feedback received. We will see later how to calculate this KPI.

This SVG custom widget is based on variables that are generated via an IOT App. In particular the total number of clicks and the mean rate value are generated via an IOT App that is described later.

To create the new three KPIs, follow this steps:

  1. Login in the Snap4City platform ( and, on the left column menu, click on My Data, KPI, POI item;
  2. Click on the Add My KPI button on the top of the page;


  1. Fill in the form to add the new KPI according to the Nature and Sub-Nature of the data to be managed;
  2. As value name use the same attributes name define before and click Save. For example:
    1. s4csvg_userFeedback, for the feedback received from the user;
    2. s4csvg_total_feedback_clicks;
    3. s4csvg_feedback_mean_rate_value.


  1. The new KPI have been now created. Take a note of the number of new KPIs, that is available in the first column of the table with the list of your KPIs.