Article Content


Everything is JSON

The complete configuration of a ONE DATA App UI is done via JSON. The ONE DATA Markup Language (ODML) is a specification of the available configurations you can use in the JSON to describe your App UI.

A short explanation of the JSON data format can be found here: https://developers.squarespace.com/what-is-json


This Introduction Article is the starting point for the detailed documentation of ODML, it describes the conventions used in the further articles for ODML (which can be found below), the basic structure of an App, and contains some general information.


If you are a beginner in APP Building, following articles may help you to get into APPS:

Apps - Getting Started

APPs Building - Nifty Tips & Tricks for Beginners



Compatibility

The following table lists all browsers that the App Builder and Viewer support. The version column shows the minimum version required.

Browser
Version
Chrome
87, 88
Firefox
85
Safari
11
iOS Safari
11.3


Basic structure

  {  
    "version": "0.1",  
    "global": 
      // global app configurations
    },  
    "pages": [
      
        // .. config a single page
      }  
      // .. more page configurations
    ],  
    "screens": [ 
      { 
        // .. config a single screen
      }  
      // .. more screen configurations
    ],  
    "layouts": [ 
      { 
        // .. config a single layout
      } 
      // .. more layout configurations
    ], 
    "datasources": [    
      { 
        // .. config a single datasource
      }
      // .. more datasource configurations
    ], 
    "elements": [    
      
        //.. config a single element
      } 
      // .. more element configurations
    ]
  }


Conventions Used in the Documentation

Purpose

ConventionExampleIn use example
Refer to a property name inside of an objectName of the propertycellPadding
  {        
    "cellPadding": value      
  }
Refer to an array property in an objectName the property suffixed
with []
placements[]
  {        
    "placements": [

    ]      
  }
Refer to a nested property name inside an objectName the path and the property dot-separateddim.x
  {        
    "dim": {          
      "x": value
    }    
  }
Refer to a property of an object in a nested arrayName the property of the array suffixed with [], a dot and the property name/pathplacements[].
element
  {              
    "placements": [
      {
        "elementId": welcomeTitle        
      } 
    ]
  }
Comments within code sections

  // This is a comment


Useful Shortcuts in App Builder

Purpose
Shortcut
Search and or Replace in the APP Editor
CTRL + F / CTRL + H
Set multiple cursors to different positions to edit more then one line at a time
ALT + Left Mouse Click
Delete a Line
CTRL + Shift + K
Find next matching selection (You select an ID and want to check if you have the same ID multiple times)
CTRL + F3
Go to Line
CTRL + G
Go to next Error / Warning
F8
Comment Line / Selection
CTRL + K + CTRL + C
Trigger Suggest / Show options
CTRL + Space



By pressing "F1" in the editor of the APP Builder, you can see a full list of all available shortcuts.




Possible Format Options for Date/Time and Numbers/Currency

Type
Link to all possible format options
Date / Time
https://momentjs.com/docs/#/displaying/
Numbers / Currency
http://numeraljs.com/#format


All articles about ODML