Overview

Column widgets are used for defining and customizing structured data. They are similar to the data types in MySQL, but are more powerful in that functions can be attached.

Labii ELN & LIMS currently provides these widgets:

Subtitle

The Subtitle widget does not store any data. It adds a subtitle to the form.

Text

Use this widget to edit text values. There is no length limit on how much text you can provide.

​​​

MultilineText

Use this widget to edit text with multiple lines.

​​​

RichText

Use this widget to edit text with formatting. It supports HTML code as the default value.

Number

Use this widget to edit the numeric value. The value can be positive (+), negative (-), integer, or float.

​​​

Configuration:

{
    "constraints": { # (optional) - the additional constraints to the value.
        "min": 0, # (optional) - the allowed minimal value
        "max": 100 # (optional) - the allow maximal value
    }, 
    "warnings": { # (optional) -  flag the value when all conditions are met.
        "gte": 0, # (optional) - greater than or equal to
        "gt": 0, # (optional) - greater than
        "lte": 100, # (optional) - less than or equal to
        "lt": 100, # (optional) - less than
    }, 
    "format": { # the number in the wNumb format. 
        "mark": '.',
        "thousand": ',',
        "prefix": '$'
    } # Learn more at https://refreshless.com/wnumb/
}

Date

Use this widget to edit the date value. A date picker is provided to select the date.

​​​

Time

Use this widget to pick a time. Currently, Labii supports time in 30-min intervals.

​​​

DateTime

Use this widget to pick a date and time. This widget is a combination of the Date and Time widget.

​​​

Default value:

{
    "date": "2018-01-01",
    "time": "10:23"
}

TimeStamp

This widget will generate an automatic time stamp in the ISO format. Click the reload button to refresh the timestamp.

​​

Configuration:

{
    "should_auto_update_when_empty": true, # default to true
    # If true, the widget will perform live calculation when the data is empty
    # If false, the results will not be calculated on default
}

Appointment

Use this widget to set an appointment and add the appointment calendar. Currently, Google calendar is supported.

​​​

Default value:

{
    "date_start": "",
    "time_start": "",
    "date_end": "",
    "time_end": ""
}

Boolean

Use this widget to edit the boolean value.

​​​

Select

Use this widget to choose a value from the dropdown list. The items of the dropdown list are defined in the default value field of column settings. The widget can be used for controlled vocabulary.

​​​

Configuration

# Provide list of options, one item per line
Option 1
Option 2
...
# Provide list of options, separated by ','
Option 1, Option 2, ...
# Provide both label and value of options, use '__' to separate
o1__Option 1
o2__Option 2
...

Default value

{"sid": "xxx", "name": "xxx"} # Python json
Option 1 # the value of a option

MultiSelect

Use this widget to choose multiple values from the dropdown list. It is identical to the Select widget except that more than one value can be selected.

​​​

The configuration is identical to the Select widget.

Default value

[
    {"sid": "xxx", "name": "xxx"},
    {"sid": "xxx", "name": "xxx"},
] # Python json
Option 1, Option 2 # multiple values

ForeignKey

Use this widget to link to one other record. The linked record is clickable.

​​​

Configuration

EP,SP # List of Unique Code separated by ','.
# Leave it empty to include all tables

Default value

{"sid": "xxx", "name": "xxx"} # Python json

ForeignKeys

Use this widget to link to many other records. The usage is the same as ForeignKey.

​​​

The configuration of ForeignKeys is identical to ForeignKey

Default value

[
    {"sid": "xxx", "name": "xxx"},
    {"sid": "xxx", "name": "xxx"},
] # Python json

Member

Use this widget to choose a member. Use this widget to assign a task to a member.

​​​

Configuration

{
    "team__sid": "xxx", # optional team sid to limit team member to be selected
    "should_notify_member": true, 
    # should create an notification, default to false, optional
    "subject": "xxx", # optional email subject
    # subject variables
    # {{UID}} - the UID of the current record
    # {{NAME}} - the Name of the current record
    "body": "xxx", # optional email body
    # both subject and body support the following variables
    # {{UID}}
    # {{NAME}}
    # {{ROW}} - the current row with link
    "should_email": false, 
    # should sent an email anyway, default to false
} 

Default value

