Rich Table API & TreeTable API

Rich Table is type of a transient field that can be added to the screen. It can hold rows with texts, images and buttons.

API

Static methods

- createTextCell(String text) Creates a cell object with the specicifed text (can be XHTML formatted), so it can be used in a rich table row. The "value" attribute of the cell holds the text (XHTML).
- createExternalImageCell(String imageUrl) Creates a cell object with an image from the given URL, so it can be used in a rich table row. The "value" attribute of the cell holds the URL of the image.
- createImageCell(byte[] imageData) Creates a cell object with an image from the given data (i.e. image field value), so it can be used in a rich table row. The "value" attribute of the cell holds the data of the image as a byte array (byte[]).
- createButtonCell(String textEnglish, String textTurkish, String commonFunctionName) Creates a cell object with a button inside with given turkish and english text and the common function name to execute when clicked, so it can be used in a rich table row. The "value" attribute of the cell holds the text of the button.
- createColumn(String id, String nameEnglish, String nameTurkish, String type) Creates a column with the given id, english and turkish name and a type, so it can be used in a rich table. Type can be one of 'TEXT', 'BUTTON' or 'IMAGE'. Given id will be used on column operations on the rich table. Has the attributes: "id", "nameEnglish", "nameTurkish", "type".
- createRow(String id, List cells) Creates a row with the given id and a list of cell objects, so it can be added to a rich table. Has the attributes: "id", "cells", "table" (null if not added to a table yet). Has the method: getCell(int index) to get cell object by the given index.

Table Methods

- clearColumns() Removes all columns from the rich
- clearRows() Removes all rows from the rich
- addColumn(Column column) Adds the given column object to the rich
- removeColumn(String id) Removes the column with the given id from the rich if it exists.
- insertRow(int index, Row row) Inserts the given row object to the rich to the given index. Index starts from zero (0). The cell count in the row should match the column count of the table.
- addRow(Row row) Adds the given row to the rich to the end. The cell count in the row should match the column count of the table.
- getRow(String id) Returns the row with the given id from the rich if it exists. Returns null if a row with the given id is not found.
- removeRowById(String id) Removes the row from the rich with the given id if it exists.
- removeRowByIndex(int index) Removes the row from the rich with the given index if it exists. Index starts from zero (0).
refresh() Refreshes the rich table.

Example

Add 5 columns with their types to the rich table with unique name rich_table on the screen:

var nameColumn = createColumn("name", "Name", "İsim", "TEXT");
var valueColumn = createColumn("value", "Value", "Değer", "TEXT");
var statusColumn = createColumn("status", "Status", "Durum", "IMAGE");
var buyColumn = createColumn("buy", "Buy", "Satın Al", "BUTTON");
var sellColumn = createColumn("sell", "Sell", "Sat", "BUTTON");

var table = getComponent("rich_table");
table.addColumn(nameColumn);
table.addColumn(valueColumn);
table.addColumn(statusColumn);
table.addColumn(buyColumn);
table.addColumn(sellColumn);

A function named populate to fill the table with random data:

function populate() {
    var formatter = new java.text.DecimalFormat("#0.00");
    var r = new java.util.Random();
    var rise = getComponent("image_rise").value;
    var fall = getComponent("image_fall").value;

    var table = getComponent("rich_table");
    table.clearRows();
    
    var risen = false;
    foreach (x : 5) {
        var name = createTextCell("<span style='font-weight: bold;'>" + "Stock " + x + "</span>");
        risen = r.nextBoolean();
        
        var value = createTextCell("");
        var status = createImageCell(rise);
        var valueString = formatter.format(r.nextDouble() * 100);
        if (risen) {
            value = createTextCell("<span style='font-weight: bold;color: #02F20D;'>" + valueString + "</span>");
            status = createImageCell(rise);
        } else {
            value = createTextCell("<span style='font-weight: bold;color: red;'>" + valueString + "</span>");
            status = createImageCell(fall);
        }
    
        var buy = createButtonCell("Buy", "Satın Al", "buy");
        var sell = createButtonCell("Sell", "Sat", "sell");
        
        var cells = {name, value, status, buy, sell};
        
        var row = createRow("row" + x, cells);
        table.addRow(row);
    }
}

Common functions for the cells with button:

function buy() {
    var cellValue = clickedCell.row.getCell(0).value;
    info("Purchase of \"" + cellValue + "\" successful!", "\"" + cellValue + "\" satın alma işlemi başarılı!");
}

function sell() {
    var cellValue = clickedCell.row.getCell(0).value;
    info("Sell of \"" + cellValue + "\" successful!", "\"" + cellValue + "\" satış işlemi başarılı!");
}

TreeTable

In order to use TreeTable, Drag TreeTable Component from Toolbox to layout.

TreeTable Methods

You can use RichTable methods except createRow. To create row following method is used

- createTreeRow(String id, String parentId, List cells) .

To make a parent / child row relation, leave parentId as empty String for parentRow

 var row1 = createTreeRow("parentRow", "", parentCells);
 var row2 = createTreeRow("childRow", "parentRow", childCells);

TreeTable Example

 var treeTable = getComponent("tree_table");
 treeTable.clearRows();

 var parentNameCell = createTextCell("Parent");
 var childNameCell = createTextCell("Child");

 var parentCells = {parentNameCell};
 var childCells = {childNameCell};
 var row1 = createTreeRow("parentRow", "", parentCells);
 var row2 = createTreeRow("childRow", "parentRow", childCells);
 treeTable.addRow(row1);
 treeTable.addRow(row2);