Build your First Page

Understanding JSON Configuration Files

In this section, explain our use of JSON configuration files. You'll learn what they are, how they work, and how you can use them to create powerful reports with minimal coding. We'll provide you with plenty of examples to help you understand the concepts, and by the end of this section, you'll have a solid grasp of how to work with JSON configuration files. Below is a screenshot of an example config:

Please note the syntax of the json particularly the outer curly braces, the commas separating each parameter in the list and the double quotes used around each parameter name. Below is a list of descriptions on how you should use these parameters to build your html report page.

"import_json_file_path":

The relative file path of the json data file to be analyzed. This json file should be exported from an Angles timelime or simply the angles_timeline.json export in the Piston "exports" folder, which is created in each new session you create on a Piston Server.

e.g: "import_json_file_path": "../exports/angles_timeline.json"

As the path is relative, the quickest and easiest way to import your data is to save your json data file from Angles into the 'imports' folder on the report. This way you you can simply use "import_json_file_path": "imports/my_angles_export.json" where 'my_angles_export' is the name of the json file you have exported out of Angles and saved to the 'imports' directory. This avoids having to understand how to use relative file path name prefixes like "../" - but this basically means 'go one level up' in the folder structure and "../../" means 'go two levels up' etc...

"page_title":

If you want to set a custom title, change the value to your desired text string. Leaving it blank ("") will remove the HTML element entirely.

e.g: "page_title": "Fulcrum Report"
e.g: "page_title": ""

"arrangement":

Define the grid structure of your report by specifying the number of rows and columns. The resulting grid uses gives ids to each part of the grid in the "A1" style convention, similar to what is used when defining cell references in spreadsheet software, where the letter represents the column, and the number represents the row. This allows us to tell the report where to place our content later on. You can also define how many columns you want in specific rows by passing an array for the columns value. i.e. rows:3, columns [1, 2, 2] would give you this structure

e.g: "arrangement": {"rows": 3, "columns": [4, 1, 1]}

"colours":

Define custom colors using RGB and HEX values. Mac tools like Digital Colour Meter can help you pick specific colors from your logo or branding.

e.g: "colours": {"fulcrum":"#532CEB" , "light_grey": "#EFEFEF" , "transparent": "#EFEFEF00" }

"variables":

Here, the true power of using json config files is harnessed. You can use the Angles.js functions to calculate and store values for your report. The "var_name" can then be used to recall the calculations in the content functions.

e.g: "variables": {"var_name": ["function", "row_name", [{"qualifier_category": "qualifier_name", "attributes":{"attribute_category": "attribute_name"} }] , "start_time", "end_time" ] }

Below is a list of the functions currently available:

More information on the available functions is in the "Variable Functions" section

"content":

Finally this is the place where you can display the values stored in your variables section into content on your arrangement using the grid ids.

e.g: "content": {"content_name": ["function", "content_title", "variable_name/s", "location_id", ...size/colour/etc depending on function used...]}

Below is a list of the functions currently available:

More information on the available functions is in the "Content Functions" section

< Back

Next >