{
    "name": "", # name of the member
    "sid": "" # sid of the personnel
}

Members

Use this widget to choose multiple members. The usage is saved to the Member widget.

​​​

The configuration is identical to Member

Default value

[
    {
        "name": "", # name of the member
        "sid": "" # sid of the personnel
    }
]

Image

Use this widget to display the image of a record. For example, display the molecular structure of a chemical.

To delete the image, click the edit icon and then click X.

​​

​​

Secret

Use this widget to hide sensitive data. The value will be displayed as "****". Use it for password or salary, etc.

​​​

To display the hidden value, click the "view" icon to display.

​​

Rating

A rating is an evaluation or assessment of something, in terms of quality, quantity, or some combination of both. Use the Rating widget to rate:

​​​

NestedFields

Use NestedFields to track more than one item. For example, you can use NestedFields to track how many books are ordered:

• Book 1, ordered 10

• Book 2, ordered 5

​​

Configuration

{ # use the propterties from https://react-jsonschema-form.readthedocs.io/en/latest/
  "properties": {
    "book": {
      "type": "string",
      "title": "Book",
      "description": "Select a book.",
      "enum": ["Book 1", "Book 2"],
      "enumNames": ["Book 1", "Book 2"],
      "widget": "MaterialFormSelect",
      "default": "Book 1"
    },
    "quantity": {
      "type": "number",
      "title": "Quantity",
      "description": "The quantity book to order.",
      "widget": "MaterialFormNumber",
      "min": 1,
      "default": 1
    }
  },
  "required": [
    "test",
    "quantity"
  ]
}

File Path

Use this widget to display the path of a file. This widget is read-only and used only for file table.

​​

File Size

Use this widget to display the size of a file. This widget is only used for file table.

​​

Column Citation

Use this widget to display the column data from one other record. A typical use case is to display customer information when creating an invoice/quote.

​​

Formula

Use this widget to display value calculated based on a formula. The formula shall be defined in the Default Value of the column.

​​

​​

Configuration

{
    "rows": [
        "column_sid", # The column sid of ForeignKey, ForeignKeys, NestedFields, optional
    ], 
    "counts": [
        "table_sid__column_sid", # count based on table and column
        "table_sid__column_sid__lte__date_created", # count includes the datetime
    ], 
    "formula": "", # the formula, see the Syntax below
    # data[column_sid], value of a column of current row
    # data[row_sid__column_sid], value of column of a row
    # count[table_sid__column_sid], the count value
    "format": {}, # the number in the wNumb format. 
    # Learn more at https://refreshless.com/wnumb/
    "should_auto_update": false, # default to false. 
    # If true, the widget will perform live calculation
    # If false, the user have to click reload to update the value
    "should_auto_update_when_empty": true, # default to true. 
    # If true, the widget will perform live calculation when the data is empty
    # If false, the results will not be calculated on default
}

Syntax

data[Field 1] + data[Field 2] + data[Source column sid__Target solumn sid]

Wheres, Field is the SID of a column. For example:

• data[8adg0a40x52520ejotyDI] + data[69be0a40x52508chmrwBG]

• data[8adg0a40x52520ejotyDI].substring(1,2)

• data[8adg0a40x52520ejotyDI].substring(1,3) == "ATCG" ? "Good" : "Bad"

• data[8adg0a40x52520ejotyDI__69be0a40x52508chmrwBG].substring(1,2)

Operator

• + Addition, a + b

• - Subtraction,

• * Multiplication

• ** Exponentiation (ES2016)

• / Division

• % Modulus (Remainder)

• sum - get sum value of array

• mean - get mean value of array

• sd - get standard deviation of array

• se - get standard error of array

• Priority calculate with () is supported, (100 + 50) * a;

• If condition: true ? a : b, if the condition is true, then return a, else, return b

• Substring: string.substring(start, end)

• Case:

  • Upper: str.toUpperCase()

  • Lower: str.toLowerCase()

• Date: new Date(dateString), learn more at here.

