White paper: Templates in web-to-print.  Free download

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%"
      }
    }
  ]
}

Hierarchy

AuBaseSelectorWidget

AuWidgetDataSheet

Implements

Index

Properties

Accessors

Methods

Properties

params

params: IWidgetDataSheetConfig

Overrides AuBaseWidget.params

Properties of the widget.


paramsRaw

paramsRaw: any

Inherited from AuBaseWidget.paramsRaw

Uncompiled widget configuration.


selectedRow

selectedRow: DataSheetRow

The selected row.


selectedRowIndex

selectedRowIndex: number

The index of the selected row.


tableData

tableData: DataSheetRow[]

Accessors

_

get _(): DataSheetRow

Overrides AuBaseSelectorWidget._

Returns the selected row.

Returns:DataSheetRow

Methods

addCustomStyles

addCustomStyles(params: any): void

Inherited from AuBaseWidget.addCustomStyles

Applies new styles to a widget.

Parameters:

Name Type
params any

Returns:void


addRow

addRow(): void

add row to table

Returns:void


changeFile

changeFile(e: Event): void

The File input handler. @ignore

Parameters:

Name Type
e Event

Returns:void


compile

compile(additionalParam: any): Promise‹any›

Inherited from AuBaseWidget.compile

Compiles the widget config.

"steps": [{
  "name": "card-size",
  "title": "Step 1. Card Options",
  "description": "Choose a card size.",
  "toolPanel": {
    "name": "options"
  },
  "onActivate": [
    "{{#function $['logo'].compile() }}"
  ]
},
...

Parameters:

Name Type Default Description
additionalParam any Parameters for widget config compilation.

Returns:Promise‹any›

The compiled widget configuration.


deleteRow

deleteRow(): void

delete selected row

Returns:void


downloadXSLTFile

downloadXSLTFile(): void

The export button handler. @ignore

Returns:void


emitChange

emitChange(data: any, forceRecompile: boolean): void

Inherited from AuBaseWidget.emitChange

Sends a message about the widget state changes.

"steps": [{
  "name": "card-size",
  "title": "Step 1. Card Options",
  "description": "Choose a card size.",
  "toolPanel": {
    "name": "options"
  },
  "onActivate": [
    "{{#function $['options'].emitChange()}}"
  ]
},
...

Parameters:

Name Type Default Description
data any Data for updating the widget.
forceRecompile boolean false If true, runs widget recompilation to apply the updated parameters.

Returns:void


exportWidgetData

exportWidgetData(force: boolean): Promise‹TableWidgetData›

Implementation of IRestorableWidget

Parameters:

Name Type
force boolean

Returns:Promise‹TableWidgetData›


getSelectedRowData

getSelectedRowData<TFieldData>(): TFieldData[]

Gets selected row data with all column-associated data.

Type parameters:

TFieldData: DataSheetFieldData

Returns:TFieldData[]

An array of column values with all associated data of the selected row.


getTableData

getTableData<TFieldData>(): TFieldData[][]

Gets all row data with all associated data.

Type parameters:

TFieldData: DataSheetFieldData

Returns:TFieldData[][]


openFileDialog

openFileDialog(): void

The import button handler. @ignore

Returns:void


renderTable

renderTable(): void

Render table forcefully, hiding private tableService

Returns:void


restoreWidgetFromData

restoreWidgetFromData(widgetData: TableWidgetData, force: boolean): Promise‹void›

Parameters:

Name Type
widgetData TableWidgetData
force boolean

Returns:Promise‹void›


setErrors

setErrors(errors: DataSheetCellError[]): void

Sets a table error.

Parameters:

Name Type
errors DataSheetCellError[]

Returns:void


showPreloader

showPreloader(isPreload: boolean, message: string): void

Inherited from AuBaseWidget.showPreloader

Shows a preloader.

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

Parameters:

Name Type Default Description
isPreload boolean - If true, enables the preloader.
message string undefined A text message that appears next to the preloader.

Returns:void


showToast

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

Inherited from AuBaseWidget.showToast

Shows a toast.

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

Parameters:

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

Returns:void