Page History
(this page was created automatically. In case of formatting issues, please visit the official Wiki Page)
Files Table
Link to Figme: tba
Overview
- The Files Table Component allows users to upload, display, and manage files in forms.
- It provides a table interface for file listings with upload, deletion, and custom actions.
- Pagination is supported for handling large file collections.
- It is useful for document management, attachment handling, or media galleries.
...
- id – Specifies a unique identifier for the component used for programmatic access.
- dataTestId – Sets the testing hook ID for automated testing.
- enableAsHotspot – Enables the component as a guided tour hotspot.
- guidedTourHotSpotTitle – Sets the title for the guided tour hotspot, supporting translations.
- guidedTourHotSpotDescription – Sets the description for the guided tour hotspot, supporting translations.
Links
- Figme: https://www.figma.com/design/yck1tcUXgdQ5aYX6iUAwrO/GE---Astronaut-Design-System?node-id=11528-202526&t=ftfrOGkPzlG2GaTo-1
- Live style guide: tba
Guidelines
Usage
- Use the Files Table to upload, list, and remove attachments within forms by wiring the three data sources:
getElementsDataSourceId(list),uploadFilesDataSourceId(upload), andremoveFileDataSourceId(delete), plus their respective*HttpRequestParametersMapsettings for request details. - Provide a clear, localized title above the table so users know the scope of files shown.
- Ensure each row is uniquely addressable to avoid collisions when files share names or are updated.
- Preserve user-selected files during multi-step form work by caching between edits.
...
| Do | Don’t | Article setting(s) | |||
|---|---|---|---|---|---|
Set keyExpr so each row is uniquely identifiable. | Rely on array index or file name only for identity. | keyExpr | |||
| Localize the table title and filename column header. | Hard-code English strings. | titleTranslations, fileNameColumnCaptionTranslations | |||
| Configure all three data sources before enabling user actions. | Attempt uploads/deletes without endpoints mapped. | getElementsDataSourceId, uploadFilesDataSourceId, removeFileDataSourceId, *HttpRequestParametersMap | |||
Enable pagination and pick a consistent pageSize. | Dump hundreds of files into a single page. | enablePagination, pageSize | |||
| Map client and server paging fields explicitly. | Depend on unspecified backend defaults. | paginationRequestParamsMap, paginationResponseFieldsMap | Use upload start/end events to show progress and refresh. | Leave uploads silent with no completion handling. | ON_FILETABLE_UPLOAD_START, ON_FILETABLE_UPLOAD_END |
| Cache selections during long edits. | Risk data loss when navigating between steps. | saveInLocalStorage | |||
| Make destructive actions explicit via row icons. | Hide delete in external flows only. | columnCustomProps, removeFileDataSourceId | |||
| Lock to read-only when edits aren’t allowed. | Fake read-only by just hiding delete icons. | readonly, authorizationDisable | |||
| Submit files using the correct field and channel. | Post file data in the wrong request part. | dataField, controlsRequestType |
...
