Class AuWidgetDataSheet

A widget that is used to display tables. The following example illustrates how you can configure the editor, display a product preview, and create a table of variable fields.

{
  "widgets": [
    {
      "name": "canvas",
      "type": "canvas",
      "params": {
        "initial": { ... }
      }
    },
    {
      "name": "preview",
      "type": "image-carousel",
      "params": {
        "containerColor": "#ccc",
        "images": [{ "url": "{{$['editor'].proofImageUrls[0][0]}}" }]
      }
    },
    {
      "name": "table",
      "type": "datasheet",
      "params": {
        "data": "{{ $['canvas'].variableData }}"
      }
    }
  ],
  "steps": [
    {
      "name": "design",
      "title": "1. Design",
      "mainPanel": { "name": "canvas" }
    },
    {
      "name": "user data",
      "title": "2. Your data",
      "onActivate": [
        "{{ #function $['canvas'].saveProduct() }}",
        "{{ #function $['canvas'].getVariableData() }}"
      ],
      "mainPanel": { "name": "preview" },
      "bottomPanel": {
        "name": "table",
        "height": "50%"
      }
    }
  ]
}

Package: ui-framework

Properties

params

Properties of the widget.

Declaration

params: IWidgetDataSheetConfig

Property Value

Type	Description
IWidgetDataSheetConfig	Properties of the widget.

selectedColumnIndex

Declaration

selectedColumnIndex: number

Property Value

Type	Description
number

selectedRow

The selected row.

Declaration

selectedRow: DataSheetRow

Property Value

Type	Description
DataSheetRow	The selected row.

selectedRowIndex

The index of the selected row.

Declaration

selectedRowIndex: number = 0

Property Value

Type	Description
number	The index of the selected row.

tableData

Declaration

tableData: DataSheetRow[]

Property Value

Type	Description
DataSheetRow[]

total

Declaration

public total: number = 1

Property Value

Type	Description
number

Methods

addRow()

add row to table

Declaration

function addRow()

changeFile(Event)

The File input handler. @ignore

Declaration

function changeFile(e: Event)

Parameters

Type	Name	Description
Event	e

Returns

Type	Description
Promise<void>

checkInitDependenciesWidgets()

Returns an array of widget names, due to which the current widget cannot receive parameters.

Declaration

function checkInitDependenciesWidgets()

Returns

Type	Description
string[]

deleteRow()

delete selected row

Declaration

function deleteRow()

downloadXSLTFile()

The export button handler. @ignore

Declaration

function downloadXSLTFile()

exportWidgetData(boolean)

Declaration

function exportWidgetData(force: boolean)

Parameters

Type	Name	Description
boolean	force

Returns

Type	Description
Promise<TableWidgetData>

getSelectedRowData()

Gets selected row data with all column-associated data.

Declaration

function getSelectedRowData<TFieldData>()

Returns

Type	Description
TFieldData[]	An array of column values with all associated data of the selected row.

getTableData()

Gets all row data with all associated data.

Declaration

function getTableData<TFieldData>()

Returns

Type	Description
TFieldData[][]

openFileDialog()

The import button handler. @ignore

Declaration

function openFileDialog()

renderTable()

Render table forcefully, hiding private tableService

Declaration

function renderTable()

resetPreloaderState()

Declaration

function resetPreloaderState()

restoreWidgetFromData(TableWidgetData, boolean)

Declaration

function restoreWidgetFromData(widgetData: TableWidgetData, force: boolean)

Parameters

Type	Name	Description
TableWidgetData	widgetData
boolean	force

Returns

Type	Description
Promise<void>

setErrors(DataSheetCellError[])

Sets a table error.

Declaration

function setErrors(errors: DataSheetCellError[])

Parameters

Type	Name	Description
DataSheetCellError[]	errors

showPreloader(boolean, string | string[], number)

Shows a preloader.

"onClick": [
  "{{#function main.showPreloader(true, 'Creating print files...')}}",
  "{{#function $['editor'].getHiResImages(800,800)}}",
  "{{#function main.showPreloader(false)}}"
]

Declaration

function showPreloader(isPreload: boolean, message: string | string[], timeout: number)

Parameters

Type	Name	Description
boolean	isPreload	If true, enables the preloader.
string | string[]	message	A text message that appears next to the preloader.
number	timeout

showToast(string, number)

Shows a toast.

return editor.loadUserInfo(data)
    .catch(err => {
        this.widget.showToast("Error: Invalid data");
        console.log(err);
    });

Declaration

function showToast(data?: string, duration?: number)

Parameters

Type	Name	Description
string	data	A string message to display in the toast.
number	duration	Defines how long to show the toast for.