{"fileType":"apogee app js workspace","version":"0.60","references":{"viewState":{"treeState":1,"lists":{"es module":{"treeState":0},"js link":{"treeState":0},"css link":{"treeState":0}}}},"code":{"model":{"fileType":"apogee model","version":0.3,"name":"CustomCellExample","children":{"Model":{"name":"Model","type":"apogee.Folder","children":{"testComponent":{"name":"testComponent","type":"apogee.JsonMember","updateData":{"argList":[],"functionBody":"return initialValue;","supplementalCode":""}},"initialValue":{"name":"initialValue","type":"apogee.JsonMember","updateData":{"data":"This is the initial value for the table."}},"sentData":{"name":"sentData","type":"apogee.JsonMember","updateData":{"data":""}}}}}},"components":{"Model":{"type":"apogeeapp.PageComponent","data":{"doc":{"type":"doc","content":[{"type":"heading1","content":[{"type":"text","text":"Custom Cell"}]},{"type":"paragraph","content":[{"type":"text","text":"You can use the "},{"type":"text","marks":[{"type":"italic"}],"text":"Custom Cell"},{"type":"text","text":" to create your own custom cell right in the document. There is also a "},{"type":"text","marks":[{"type":"italic"}],"text":"Custom Data Cell"},{"type":"text","text":" which we demonstrate in a separate tutorial."}]},{"type":"paragraph","content":[{"type":"text","text":"The custom cell has several different views:"}]},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"text","text":"Display - This is the custom display you define in the other views."}]},{"type":"listItem","content":[{"type":"text","text":"Input Code, Input Private - This is like the formula for the cell. This creates the value that is shown in your display. The display itself is defined in the other views."}]},{"type":"listItem","content":[{"type":"text","text":"HTML - This is the HTML that is used for your display."}]},{"type":"listItem","content":[{"type":"text","text":"CSS - This is the CSS that is used for your display."}]},{"type":"listItem","content":[{"type":"text","text":"uiGenerator() - This is code that creates the display."}]}]},{"type":"paragraph","content":[{"type":"text","text":"The example below illustrates a simple custom component."}]},{"type":"heading2","content":[{"type":"text","text":"Example Custom Cell"}]},{"type":"paragraph","content":[{"type":"text","text":"This cell has a simple text area and a button to send the data. The initial text area content is taken from the cell "},{"type":"text","marks":[{"type":"italic"}],"text":"initialValue"},{"type":"text","text":" and, upon pressing send, the contents are sent to the cell "},{"type":"text","marks":[{"type":"italic"}],"text":"sentData"},{"type":"text","text":"."}]},{"type":"apogeeComponent","attrs":{"name":"testComponent","id":0,"state":""}},{"type":"paragraph","content":[{"type":"text","text":" This is a cell we will use to populate the initial data in the cell."}]},{"type":"apogeeComponent","attrs":{"name":"initialValue","id":0,"state":""}},{"type":"paragraph","content":[{"type":"text","text":" This cell receives the output on pressing send."}]},{"type":"apogeeComponent","attrs":{"name":"sentData","id":0,"state":""}},{"type":"paragraph","content":[{"type":"text","text":" "}]}]}},"children":{"testComponent":{"type":"apogeeapp.CustomCell","resource":{"html":"<textarea id=\"testComponent_textarea\"></textarea><br>\n<button id=\"testComponent_button\">SEND</button>","css":"#testComponent_textarea {\n    width: 400px;\n    height: 300px;\n    margin: 10px;\n}\n#testComponent_button {\n    margin: 10px;\n}","uiCode":"//We must return a javascript object with the given functions below. Here we\r\n//choose to create that using a class, which we immediately instantiate.\r\nvar SampleUiGeneratorClass = class {\r\n\r\n    //Standard constructor\r\n    constructor() {\r\n        this.button = null;\r\n        this.textarea = null;\r\n        \r\n        //this is added just to help us debug\r\n        __customControlDebugHook();\r\n    }\r\n    \r\n    //We can do any added initialization here\r\n    //init() {\r\n    //}\r\n\r\n    //This will be called when the output element is loaded into the DOM\r\n    onLoad(outputElement, admin) {\r\n        this.button = document.getElementById(\"testComponent_button\");\r\n        this.textarea = document.getElementById(\"testComponent_textarea\");\r\n        \r\n        this.button.onclick = () => {\r\n            var data = this.textarea.value;\r\n            admin.getCommandMessenger().dataCommand(\"sentData\",data);\r\n        }\r\n    }\r\n    \r\n    //This will be called when the output element is removed from the DOM\r\n    //onUnload(outputEelement, admin) {\r\n    //}\r\n\r\n    //This is called with the data value from the \"Input Code\" section. \r\n    //It is first called _after_ onLoad.\r\n    setData(data, outputElement, admin) {    \r\n        if(this.textarea) {\r\n            this.textarea.value = data;\r\n        }\r\n    }\r\n    \r\n    //This is called to retrieve data from the cell, if we are using the\r\n    //built in edit capabilities\r\n    //getData(outputElement, admin) {\r\n    //}\r\n    \r\n    //This is called to check if closing the cell should be delayed\r\n    //isCloseOk(outputElement, admin) {\r\n    //}\r\n    \r\n    //This is called when the component is destroyed\r\n    //destroy() {\r\n    //}\r\n    \r\n}\r\n\r\nreturn new SampleUiGeneratorClass();"},"destroyOnInactive":false,"viewState":{"childDisplayState":{"views":{"Display":{"isViewActive":true},"Input Code":{"height":7000,"isViewActive":false},"Input Private":{"height":7000,"isViewActive":false},"HTML":{"height":7000,"isViewActive":false},"CSS":{"height":7000,"isViewActive":false},"uiGenerator()":{"height":7000,"isViewActive":false}}}}},"initialValue":{"type":"apogeeapp.JsonCell","dataView":"Text Data","viewState":{"childDisplayState":{"views":{"Data":{"isViewActive":true,"height":7000},"Formula":{"isViewActive":false},"Private":{"isViewActive":false}}}}},"sentData":{"type":"apogeeapp.JsonCell","dataView":"Text Data","viewState":{"childDisplayState":{"views":{"Data":{"isViewActive":true,"height":7000},"Formula":{"isViewActive":false},"Private":{"isViewActive":false}}}}}},"viewState":{"childDisplayState":null,"treeState":1,"tabOpened":true,"tabShowing":true}},"viewState":{"treeState":1}}},"viewState":{"treeState":1}}