Element Editor - Properties
Add or modify properties (variables) that the user of your element can then modify in the Properties tab of the Elements Menu in openElement.

These values will be accessible in the element’s HTML code or using JavaScript. 

You will find macros that generate the code for each property you’ve created in: 
 
'HTML' -> 'Properties' 
Example: 
<oe:property:write name="Property1"/> 
 
'Scripts' → 'Design' ->'Properties' (Set property’s 'Share Value' to 'JS' )  
Example: 
$(function(){ EG30dce908.Init(); }); 
var EG30dce908 = { 
Init: function() { 
if (OEConfEG30dce908 === undefined) return; 
var allElements = OEConfEG30dce908; 
for(var ID in allElements) { 
var $el = $('#'+ID); // The element's main <div> tag 
var properties = allElements[ID]; // element's available properties for JS 
this.InitElement(ID, $el, properties); 
}, 
InitElement: function(ID, $el, properties) { 
// YOUR CODE HERE 
var prop1 = properties.Pstring; // Example: obtain user property value 
// Use design macro for more samples  
}; 
 
Add 
Click to add a property for your element. Choose a Type (String, Integer, Float, Boolean, Color, LinkPage, LinkFile, LocalizableString, etc.) and assign text or value if property is null.

Behavior – Assign behaviors for the properties 
Read Only – True, False 
Read only = True will make the property un-editable by the user. 
Share Value – Js, Php, All 
Indicate if the value must be exported to be used with JavaScript or PHP 
Update Mode – Element, Page, ElementwithCSS, OnlyCSS, None 
How the page should be updated after each value change. 
Visible – True, False 
Should changes made by the user be visible or invisible?
 
Design 
Property Name 
Assign a name to identify this resource in the code. Name must be unique. 
User Information 
Enter information about the property for users (i.e. Name, Description, Category) 
 
Format  
Value Format 
Select the value’s format or type (e.g. String, Integer, Float, Boolean, Color, LinkPage, LinkFile, LocalizableString, etc.) 

Basic formats
- String, Integer, Float, Boolean 
OE-specific formats
- Color: RGB color (string) 
- LocalizableString: Multilanguage dictionary of text strings,  
a pair of values - e.g. ('EN':'My text') - for each of the website's languages. 
- LocalizableHtml: Multilanguage (string) dictionary of HTML strings,  
a pair of values - e.g. ('EN':'<b>My Text</b>') - for each of the website's languages. 
Enables editing an HTML-formatted string value. 
- LinkPage: Multilanguage dictionary of links to site pages,  
a pair of values for each of the website’s languages. 
- LinkFileXX: Multilanguage dictionary of links to files, 
a pair of values for each of the website’s languages. 
- Enumeration: an Integer value from a list of values with corresponding names 
- ElementOfPage: List of strings, where each value corresponds to a page element's ID

Example of JSON structure of properties shared via the page's "var" file (e.g. index(var).js): 

{"UniqueElementName": 

"Pstring":"text", 
"Pinteger":10, 
"Pfloat":1.2, 
"Pboolean":true, 
"Pcolor":"255, 128, 0", 
"Plocalizablestring":{"Items":{"DEFAULT":"text","FR":"text"}}, 
"Plocalizablehtml":{"Items":{"DEFAULT":"<b>text</b>","FR":"<b>text</b>"}}, 
"Plinkpage":{"Target":null,"Links":{"Items":{"DEFAULT":"donate.htm","FR":"donate.fr.htm"}}}, 
"Plinkfileimage":{"Target":null,"Links":{"Items": {"DEFAULT":"Files/Image/Logo/Logo1.png","FR":"Files/Image/Logo/Logo1.png"}}}, 
"Penumeration":0, 
"Pelementofpage":{"List":["WE5a9f56bcc4","WE5a9f56bcc5"]}