August 16, 2012
David Book

The sample demonstrates how to add a simple JSON property to a plugin using the /index.php page
that ships with the plugin package created by the Plugin Creator Tool. 


1) 	Open the index.php file for a plugin. 
	This will be much easier if this is already installed on a self hosted box 
	somewhere so you can test it? Anyway, open /index.php for a test plugin. 

2) 	Copy and Paste this HTML snippet in to the /index.php file.
	Add it under the nickname property section (see notes in HTML of index.php):

<div class='cpExpandoBox colorLightBg'>
    <a href='#' onClick="fnExpandCollapse('box_myCustomProperty');return false;"><img src='<?php echo APP_URL;?>/images/arr_right.gif' alt='arrow' />Custom Property</a>
    	<div id="box_myCustomProperty" style="display:none;">
                        
        	<div style='padding-top:10px;'>
            	<b>Enter a Value</b><br/>
                <input type="text" name="json_myCoolProperty" id="json_myCoolProperty" value="<?php echo fnGetJsonProperyValue("myCoolProperty", $jsonVars);?>" />
            </div>
                        
            <div style='padding-top:5px;'>
            	<input type='button' title="save" value="save" class="buttonSubmit" onClick="saveAdvancedProperty('saveResult_myCustomProperty');return false;" />
                <div id="saveResult_myCustomProperty" class="submit_working">&nbsp;</div>
            </div>
            
     </div>    
</div>

3) 	Save, Upload to your server. Load this plugin in an app, you'll see your new "Custom Property" 
	section to manipulate. Enter value, click Save, cool eh!
	
Comments:

--	The "box" around the section for your custom value (the one that expands and collapses) is called 
"box_myCustomProperty" in the HTML. id="box_myCustomProperty" The link that expands / collapses this 
box has an onClick method to open / close the box. See onClick="fnExpandCollapse('box_myCustomProperty') 
The fnExpandCollapse method is included in the index.php page near the top.

--	The HTML input element has id="json_myCoolProperty" Because it has "json_" appended to the start of
it's name (and id) the /save_AJAX.php file knows that you want this value included in the JSON data when
the user clicks Save.

--	The HTML input element uses value="<?php echo fnGetJsonProperyValue("myCoolProperty", $jsonVars);?>"
	This means that when the page loads (the index.php page), the value for "myCoolProperty" will show in the
	entry box IF it exists in the previously saved JSON. In other words, the value the person entered 
	then saved. 

-- 	The Save button uses: onClick="saveAdvancedProperty('saveResult_myCustomProperty');return false;" The
	saveAdvancedProperty() method (also in the index.php file higher up) takes one parameter / argument. The
	name of the HTML element to show the save results in. In this case, we're saying "save these values then
	put the results in the "saveResult_myCustomProperty" box. This is the <div> we created in the HTML under
	the save button in this section. save_AJAX.php returns the results of the save.