• ​Math:

  • abs(x) Returns the absolute value of x

  • acos(x) Returns the arccosine of x, in radians

  • asin(x) Returns the arcsine of x, in radians

  • atan(x) Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians

  • atan2(y, x) Returns the arctangent of the quotient of its arguments

  • ceil(x) Returns the value of x rounded up to its nearest integer

  • cos(x) Returns the cosine of x (x is in radians)

  • exp(x) Returns the value of Ex

  • floor(x) Returns the value of x rounded down to its nearest integer

  • log(x) Returns the natural logarithm (base E) of x

  • max(x, y, z, ..., n) Returns the number with the highest value

  • min(x, y, z, ..., n) Returns the number with the lowest value

  • pow(x, y) Returns the value of x to the power of y

  • random() Returns a random number between 0 and 1

  • round(x) Returns the value of x rounded to its nearest integer

  • sin(x) Returns the sine of x (x is in radians)

  • sqrt(x) Returns the square root of x

  • tan(x) Returns the tangent of an angle

Numbering

Use this widget to generate your own ID with auto-increment. The Numbering can be generated automatically and can also be manually updated.

​​

Click the reload button to update the ID

Configuration

{
    "format": "YY-ID", # required, the format of the id
    # YYYY - 2020, 4 digits of year
    # YY - 20, 2 digits of year
    # MM - 07, 2 digits of month
    # DD - 01, 2 digits of day
    # ID, the serial id
    # FOREIGNKEYCOLUMN - refer to the data from a foreignkey
    "reset_month": 10, # optional, the month to reset the id
    "reset_day": 1, # optional, the day to reset the id
    "foreignkey": "xxx", # the foreignkey column to refer, required when FOREIGNKEYCOLUMN is used
    "column": "xxx", # the column of foreignkey, required when FOREIGNKEYCOLUMN is used
    "reset_column": "xxx", # optional, the column to reset the ID
    "digits": 4, # optional, number of digits of ID to display
}

The default value will be ignored for the ID widget.

RowCount

Use this widget to display the count of a Row. For example, the number of biospecimens generated from a host.

To make it work, provide the query string into column configuration.

​​

Configuration

{
    "query": "name__icontains=test&table__name_singular=experiment",
    # paste the query
    # Some variables can be added to the link. The widget will replace it for you:
    # {{ROW:SID}}, the sid of the current record.
    "should_auto_update": false, # default to false. 
    # If true, the widget will perform live calculation
    # If false, the user have to click reload to update the value
}

Consumption

Use this widget to display the remaining volume of a sample or reagent.

Configuration:

• Column "Volume Value" with Number widget

• Table "Consumption"

  • Column "Sample" or "Reagent" with ForeignKey widget

  • Column "Amount" with Number widget

{
    "volume__sid": "RUX10a40x94dcTY49dins", 
    # required, the sid of the column "Volume Value"
    "consumption_sample__sid": "KNQT0a40x94d5MRW27bgl",
    # required, the sid of the column "Sample" or "Reagent" from the consumption table 
    "consumption_amount__sid": "MPSV0a40x94d7OTY49din", 
    # required, the sid of the column "Amount" from the consumption table
    "threshold": 10,
    # the color of the value will turn red if the remaining value lower than the threshold
    "should_auto_update": true, # default to true. 
    # If true, the widget will perform live calculation
    # If false, the user have to click reload to update the value
}

Default value:

{
    "value": 10,
    "is_low": false
}

Chemical Structure

Use this widget to display the chemical structure. This widget could not create/draw chemical structure, it can only display the chemical structure from a chemical drawing section.

​​

​​

SMILES Structure

This widget uses Smiles Drawer to draw the chemical structure from SMILES.

​​

​​

Molecular Formula

This widget can:

1. Generate molecular formula from the name

2. Generate molecular weight

3. Generate SMILES (Simplified molecular-input line-entry system)

4. Generate molecular structure

Before using this widget, these columns need to be created, and the corresponding name_system needs to be selected. The default chemical table will create these columns automatically.

• molecular_weight

• SMILES

• molecular_structure

Some function of chemcalc is used for this widget.

ChemCalc: a building block for tomorrow’s chemical infrastructure. Patiny, Luc; Borel, Alain Journal of Chemical Information and Modeling 2013. DOI:10.1021/ci300563h

Click the Generate button to get the molecular formula directly from the name.

​​

Click the convert icon to generate the molecular weight, SMILES, and molecular structure.

​​

PMID

This widget will download all related metadata from Pubmed.

​​

​​

​