{"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":"CustomDataCellExample","children":{"Model":{"name":"Model","type":"apogee.Folder","children":{"testDataComponent":{"name":"testDataComponent","type":"apogee.Folder","children":{"input":{"name":"input","type":"apogee.JsonMember","updateData":{"argList":[],"functionBody":"return displayTitle;","supplementalCode":""}},"data":{"name":"data","type":"apogee.JsonMember","updateData":{"data":"This is the initial value."}}},"childrenNotWriteable":true},"displayTitle":{"name":"displayTitle","type":"apogee.JsonMember","updateData":{"data":"Demo Custom Data Cell"}},"displayOutput":{"name":"displayOutput","type":"apogee.JsonMember","updateData":{"argList":[],"functionBody":"return testDataComponent.data;","supplementalCode":""}}}}}},"components":{"Model":{"type":"apogeeapp.PageComponent","data":{"doc":{"type":"doc","content":[{"type":"heading1","content":[{"type":"text","text":"Custom Data Cell"}]},{"type":"paragraph","content":[{"type":"text","text":"A Custom Data Cell is similar to a Custom Cell except that it has a internal data field that holds a value for the cell. It is similar to the relation between an "},{"type":"text","marks":[{"type":"italic"}],"text":"Action Form"},{"type":"text","text":" and a "},{"type":"text","marks":[{"type":"italic"}],"text":"Data Form"},{"type":"text","text":"."}]},{"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":"Data Value - This is the value for the cell, with a two way link to the display."}]},{"type":"listItem","content":[{"type":"text","text":"Input Code, Input Private - This formula is used to define input for constructing the display, as opposed to the "},{"type":"text","marks":[{"type":"italic"}],"text":"Data Value"},{"type":"text","text":" which is the data that populates the display."}]},{"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 data component."}]},{"type":"heading2","content":[{"type":"text","text":"Example Custom Data Cell"}]},{"type":"paragraph","content":[{"type":"text","text":"This cell is a simple text editor. The title is obtained from the cell "},{"type":"text","marks":[{"type":"italic"}],"text":"displayTitle"},{"type":"text","text":". The cell "},{"type":"text","marks":[{"type":"italic"}],"text":"displayOutput"},{"type":"text","text":" shows how to read data from the "},{"type":"text","marks":[{"type":"italic"}],"text":"testDataComponent"},{"type":"text","text":"."}]},{"type":"apogeeComponent","attrs":{"name":"testDataComponent","id":0,"state":""}},{"type":"paragraph","content":[{"type":"text","text":"The following cell is used to create the display above. In this case it is the title for the display."}]},{"type":"apogeeComponent","attrs":{"name":"displayTitle","id":0,"state":""}},{"type":"paragraph","content":[{"type":"text","text":"The following cell shows how to read data from the custom data component."}]},{"type":"apogeeComponent","attrs":{"name":"displayOutput","id":0,"state":""}},{"type":"paragraph"},{"type":"paragraph","content":[{"type":"text","text":" "}]}]}},"children":{"testDataComponent":{"type":"apogeeapp.CustomDataCell","resource":{"html":"<h1 id=\"testDataComponent_heading\">Title</h1>\n<textarea id=\"testDataComponent_textarea\"></textarea>","css":"#testDataComponent_textarea {\n    width: 400px;\n    height: 300px;\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.title = 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.title = document.getElementById(\"testDataComponent_heading\");\r\n        this.textarea = document.getElementById(\"testDataComponent_textarea\");\r\n        \r\n        //we need to trigger a start to edit mode\r\n        //the admin input argument provides the function to start edit mode, which is\r\n        //the same mode used for other edit cells like the data cell.\r\n        this.textarea.oninput = () => admin.startEditMode();\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 function passes in the data to create the display, which is the \r\n    //data we creared with the input code. In this case we\r\n    //are just setting the title. Note that this is distinct from the\r\n    //data value of the display, which is set in setData below.\r\n    setDisplayData(data) {\r\n        this.title.innerHTML = data;\r\n    }\r\n\r\n    //This is the data content of the display. It is set from the data \r\n    //shown in the Data Value view.\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        if(this.textarea) {\r\n            return this.textarea.value;\r\n        }\r\n        else {\r\n            return \"\";\r\n        }\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":{"Form":{"isViewActive":true},"Data Value":{"height":280,"isViewActive":false},"Input Code":{"height":7000,"isViewActive":false},"Input Private":{"isViewActive":false},"HTML":{"height":7000,"isViewActive":false},"CSS":{"height":7000,"isViewActive":false},"uiGenerator(mode)":{"height":7000,"isViewActive":false}}}}},"displayTitle":{"type":"apogeeapp.JsonCell","dataView":"Colorized","viewState":{"childDisplayState":{"views":{"Data":{"isViewActive":true,"height":280},"Formula":{"isViewActive":false},"Private":{"isViewActive":false}}}}},"displayOutput":{"type":"apogeeapp.JsonCell","dataView":"Colorized","viewState":{"childDisplayState":{"views":{"Data":{"isViewActive":true,"height":280},"Formula":{"isViewActive":true,"height":7000},"Private":{"isViewActive":false}}}}}},"viewState":{"childDisplayState":null,"treeState":1,"tabOpened":true,"tabShowing":true}},"viewState":{"treeState":1}}},"viewState":{"treeState":1}}