Fully adaptive renderers in examples

Author: geraintluff

demos/schemas/simple-post.json

@@ -3,7 +3,11 @@
 	"type": "object",
 	"properties": {
 		"title": {"type": "string"},
-		"content": {"type": "string"}
+		"content": {"type": "string"},
+		"mood": {
+			"enum": ["happy", "neutral", "grumpy"],
+			"default": "neutral"
+		}
 	},
 	"required": ["title", "content"]
 }

php-site/index.html

@@ -143,11 +143,12 @@ <h4>Easy to use</h4>
 						.custom-content {
 							padding: 0.4em;
 						}
-						.custom-unknown-key {
-							font-weight: bold;
+						.custom-othertitle {
 							padding-left: 0.4em;
+							font-weight: bold;
+							font-size: 0.9em;
 						}
-						.custom-unknown {
+						.custom-other {
 							padding-left: 3em;
 						}
 					</style>
@@ -161,6 +162,15 @@ <h4>Customisable</h4>
 		var result = '&lt;div class=&quot;custom-post&quot;&gt;';
 		result += '&lt;div class=&quot;custom-title&quot;&gt;' + context.renderHtml(data.property('title')) + '&lt;/div&gt;';
 		result += '&lt;div class=&quot;custom-content&quot;&gt;' + context.renderHtml(data.property('content')) + '&lt;/div&gt;';
+		// Render any other documented properties in the schema
+		data.properties(data.schemas().knownProperties(['title', 'content']), function (key, subData) {
+			if (subData.defined() || !subData.readOnly()) {
+				result += '&lt;div class=&quot;custom-othertitle&quot;&gt;' + Jsonary.escapeHtml(key) + ':&lt;/div&gt;';
+				result += '&lt;div class=&quot;custom-other custom-other-' + Jsonary.escapeHtml(key) + '&quot;&gt;'
+				result += context.renderHtml(subData);
+				result += '&lt;/div&gt;'
+			}
+		});
 		return result + '&lt;/div&gt;';
 	},
 	filter: function (data, schemas) {
@@ -192,7 +202,7 @@ <h4>Customisable</h4>
 							targetElementEditable: 'example-target-embed-customise-editable'
 						});</script>
 					</div>
-					<p>It's worth noting that this particular example would not adapt to changes in the schema.  However, you can customise the appearance without losing flexibility, and it's actually pretty simple to do.</p>
+					<p>It's worth noting that the renderer here dynamically adapts to properties in the schema.  The "mood" property is defined in the schema, and the renderer displays it when needed.</p>
 					<!--<p>See "<a href="flexible-renderers.html">Flexible Renderers</a>" for more details.</p>-->
 				</div>
 

test/json/schemas/site

@@ -24,7 +24,7 @@
 			"title": "Website section",
 			"type": "object",
 			"properties": {
-				"title": {"title": "Title"},
+				"title": {"title": "Title", "type": "string"},
 				"tabs": {
 					"title": "Tabs",
 					"oneOf": [

test/renderers/site.js

@@ -7,11 +7,13 @@ Jsonary.render.register({
 			result += context.renderHtml(subData);
 			result += '</div>';
 		});
-		// Render other properties with class "site-section site-section-????"
+		// Render other documented properties with class "site-section site-section-????"
 		data.properties(data.schemas().knownProperties(['title', 'topContent']), function (key, subData) {
-			result += '<div class="site-section site-section-' + Jsonary.escapeHtml(key) + '">';
-			result += context.renderHtml(subData);
-			result += '</div>';
+			if (subData.defined() || !subData.readOnly()) {
+				result += '<div class="site-section site-section-' + Jsonary.escapeHtml(key) + '">';
+				result += context.renderHtml(subData);
+				result += '</div>';
+			}
 		});
 		return result + '</div>';
 	},