Custom Data Component

This is a custom component that stores a data value

A Custom Data Component is very similar to the Custom Component except it stores data created in our UI.

The Custom Data Component has the following views. This is the same as Custom Component except with one addition, the Data Value view.

• Display - This shows the HTML element which the user populates in some of the other views below.

• Data Value - This is where we can view the data stored from this control.

• Input Code - This is the formula for the table. The value returned from this function will be included the data displayed in the user defined display. For example, if the user makes this display a simple text area, this would typically be the text placed in the text area. (Note that unlike the Custom Component, this is not the only data passed in to setData. See below.)

• Input Private - This is the private space associated with the input code above.

• HTML - This is HTML that is placed in the HTML element on its creation. Note that IDs on the elements here should be unique for the entire page.

• CSS - This is CSS that is appended to the page. This can be used to style the element. Note that style classes should be unique for the entire page.

• uiGenerator() - This is a function the user codes which should return a UI generator object. That is an object that contains methods shown here to give functionality to the display for this component.

• Notes - These are notes the user can add for the component.

Reference the Custom Components page for a reference of what is in the UI Generator object we use to define our user interface.

Example Workspace

We will modify our Custom Component example only slightly to demonstrate the Custom Data Component.

Click here to open the Example Workspace.

This workspace contains three tables, shown below.

• initialValue - This is a plain data table containing some random text to be used by our test component.

• testDataComponent - This is an example custom data component, described below.

• copyOfSavedData - This is a plain data table which shows the data saved on testDataComponent, illustrating how to access it remotely.

The custom data component, testDataComponent, keeps the text area from the previous example, but it removes the button.

In the custom data component, the save bar can be used instead of adding our own button. When the save button is pressed, the component will automatically save the data, obtained from the getData method we define, and stores it. If the cancel button is pressed, the previous data is restored.

To use the save button, we must trigger it. This can be done, for example, when we start to edit our data in the form we create.

Programming the Test Component

The following screen shots show the code added to the custom component, testDataComponent.

This is the HTML for our component. It includes just a text area.

This is the CSS to style our HTML. For simplicity we are just making the text area fixed in size. (Note that is we want to react to size changes of the component, we could have defined an onResize method.)

The main code for the example is the UI Generator. This is just an object that has some callback functions in it. It is convenient to define this as a class and then return an instance of it, as we did below.

In the onload method, we loaded the text area from the HTML. We also add an event handler to start edit mode (bringing up the save bar) if we edit the data.

An important point here is that we can NOT access other table from this code. This is not code in our model. This is just UI code. We can however get data from our model by defining the setData function.

The setData function here is slightly different from the Custom Component. In the Custom Component, the argument data is the output of the "formula", or the function we defined in the input code view. Here in the Custom Data Component it is different. It is an object containing the result of the input code and also the value of the stored data for this table.

There is a call to the console log to show what the data looks like. You can see the result by viewing the javascript console for your browser.

We have also added a getData function, which was not relevant for the Custom Component. This returns the data in the text area. It is used when we press the save button on the save bar.

There is one other notable item here in the constructor. We added a call to __customControlDebugHook(). This doesn't have any action. It references a function in our static code, in the source file called "debugHook.js". We put it there so we can set a breakpoint in our debugger to debug our code. This is optional.

Below is the input code. This is equivalent to the formula in a data table. It is a function that returns a value that will be passed into our UI generator code with the setData function. Note however that this is slightly different than in the Custom Component, as mentioned above. Here in the Custom Data Component, the data argument passed into the setData function includes the result of our input code and the value that has currently been saved for this component.

In this case we just return the value in the initial value table. In our model we will use this to set the value in our test area. For one thing, it sets the initial value of the table.

The input code will execute any time we update the tables it depends on. In this case that means if we change the value in the initialValue table, it will overwrite the data in the text area. (That may not be the behavior we want. But this is just an illustration of how the component works. It can be coded differently.)

Here is our result for the Display view. We have the simple form as we described.

There is one more view of interest to our example, Data Value. Below we show our value in this view, after we have edited the text in the text area and pressed save. This is where the data is stored.

Also, this is the data we referenced in our table copyOfSavedData.

The following code is in the Formula for copyOfSavedData to access this value from the testDataComponent.

return testDataComponent.data;

Compound Component

Just like the Form Data Table, the custom component is a compound component, meaning it is really a folder containing multiple tables. In this case, it is the following tables:

• input - This is the input data we use for the component. It is the result of the function we defined in the input code view.

• data - This is the stored value for the component.