Components

Bulk Action

Execute a function across multiple records using the Bulk Action component. Bind the Bulk Action component to a Table or enable CSV/TSV file uploads. The Bulk Action component can provide an easy way for users to update or insert new data records en masse.

Ways to use bulk action

Update all selected table rows at once

Turn on multi-select for a table component, and allow users to select table rows to update all of the records instantaneously.

Note: Using multi-select creates an array of selected rows that are assessed in the order in which they are clicked.

Update many records at once via a CSV

If you have a file with updated data for a number of existing records, you can use bulk acton to update all of the records instantaneously.

Insert many new records  via CSV

Create a series of new records by uploading a CSV with the required data.

Tutorial

Configuring Bulk Action

Data


First, choose the function that you want the Bulk Action to execute.

Next, configure the source for this bulk action. Select File Upload if you want the user to upload a CSV or TSV file to complete the bulk action. Select the Binding option if you plan to have users select multiple rows of a table to complete the bulk action.

If you selected Binding, you'll also need to specify the Table component you'll plan to use with the bulk action and whether to use selected rows only or all rows. Choose Selected Rows to only execute against the rows the user selects, or choose All Rows to executed the Bulk Action for all rows in the table.

Then, give your component a name (used to reference this bulk action element within Internal). You can also customize the button text and add an optional icon.

Next, you'll set up the fields for this bulk action. To do this, you’ll click the "+" to add fields, and then specify what values go in them.

  • "Use a value from a CSV or TSV": This option appears only if you chose to complete this bulk action via a File Upload.
  • "Value from a component": This option allows you to reference a value from any other component in your Space. Choose this option if you plan to have the user select multiple rows in a table to complete the Bulk Action.
To pull the data from each selected row, choose the binding option "This Repeated Item".

Note: The Table component that will be used with this Bulk Action must have Multi-Select turned on. You can tell if multi-select in on by seeing if checkboxes appear to the far left of your table. If it doesn't, to into your Table component's configurations and turn on Multi-Select. 

Visibility Rules

You can create visibility rules that will determine when this component is visible and able to be interacted with.

Effects

Display Message

This effect allows you to define the text of messages for success and failure of submission of the data from the component.

  • On Successful Submit - Message to be displayed in a green-colored JavaScript alert message that will show in the UI on successful completion of the transaction between Internal and the target data source.
  • On Failed Submit - Message to be displayed in a red-colored JavaScript alert message that will show when the transaction fails.

It's also important to note that not including a message will fall back to the "system message" for that component. In the case of a success, this usually produces a JavaScript alert that says "Success" and not much else. In the case of failure, this can be a custom error message added to the meta data transformer in the function editor.

Additionally, only one message is allowed to be configured per function success and one for failure.

Refresh Component

Usually, if your import changes some data that is‍ displayed in the Space, you'll want to refresh the data. On Submit: Refresh Component options allow you to refresh the data of any component in the Space. Simply select the component to refresh from the dropdown. When the submission from your button is successfully complete, the selected component will refresh and display any changes to its data.

Auto Update by Key

This is the default state for "Effects" for this component. When the component submits its data successfully, components that are bound to that function will automatically be updated by key (e.g. Sending an email-address update to a user's table should result in the updating of associated row table data associated with that key.)

Design

Here you can see design attributes and set how overflow content is displayed.

Left and Top options only appear for top-level components (components that are placed directly onto the Space canvas).

Left: Set the distance of this component from the left edge of the Space canvas (x-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Top: Set the distance of this component from the top edge of the Space canvas (y-axis position). This can be expressed as a % of the canvas or as a number of pixels.

Width: Set the width of this component as a number of pixels or as a % of the containing unit.

Height: Set the height of this component as a number of pixels or as a % of the containing unit.

If the component is a top-level component, the containing unit is the Space canvas.

If the component is in-line within another component, the containing unit is the parent component.

If the component is within a flexbox component, the containing unit is the flexbox.

Snap to Grid: Set the edges of this component to snap to the grid canvas in the Space.

Once you’re done configuring your component, you can save and publish your Space so it can be used.

Using your bulk action.

When a user clicks on the bulk action button, they’ll be prompted to upload the file containing the data if you configured the component as a File Upload. If you configured it to use a binding, the user will first need to select rows in the corresponding table before clicking the button.

Once you upload your file, you’ll be able to map the columns in your field to the fields in your data, using the dropdown selection at the top of each column. Unmapped columns will not have their data imported. If you're using bindings, the user will skip this step.


Next, you’ll review what your data looks like before importing it. Internal will alert you if there are any potential errors, such as data that doesn’t match the field’s filetype. For these types of errors, you may still proceed to import the data, although it may fail. 

You may also see blocking errors that must be resolved before you can import. For example, if you have an updated_at column that is required, if your file has any rows where this column is blank, you won’t be able to proceed to import.  

Once you’re ready, hit the “Submit” button. 

Note: If there are failed imports, Internal will provide a CSV of all the rows that did not import.