Copy & paste data

object-table v3 introduces the ability to copy data from external spreadsheets (e.g. Microsoft Excel) and paste it into an object-table.

To enable pasting data into a table, set up an on-paste attribute similar to this example:

<object-table on-paste="$:handlePasteEvent($selection, $selectionMatrix, parsed)">
    <column display="{field}" heading="Column 1" />
</object-table>

$selection contains a payload representing the currently selected cells:

$selection = [
    {
        column: string,
        key: string,
        $object: DatabaseObject(...)
    },
    {
        column: string,
        key: string,
        $object: DatabaseObject(...)
    }
]

$selectionMatrix contains a trimmed 2D payload representing the currently selected cells in the same dimensions as they are currently selected in the table:

$selection = [
    [{
        column: string,
        key: string,
        $object: DatabaseObject(...)
    }],
    [{
        column: string,
        key: string,
        $object: DatabaseObject(...)
    }]
]

The above payload represents a table where the first and 2nd cell in a table is selected (made possible with pressing shift and select).

The parsed payload will contain a best-effort interpretation of mime types that JourneyApps understands. Data can naturally be copied from anywhere on a user's device (including spreadsheet software), so the data types of the copied data is inferred and matched as closely as possible to data types matching JourneyApps.

In the below example, a copied table in the type text/plain is detected. A 2D array of the copied data is provided, where each cell is a JSON object with original (original value), parsed (parsed/inferred value) and type which contains a string representation of the inferred type.

A developer can then handle the copied data and decide which version to use to paste values into the table.

parsed = {
  `text/plain`: {
    data: [
        // row 1
        [   { original: "1234",  parsed: 1234, type: 'number' }  ],

        // row 2
        [   { original: "1234",  parsed: 1234, type: 'number' }  ],
        ...
    ],

    // width of the parsed table
    width: number,

    // height of the parsed table
    height: number,

    // a boolean (convenience) property indicating whether the 
    // copied data matches the dimensions of the cells selected in the Journey object-table
    sameDimensions: boolean
  },
  ...
}

Note: While the corresponding JourneyApps objects are provided for each copied row, it is possible to make updates to objects that are not being used in the underlying table. This allows for interesting workflow possibilities.

Last updated