Exercise8.md

#Exercise 8: Add configuration to ingredient picker We are now pretty much done, but lets add a bit of flexibility to the ingredients picker. In this simple example, we will simply turn off the quantity field.

##Edit the package.manifest Add a prevalues collection to the property editor:

propertyEditors:[
	{
		name: "Ingredient Editor",
		alias: "My.IngredientEditor",
		editor:{...},
		prevalues: {
		    fields:[
		        {
		           label: "Hide quantity field",
		           description: "Disables adding an ingredient quantity",
		           key: "hideQuantity",
		           view: "boolean"
		        }            
		    ]
		}
	}
]

Restart the application, open the ingredients datatype and you will now see the option to turn quantity on/off - turn it off by checking the box.

##Edit the view Examine the model as raw json in the view like so:

{{model | json }}

This will show us that model.config.hideQuantity is equal to “1”

So, we can now use this to disable the html elements containing the quantity field with ng-if:

<td ng-if="model.config.hideQuantity !== '1'">
	<input type="text" ng-model="ingredient.quantity"/> 
</td>

##Extra assignment Try adding another prevalue field, but set its view to “/app_plugins/ingredient/editor.prevalue.html” - create a file in that location and see how you could easily add your own configuration with any kind of html and controller to back it.

You even have the same $scope.model to bind your values to, experiment and see how this works the exact same way as using property editors.