The data grid component

The data grid component


The other day i started working on a grid component for the forms. I have thought long and hard about how to solve some of the problems of unforeseen data. I have added array capabilities for fields if that is required, but it is not a very flexible solution. The filtering assistant of the data view is an example of this functionality.

Then i realized that a grid component could solve many of the issues so i started working on one. The image below illustrates a grid component in the visual designer, very early in the development:

Like everything else the idea is the possibility to create a fully working grid without writing any code. There will be limitations in functionality, but it is doable.

The image below shows the grid component in the visual designer after some more development

Now we are starting to get somewhere, but a fully fletched grid needs a lot of functionality that will take time to develop. One such functionality is to link the system's picklist component to the grid, this allows some suggestions to show up when you type something in a textbox. Like the image below shows. I designed a new picklist while at it as the old one had a few years on it's neck. Both the old and new picklists are still in use by the system. The image below shows an executed grid with the new picklist.

Columns and rows can be defined in code as well as without code. The grid on the image above has been defined without code, how to do that is shown in the property window below.


As the image shows we have Column headers, Row headers and Column names. Column names are aliases for the columns to be used from code. It is easier to remember the alias 'name' than the number of the column in which to find the name. These comma separated lists specify the column and row headers as well as the number of columns and rows. If you need a thousand rows and don't need them named then just type 1000 in the box. You can also number the rows by typing the number in brackets, same as the javascript array. For example [50] will create rows 1-50 with row headers. The same goes for columns.

As i mentioned earlier regarding the picklist, it is possible to register functions on columns. The only function at the moment of writing this post is picklists, but there are plans to add various calculation functions as well, maybe even the possibility to run code. I have not decided on that part yet.

When reading it's value the grid generates and returns an array of objects that can then sbe tored in the record. When setting the grid's value, the grid is populated accordingly. This makes the grid fully transparent to the form load process, and makes it easy to use from code.


Kommentarer

Skicka en kommentar

Populära inlägg i den här bloggen

The form component

Bild
The form component Forms are one of two main components of the tool. It allows the entry of any type of data. Forms are created in a built-in visual designer, my intention was to make it WYSIWYG but i'm not quite there yet. HTML is a bit difficult to get right. Below is a screenshot of the editor with the 'New incident' form loaded. In the editor you can add most standard HTML elements such as text boxes, list boxes and buttons. You can also add components that are built for this tool only, such as panels, data views and tree views. This is where the tools shines: You can add complex components not native to HTML with little or no code requirements. Many methods are pre-built, for example the form submit. You can add this method to a button click by simply setting it's submit property to true. The same thing can be accomplished by code if desired. There are scripting capabilities for many types of events.  Below is a screenshot of the form in the editor when executed on...
Läs mer

The cache component

The cache component Many of the features of this platform is enabled by the local cache component. It is the component that handles most of the communication with the server. It does currently not handle all communications as it lacks the features for specific requests. When data is requested, the component first search it's local store before contacting the server. Depending on the nature of the request, it may decide that server contact is not necessary and returns data from the local store only. If some data is found locally it may ask the server for more before responding to the request. This method keeps server load as low as possible while also making the system respond quicker to requests. When a record is updated on the server a short message is dispatched to all it's clients, if a client has this record in it's store it will be flagged as outdated, though it will only be refreshed when requested. This way the cache component knows which data is up to date. When the...
Läs mer