| _backColor | Internal helper to set background color and return the element for chaining. Prefer using CSS classes for styling. |
| _class | Internal helper to add a CSS class and return the element for chaining. Prefer using ui.element() with className parameter or standard classList API. |
| _color | Internal helper to set text color and return the element for chaining. Prefer using CSS classes for styling. |
| _innerText | Internal helper to set element inner text and return the element for chaining. Prefer using standard DOM APIs or ui.div/ui.span with content directly. |
| accordion | Creates an accordion with dynamically populated panes. Example: https://public.datagrok.ai/js/samples/ui/components/accordion |
| actionLink | A link-styled label that runs [onClick]. |
| appendAll | Appends multiple elements to root, and returns root. An element could be either HTMLElement or Viewer. |
| bigButton | A large (primary) button. |
| bind | Binds [item] with the [element]. It enables selecting it as a current object, drag-and-drop, tooltip, and popup menu. |
| bindInputs | Keeps the string values of [inputs] in sync: a change in one is copied to the others. |
| block | Example: https://public.datagrok.ai/js/samples/ui/containers/blocks |
| block25 | Example: https://public.datagrok.ai/js/samples/ui/containers/blocks |
| block50 | Example: https://public.datagrok.ai/js/samples/ui/containers/blocks |
| block75 | Example: https://public.datagrok.ai/js/samples/ui/containers/blocks |
| box | Example: https://public.datagrok.ai/js/samples/ui/containers/box |
| boxFixed | A box that does not grow with its flex container. |
| breadcrumbs | Example: https://public.datagrok.ai/js/samples/ui/components/breadcrumbs |
| button | Creates a button with the specified text, click handler, and tooltip. Example: https://public.datagrok.ai/js/samples/ui/components/buttons |
| buttonsInput | A form row holding [children] buttons, aligned with the input column. |
| canvas | Creates a canvas element, optionally sized to width × height pixels (both CSS and bitmap size). |
| card | Renders content as a card. |
| colorPicker | Creates a color picker bound to colorDiv: clicking the element opens the picker, and its background updates live to preview the selected color. |
| comboPopup | Creates a combo popup with the specified icons and items. Example: https://public.datagrok.ai/js/samples/ui/components/combo-popup |
| comboPopupItems | Creates a combo popup with the specified icons and items |
| composeEmail | Creates an email dialog with editable subject/to/bcc, a markdown body, and attachment management. |
| contextActions | The context actions (menu commands) applicable to [x], rendered as a list. |
| dialog | Creates a [Dialog]. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters |
| div | - |
| divH | Div flex-box container that positions child elements horizontally. Example: https://public.datagrok.ai/js/samples/ui/containers/flexbox |
| divText | Returns DivElement with the specified inner text. Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| divV | Div flex-box container that positions child elements vertically. Example: https://public.datagrok.ai/js/samples/ui/containers/flexbox |
| dropDown | Creates a dropdown component. The most common use case is a menu dropdown. |
| element | Creates an instance of the element for the specified tag, and optionally assigns it a CSS class. |
| empty | Removes all child nodes, and disposes widgets that these nodes might contain. See also [remove]. |
| extractRoot | Resolves a widget, an object with a root, or a cash/jQuery set to its DOM element; other values pass through. |
| fileBrowser | Example: https://public.datagrok.ai/js/samples/ui/components/file-browser |
| form | Creates a form: a vertical list of labeled inputs with auto-sized labels. options.layout picks the variant: 'narrow' puts labels above the inputs, 'wide' lays the inputs out in two columns. autosize is accepted for compatibility and ignored. |
| h1 | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| h2 | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| h3 | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| icon | An icon by name: Font Awesome by default ('plus'), an SVG icon for .svg names or style: 'svg', an image for a URL, an absolute path or a data URI. See also icons for the common ones. Example: https://public.datagrok.ai/js/samples/ui/components/icons |
| iconFA | Returns a font-awesome icon with the specified name, handler, and tooltip. Example: https://public.datagrok.ai/js/samples/ui/components/icons |
| iconFAB | Same as iconFA but also blue. |
| iconImage | An icon with a background image: [path] is a URL, an absolute path, a data URI, or a file name under /images/. |
| iconSvg | Creates an icon for the SVG image Usage: - iconSvg('ai.svg') would map to /images/ai.svg - iconSvg('ai') would map to the svg-ai class |
| iframe | Example: https://public.datagrok.ai/js/samples/ui/components/iframe |
| image | Example: https://public.datagrok.ai/js/samples/ui/components/image |
| info | Example: https://public.datagrok.ai/js/samples/ui/components/info-bar |
| inlineText | Renders inline text, calling [renderMarkup] for each non-HTMLElement. Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| inputs | A form built from [inputs]; same as form. |
| inputsRow | A labeled row that lays [inputs] out horizontally. |
| label | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| link | Creates an <a> element. |
| list | Creates a visual element representing list of [items]. Example: https://public.datagrok.ai/js/samples/ui/components/list |
| loader | Example: https://public.datagrok.ai/js/samples/ui/components/loading-indicators |
| makeDraggable | Example: https://public.datagrok.ai/js/samples/ui/interactivity/drag-and-drop |
| makeDroppable | Makes [e] a drop target; see IDragAndDropOptions for the callbacks. |
| markdown | Example: https://public.datagrok.ai/js/samples/ui/components/markdown |
| narrowForm | Same as form with layout: 'narrow': labels above the inputs. |
| onSizeChanged | Example: https://public.datagrok.ai/js/samples/ui/ui-events |
| p | Example: https://public.datagrok.ai/js/samples/ui/components/typography |
| panel | Example: https://public.datagrok.ai/js/samples/ui/containers/panels |
| patternsInput | Legend editor for categorical color patterns ({category: color}). |
| pickTableFromFiles | Opens the platform's 'Select a file' dialog over the file shares tree. Resolves with the first dataframe of the picked file, or null when the dialog is closed without a pick. |
| pickTableFromQuery | Opens the platform's 'Select a database query' dialog; running a query that produces a dataframe resolves with it, closing without one resolves with null. |
| popupMenu | Example: ui.popupMenu({ 'About': () => grok.shell.info('About'), 'File': { 'Open': () => grok.shell.info('Open'), 'Close': () => grok.shell.info('Close'), } }); |
| rangeSlider | A two-thumb slider over [minRange]..[maxRange] with [min]..[max] selected. Example: https://public.datagrok.ai/js/samples/ui/components/range-slider |
| remove | Removes the [element] from the DOM, and disposes any widgets that the [element] might contain. See also [empty]. |
| render | Renders object to html element. |
| renderCard | Renders object to html card. |
| renderInline | Renders [x] through its ObjectHandler markup renderer, falling back to render. |
| ribbonPanel | Typically, this is a host for the icons. |
| schemeInput | Editor for a linear color scheme (a gradient of ARGB colors). |
| setClass | Adds [classes] to [e] when [flag] is true, removes them otherwise. |
| setDisabled | Disables or enables [element] (adds d4-disabled); an optional tooltip explains why it is disabled. |
| setDisplay | Shows or hides [element] by toggling its display style. |
| setDisplayAll | Shows or hides all [elements]. |
| setUpdateIndicator | Sets an update indicator on the specified element. Example: https://public.datagrok.ai/js/samples/ui/components/update-indicator |
| showColorPicker | Opens a standalone color picker modal immediately, without a trigger element. Use when there is no persistent UI element to bind to (e.g. editing a canvas-rendered grid cell). |
| showPopup | Shows popup with the [element] near the [anchor]. tooltip, and popup menu. |
| span | Renders multiple objects as a span |
| splitH | Positions child elements horizontally and allows you to resize them. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters |
| splitV | Positions child elements vertically and allows you to resize them. Example: https://public.datagrok.ai/js/samples/ui/containers/splitters |
| star | A "favorite" star toggle for the entity with the given [id]. |
| tabControl | Example: https://public.datagrok.ai/js/samples/ui/components/tab-control |
| table | Creates a visual table based on [items] and [renderer]. Note: the ind passed to [renderer] is 1-based (HTML table row indexing), not 0-based. |
| tableFromMap | Creates an html table based on [map]. Example: https://public.datagrok.ai/js/samples/ui/components/html-tables |
| tableFromProperties | Creates an editable html table for the specified items (rows) and properties (columns). |
| tags | Renders the tags of an entity as chips. |
| toggleButton | Creates a toggle button (d4-toggle-button). When clicked, marks itself as current (d4-current) and clears that class from sibling toggle buttons under the same parent. Wrap a set of these in toggleButtonGroup to get the group container styling. |
| toggleButtonGroup | Wraps a list of toggleButtons in a vertical d4-toggle-button-group container. |
| tree | Creates new nodes tree. Example: https://public.datagrok.ai/js/samples/ui/components/tree-view |
| typeAhead | A text input with type-ahead suggestions; see TypeAheadConfig. |
| virtualView | Creates a virtual list widget. Example: https://public.datagrok.ai/js/samples/ui/views/virtual-view |
| wait | Waits for Future<Element> function to complete and collect its result. Example: https://public.datagrok.ai/js/samples/ui/components/loading-indicators |
| waitBox | Waits for Future<Element> function to complete and collect its result as a ui.box. Example: https://public.datagrok.ai/js/samples/ui/components/loading-indicators |
| wideForm | Same as form with layout: 'wide': inputs in two columns. |