ODML Introduction

Modified on Mon, 08 Feb 2021 at 03:57 PM

Article Content

Everything is JSON
Compatibility
Basic structure
Conventions Used in the Documentation
Useful Shortcuts in App Builder
Possible Format Options for Date/Time and Numbers/Currency
All articles about ODML

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	Convention	Example	In use example
Refer to a property name inside of an object	Name of the property	cellPadding	{ "cellPadding": value }
Refer to an array property in an object	Name the property suffixed with []	placements[]	{ "placements": [ ] }
Refer to a nested property name inside an object	Name the path and the property dot-separated	dim.x	{ "dim": { "x": value } }
Refer to a property of an object in a nested array	Name the property of the array suffixed with [], a dot and the property name/path	placements[]. 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