JSON Data Source

Last modified on 2022/05/28 10:52

Apps - Datasource - JSON icon.png This type of data source belongs to the Files category in the data source library. It is used to retrieve static content from JSON files (JavaScript Object Notation) located on the local server. This is a structured text data format understood by JavaScript.


    Open url.png  see General remarks on data sources

  • The data from the data source is not automatically refreshed.
    • The app administrator must upload the JSON file again to update the data.
    • If data changes on a regular basis, then you should use an online JSON dynamic data source.
  • To find out more about the file structure, please consult http://www.json.org.


You want to retrieve the characteristics of different processors from a JSON file.

The JSON file contains two sections:

  • The column section: Indicates the title and properties of columns in the data source. Each column is delimited by curly brackets { }. 
  • The data section: Shows the values of the columns. Each row is delimited by square brackets [ ] representing one data source row.
Data source
EVApps - datasource JSON - Example Datasource.png

Download Zip icon.png Download Example (JSON file)

Open url.png   see Content

    "columns": [
         "fieldname": "title",
         "label": "CPU",
         "colIdx": 0,
         "xtype": "string",
         "access": "read"

         "fieldname": "AnotherField",
         "label": "Unit",
         "colIdx": 1,
         "xtype": "string",
         "access": "read"

         "fieldname": "Value",
         "label": "Value",
         "colIdx": 2,
         "xtype": "string",
         "access": "read"

         "fieldname": "LastValue",
         "label": "Last Value",;
         "colIdx": 3,;
         "xtype": "string",;
         "access": "read";

    "datas": [
          ["CPU 1","GHz","1031","700"],
          ["CPU 2","MHz","2066","650"],
          ["CPU 3","GHz","3033","833"],
          ["CPU 4","GHz","1031","700"]

List of properties



Last Modified Uploaded File: The date on which the file was last uploaded.


Choose A File: Used to select the CSV file using the Open dialog box. Note: You can also select the file using a drag and drop.


Configure Field Types: Used to open the field editor that enables you to select data source fields and specify the type of each field, e.g. date, integer, etc. when this is not automatically detected.

  • The Apps - datasources Properties - Preview button.png button below the property shows the number of rows (max. 15) and columns extracted. Click to open the editor.
  • The button will display No data available as long as you have not selected any of the mandatory elements for the data source.
  • In edit mode, only the first 15 data source records are displayed.
  • In execute mode, all of the data source records are displayed.
  • Data in static data sources comes from the last file upload.
  • Data in dynamic data sources is refreshed when you open the app in edit mode.

Auto Refresh (Note: Only for dynamic data sources): Used to indicate the automatic refreshment interval for data from the data source in hours/minutes.

  • Data is automatically refreshed each time the app is run and each time the page is redisplayed, regardless of whether it is in execute mode or edit mode.

Caution: The updating of data requires additional activity on the Service Apps platform.

Best Practice icon.png  

  • You should define an automatic refreshment interval only if the app is required to constantly display real-time data for long periods of time on screen.

example  View dashboard data

  •  You should not specify an automatic refreshment interval if the app is only used for displaying a snapshot of data.

example  Display a portal where catalogs can be consulted


Select First Row As Current Record: Used to indicate if the first record of the data source, when displayed in widgets, is selected by default (box is checked) or not (box is not checked).


No Data Message: This message is displayed when the data source does not contain any data.

  • Enter the code directly in the field or click Apps - Edit Html icon.png to open the text editor
Powered by XWiki © EasyVista 2022