{"_id":"579a38436a875420006a5df1","__v":0,"user":"5564f227f0f70f0d00a9ab20","version":{"_id":"573f3f6c87cbd20e00208e42","__v":2,"project":"573f3f6c87cbd20e00208e41","createdAt":"2016-05-18T20:59:16.635Z","releaseDate":"2016-05-18T20:59:16.635Z","categories":["573f3f6c87cbd20e00208e44","573f3f6c87cbd20e00208e43","573f3f6c87cbd20e00208e45","573f3f6c87cbd20e00208e46","573f3f6c87cbd20e00208e47","573f3f6c87cbd20e00208e48","573f3f6c87cbd20e00208e49","573f3f6c87cbd20e00208e4a","573f3f6c87cbd20e00208e4b","579a382265f89a170099946f","57bce03036eff81700666963"],"is_deprecated":false,"is_hidden":false,"is_beta":false,"is_stable":true,"codename":"","version_clean":"1.0.0","version":"1.0"},"project":"573f3f6c87cbd20e00208e41","category":{"_id":"579a382265f89a170099946f","project":"573f3f6c87cbd20e00208e41","version":"573f3f6c87cbd20e00208e42","__v":0,"sync":{"url":"","isSync":false},"reference":false,"createdAt":"2016-07-28T16:51:46.560Z","from_sync":false,"order":9999,"slug":"schemas","title":"Schemas"},"updates":[],"next":{"pages":[],"description":""},"createdAt":"2016-07-28T16:52:19.965Z","link_external":false,"link_url":"","githubsync":"","sync_unique":"","hidden":false,"api":{"results":{"codes":[]},"settings":"","auth":"required","params":[],"url":""},"isReference":false,"order":999,"body":"Octoblu allows you to use  [JSON Schema](http://json-schema.org/) to customize the messages, configuration properties, and the appearance of those properties. For the presentation layer, we use [Angular Schema Form](http://schemaform.io/).\n\n### Basic Rules:\n\n* All schemas MUST be nested underneath the `meshblu.schemas` property of your device. \n* The version MUST exactly equal `2.0.0`\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"Example\"\n}\n[/block]\nFor example, if `Device A` has a property of `enabled`, the schema can indicate what type of property that is.\n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"schemas\\\": {\\n    \\\"version\\\": \\\"2.0.0\\\",\\n    \\\"configure\\\": {\\n      \\\"default\\\": {\\n        \\\"type\\\": \\\"object\\\",\\n        \\\"properties\\\": {\\n          \\\"enabled\\\": {\\n            \\\"type\\\": \\\"boolean\\\"\\n          }\\n        }\\n      }\\n    }\\n  }\\n}\\n\",\n      \"language\": \"json\",\n      \"name\": \"Example Schema\"\n    }\n  ]\n}\n[/block]\nIf you view `Device A` in the Octoblu Things page, it will look similar to this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/8974148-Screenshot_2016-07-28_11.24.22.png\",\n        \"Screenshot 2016-07-28 11.24.22.png\",\n        664,\n        456,\n        \"#dfe1e2\"\n      ],\n      \"sizing\": \"80\",\n      \"border\": true\n    }\n  ]\n}\n[/block]\nGood start, but what if you want to show something other than a checkbox? Enter [form schema](http://schemaform.io/). \n[block:code]\n{\n  \"codes\": [\n    {\n      \"code\": \"{\\n  \\\"schemas\\\": {\\n    \\\"version\\\": \\\"2.0.0\\\",\\n    \\\"configure\\\": {\\n      \\\"default\\\": {\\n        \\\"type\\\": \\\"object\\\",\\n        \\\"properties\\\": {\\n          \\\"enabled\\\": {\\n            \\\"type\\\": \\\"boolean\\\",\\n            \\\"default\\\": false\\n          }\\n        },\\n        \\\"x-form-schema\\\": {\\n          \\\"angular\\\": \\\"configure.default.angular\\\"\\n        }\\n      }\\n    },\\n    \\\"form\\\": {\\n      \\\"configure\\\": {\\n        \\\"default\\\": {\\n          \\\"angular\\\": [\\n            {\\n              \\\"key\\\": \\\"enabled\\\",\\n              \\\"type\\\": \\\"radiobuttons\\\",\\n              \\\"titleMap\\\": [\\n                { \\\"value\\\": true, \\\"name\\\": \\\"Enabled\\\" },\\n                { \\\"value\\\": false, \\\"name\\\": \\\"Disabled\\\" }\\n              ],\\n              \\\"notitle\\\": true\\n            }\\n          ]\\n        }\\n      }\\n    }\\n  }\\n}\\n\",\n      \"language\": \"json\",\n      \"name\": \"Example Schema with Form\"\n    }\n  ]\n}\n[/block]\nNow the form would look like this:\n[block:image]\n{\n  \"images\": [\n    {\n      \"image\": [\n        \"https://files.readme.io/e8798fa-Screenshot_2016-07-28_11.49.47.png\",\n        \"Screenshot 2016-07-28 11.49.47.png\",\n        632,\n        482,\n        \"#dbdcdc\"\n      ],\n      \"sizing\": \"80\",\n      \"border\": true\n    }\n  ]\n}\n[/block]\n\n[block:api-header]\n{\n  \"type\": \"basic\",\n  \"title\": \"More Information\"\n}\n[/block]\n* [Configure](doc:schema-configure) \n* [Form](doc:schema-form) \n* [Message](doc:schema-message)","excerpt":"","slug":"schemas-overview","type":"basic","title":"Overview"}
Octoblu allows you to use [JSON Schema](http://json-schema.org/) to customize the messages, configuration properties, and the appearance of those properties. For the presentation layer, we use [Angular Schema Form](http://schemaform.io/). ### Basic Rules: * All schemas MUST be nested underneath the `meshblu.schemas` property of your device. * The version MUST exactly equal `2.0.0` [block:api-header] { "type": "basic", "title": "Example" } [/block] For example, if `Device A` has a property of `enabled`, the schema can indicate what type of property that is. [block:code] { "codes": [ { "code": "{\n \"schemas\": {\n \"version\": \"2.0.0\",\n \"configure\": {\n \"default\": {\n \"type\": \"object\",\n \"properties\": {\n \"enabled\": {\n \"type\": \"boolean\"\n }\n }\n }\n }\n }\n}\n", "language": "json", "name": "Example Schema" } ] } [/block] If you view `Device A` in the Octoblu Things page, it will look similar to this: [block:image] { "images": [ { "image": [ "https://files.readme.io/8974148-Screenshot_2016-07-28_11.24.22.png", "Screenshot 2016-07-28 11.24.22.png", 664, 456, "#dfe1e2" ], "sizing": "80", "border": true } ] } [/block] Good start, but what if you want to show something other than a checkbox? Enter [form schema](http://schemaform.io/). [block:code] { "codes": [ { "code": "{\n \"schemas\": {\n \"version\": \"2.0.0\",\n \"configure\": {\n \"default\": {\n \"type\": \"object\",\n \"properties\": {\n \"enabled\": {\n \"type\": \"boolean\",\n \"default\": false\n }\n },\n \"x-form-schema\": {\n \"angular\": \"configure.default.angular\"\n }\n }\n },\n \"form\": {\n \"configure\": {\n \"default\": {\n \"angular\": [\n {\n \"key\": \"enabled\",\n \"type\": \"radiobuttons\",\n \"titleMap\": [\n { \"value\": true, \"name\": \"Enabled\" },\n { \"value\": false, \"name\": \"Disabled\" }\n ],\n \"notitle\": true\n }\n ]\n }\n }\n }\n }\n}\n", "language": "json", "name": "Example Schema with Form" } ] } [/block] Now the form would look like this: [block:image] { "images": [ { "image": [ "https://files.readme.io/e8798fa-Screenshot_2016-07-28_11.49.47.png", "Screenshot 2016-07-28 11.49.47.png", 632, 482, "#dbdcdc" ], "sizing": "80", "border": true } ] } [/block] [block:api-header] { "type": "basic", "title": "More Information" } [/block] * [Configure](doc:schema-configure) * [Form](doc:schema-form) * [Message](doc:schema-message)