configureAsDefinitionsTableRow

How to get configureAsDefinitionsTableRow

import configureAsDefinitionsTableRow from 'fontoxml-families/src/configureAsDefinitionsTableRow.js'

Type: Function

The Definitions Table Row family can be used to configure table-like structures with a fixed number of columns, such as HTML definition lists.

The Definitions Table Row family is displayed as a table row.

The arrow keys and the tab keys can be used to navigate between different cells.

The Definitions Table Row familiy can be used for definition table-like structures which have a fixed number of columns.

This family has some specific configuration options for configuring its columns. The columns are configured by supplying the columns field in the options object. The columns field is an array of objects which have at least a query field in which an XPath query must be supplied which resolves to all nodes in this column.

Optionally there are the width, clickOperationWhenEmpty and hideColumnIfQueryIsTrue options for each column. The width is set as a ratio, see the example below for more information. The clickOperationWhenEmpty option can be set by supplying a operation name. This operation is called when the column gets clicked when it is empty. The hideColumnIfQueryIsTrue option can be set by supplying an XPath query. The column will be hidden when the XPath query returns true.

Usage:

configureAsDefinitionsTableRow(sxModule, 'self::dlentry', 'row', {
columns: [
	{ query: './dt', width: 1 },
	{ query: './dd', width: 2 }
]
});

The following visualization options are available:

  • backgroundColor

  • showWhen

  • borders

The colums support the following options:

  • clickOperationWhenEmpty

  • hideColumnIfQueryIsTrue

  • query

  • width

This family has a number of additional options which affect how it behaves:

  • isAutoremovableIfEmpty

  • isRemovableIfEmpty

  • defaultTextContainer

This family does not support any widget areas

We recommend adding an operation to automatically insert a row when pressing tab in the last cell of a definitions table, similar to how this works for normal tables. You can use the code below for inspiration:

get-last-dlentry.xqm:

module namespace app = "http://www.fontoxml.com/functions/app";

import module namespace fonto = "http://www.fontoxml.com/functions";

(: This functions returns the last definitions row node only when the cursor is in the second node
of the last definitions row of the definitions table :)

declare %public function app:get-last-dlentry() as element()? {
 (: dl is the definitionstable :)
 (: dlentry is the definitionsrow :)
 (: dd is the second cell of the row:)

 fonto:selection-common-ancestor()/ancestor-or-self::dd[
     let $definitionsTable := ./ancestor::dl[1],
     $lastDefinitionsCell := ($definitionsTable/descendant::*[self::dd] => outermost())[last()]
     return $lastDefinitionsCell is .
 ]/..
};

In operations.json file, your operation:

 ":insert-definitions-row-on-tab": {
     "__documentation": {
         "summary": "Inserts a new row to the current definition table with tab.",
         "description": [
             "Use this operation to insert a new definitions row when the cursor is located ",
             "in the second cell of the last row of a definition table."
         ]
     },
     "keyBinding": "tab",
     "keyBindingDisabled": true,
     "steps": [
         {
             "type": "operation/your-dlentry-insertion-below-operation",
             "data": {
                 "contextNodeId": "x__app:get-last-dlentry()"
             }
         }
     ]
 }

Add the code below to install.js file:

 // Priority is higher than navigate-to-next-item-in-tab-context but lower than insert-row-on-tab
 operationsManager.addAlternativeOperation('tab', ':insert-definitions-row-on-tab', 65);

Arguments

# Name Type Description
1. sxModule SxModule
2. selector XPathTest
3. markupLabel String
4. options CvkOptions
Was this page helpful?