In this editor you can write your arbitrary HTML content, which will be inserted in to the component output at runtime. This HTML will be added to the DOM prior to your init and draw scripts so it is safe to reference from those scripts.
In this editor you can write your initialization javascript function. This function will fire once the component is loaded and can manipulate the html in your HTML Script. This happens before any data is passed to the component.
The inputs to your init script are the following.
| self : | A pointer back to the component exposing design studio standard functions. self.$() provides JQuery access to the main component Div |
|---|---|
| options : | A generic options string allowing you to pass in data from the rest of the dashboard. If you want to pass in a complex structure as JSON, it's up to you to use JSON.parse() to convert it back into an object |
| (Return Value) : | You can return an Object from your function containing any arbitrary data you have initialized. It will be passed in as an input to the draw function. |
In this editor you can write your draw javascript function. This function will fire after every property change or bound data change.
The inputs to your draw script are the following.
| self : | A pointer back to the component exposing design studio standard functions. self.$() provides JQuery access to the main component Div |
|---|---|
| data : | A pointer to the simplified data structure. See Data tab for structure. |
| metaData : | A pointer to the simplified meta data structure. See Meta Data tab for structure. |
| userData : | A pointer to the object you returned from the initScript. This object is persisted between calls to draw script and can be used to store persistent state between invocations |
| options : | A generic options string allowing you to pass in data from the rest of the dashboard. If you want to pass in a complex structure as JSON, it's up to you to use JSON.parse() to convert it back into an object |
The primary data structure passed to your functions is the modified bound data in row format. You can see a sample of your bound data here.
The second most important data structure passed to your functions is the modified meta data also best demonstrated with an example.
There is one property of this component that allows you to inject static HTML into the rendering process. Your HTML will be added to the DOM model prior to the invocation of any custom scripts you write. Therefore you can rely on your html being present and accessible via JQuery selectors in your scripts.
There are two properties of this component that allow you to inject dynamic logic into the rendering of the component, (Init Script and Draw Script).
Init Script is called once when the component starts up. You can return any data structure from this function and it will be passed to the draw script allowing you to maintain state. The init script does not receive any information about bound data. It should only concern itself with static initializations that will be the same regardless of the structure of any bound data. I.E. Headings, borders, paddings, but nothing pertaining to the data.
The Draw Script is called every time the components properties are refreshed, i.e. any time the bound data changes or any time one of it's other properties are manipulated at design or runtime. All of your logic that renders the data should take place here.
Your scripts need to be valid Javascript in order to work. If your scripts cause any errors they will be stopped and an error will draw.