Dynamic input fields in table

mario · May 28, 2024, 10:01am

Goal: I am trying to build dynamic table with text areas in the columns and in the headers as well.
Steps: I tried to use Form and Table components but I am facing few problems:

Cannot add text areas in the column headers
Cannot dynamically change table columns and rows based on the input values above the table.
Cannot have text area instead the default editable text in the table columns

Details: The goal that I want to achieve is dynamically change the count of the text areas that should collect the user input based on the select boxes in the beginning of the page. And they should be ordered in something like table. In the ideal case it should looks like on the provided screenshot. Thank you in advance!
Screenshots:

image1053×707 73.2 KB
App json export: {"uuid":"bdc25e46-1c28-11ef-868c-afd93d6d1de4","page":{"id":482730,"data":{"appState":"["~#iR",["^ ","n","appTemplate","v",["^ ","isFetching",false,"plugins",["~#iOM",["query1",["^0",["^ ","n","pluginTemplate","v",["^ ","id","query1","type","datasource","subtype","SqlQueryUnified","namespace",null,"resourceName","e69f927d-030a-4d65-9147-cf9cdfa354eb","resourceDisplayName","Salesforce DB","template",["^3",["queryRefreshTime","","records","","lastReceivedFromResourceAt",null,"databasePasswordOverride","","queryDisabledMessage","","servedFromCache",false,"successMessage","","queryDisabled","","playgroundQuerySaveId","latest","resourceNameOverride","","runWhenModelUpdates",true,"showFailureToaster",true,"query","","playgroundQueryUuid","","playgroundQueryId",null,"error",null,"privateParams",["~#iL",],"runWhenPageLoadsDelay","","data",null,"recordId","","importedQueryInputs",["^3",],"isImported",false,"showSuccessToaster",true,"dataArray",["^:",],"cacheKeyTtl","","filterBy","","requestSentTimestamp",null,"databaseHostOverride","","metadata",null,"editorMode","sql","queryRunTime",null,"actionType","","changesetObject","","shouldUseLegacySql",false,"errorTransformer","// The variable 'data' allows you to reference the request's data in the transformer. \n// example: return data.find(element => element.isError)\nreturn data.error","finished",null,"databaseNameOverride","","confirmationMessage",null,"isFetching",false,"changeset","","rawData",null,"queryTriggerDelay","0","resourceTypeOverride",null,"watchedParams",["^:",],"enableErrorTransformer",false,"enableBulkUpdates",false,"showLatestVersionUpdatedWarning",false,"timestamp",0,"importedQueryDefaults",["^3",],"enableTransformer",false,"showUpdateSetValueDynamicallyToggle",true,"bulkUpdatePrimaryKey","","runWhenPageLoads",false,"transformer","// type your code here\n// example: return formatDataAsArray(data).filter(row => row.quantity > 20)\nreturn data","events",["^:",],"tableName","","queryTimeout","10001","requireConfirmation",false,"queryFailureConditions","","changesetIsObject",false,"enableCaching",false,"allowedGroups",["^:",],"databaseUsernameOverride","","shouldEnableBatchQuerying",false,"doNotThrowOnNoOp",false,"offlineQueryType","None","queryThrottleTime","750","updateSetValueDynamically",false,"notificationDuration",""]],"style",null,"position2",null,"mobilePosition2",null,"mobileAppPosition",null,"tabIndex",null,"container","","createdAt","~m1716814677962","updatedAt","~m1716814677962","folder","","screen",null]]],"$main",["^0",["^ ","n","pluginTemplate","v",["^ ","id","$main","^4","frame","^5","Frame","^6",null,"^7",null,"^8",null,"^9",["^3",["type","main","sticky",false,"isHiddenOnDesktop",false,"isHiddenOnMobile",false]],"^;",["^3",],"^<",null,"^=",null,"^>",null,"^?",null,"^@","","^A","~m1716885764783","^B","~m1716885764783","^C","","^D",null]]],"table1",["^0",["^ ","n","pluginTemplate","v",["^ ","id","table1","^4","widget","^5","TableWidget","^6",null,"^7",null,"^8",null,"^9",["^3",["showCustomButton",false,"sortMappedValue",["^3",],"_filteredSortedRenderedDataWithTypes",null,"heightType","fixed","normalizedData",null,"rowHeight","standard","saveChangesDisabled","","columnTypeProperties",["^3",["id",["^3",],"name",["^3",],"email",["^3",],"sales",["^3",]]],"columnWidths",["^:",],"showSummaryFooter",false,"disableRowSelectInteraction",false,"columnWidthsMobile",["^:",],"hasNextAfterCursor","","columnTypeSpecificExtras",["^3",],"onRowAdded","","columnHeaderNames",["^3",["id","Criteria","name","points","email","points","sales","points"]],"alwaysShowPaginator",false,"columnColors",["^3",["id","","name","","email","","sales",""]],"columnFrozenAlignments",["^3",],"allowMultiRowSelect",false,"columnFormats",["^3",["id","TextMultiDataCell","name","TextMultiDataCell","email","TextMultiDataCell","sales","TextMultiDataCell"]],"columnRestrictedEditing",["^3",],"showFilterButton",true,"_columnVisibility",["^3",["id",true]],"_columnSummaryTypes",["^3",["id","","name","","email","","sales",""]],"_columnsWithLegacyBackgroundColor",["~#iOS",],"showAddRowButton",false,"_unfilteredSelectedIndex",null,"nextBeforeCursor","","columnVisibility",["^3",],"selectedPageIndex","0","applyDynamicSettingsToColumnOrder",true,"rowColor",,"actionButtonColumnName","Actions","resetAfterSave",true,"filterStackType","and","downloadRawData",false,"showFetchingIndicator",true,"serverPaginated",false,"data","[{\n \"id\": \"Some Text\",\n \"name\": \"Some Text\",\n \"email\": \"Some Text\",\n \"sales\": \"Some Text\"\n}, {\n \"id\": \"Some Text\",\n \"name\": \"Some Text\",\n \"email\": \"Some Text\",\n \"sales\": \"Some Text\"\n}, {\n \"id\": \"Some Text\",\n \"name\": \"Some Text\",\n \"email\": \"Some Text\",\n \"sales\": \"Some Text\"\n}, {\n \"id\": \"Some Text\",\n \"name\": \"Some Text\",\n \"email\": \"Some Text\",\n \"sales\": \"Some Text\"\n}, ]","displayedData",null,"actionButtons",["^:",],"actionButtonSelectsRow",true,"selectRowByDefault",true,"defaultSortByColumn","","paginationOffset",0,"columnAlignment",["^3",["id","left","name","left","email","left","sales","left"]],"columnSummaries",["^ "],"showBoxShadow",false,"sortedDesc",false,"customButtonName","","columnMappersRenderAsHTML",["^3",],"showRefreshButton",true,"pageSize","20","useDynamicColumnSettings",false,"actionButtonPosition","left","dynamicRowHeights",false,"bulkUpdateAction","","afterCursor","","onCustomButtonPressQueryName","","changeSet",["^ "],"sortedColumn","","_columnSummaryValues",["^3",["id","","name","","email","","sales",""]],"checkboxRowSelect",true,"_compatibilityMode",false,"showColumnBorders",false,"clearSelectionLabel","Clear selection","_renderedDataWithTypes",null,"columnAllowOverflow",["^3",],"beforeCursor","","serverPaginationType","limitOffsetBased","onRowSelect","","showDownloadButton",true,"selectedIndex",null,"defaultSortDescending",false,"_sortedDisplayedDataIndices",null,"dynamicColumnSettings",null,"totalRowCount","","recordUpdates",,"newRow",null,"emptyMessage","No rows found","columnEditable",["^3",["id",true,"name",true,"email",true,"sales",true]],"_viewerColumnSummaryTypes",["^ "],"filters",,"displayedDataIndices",null,"disableSorting",["^3",],"columnMappers",["^3",],"showClearSelection",false,"doubleClickToEdit",true,"overflowType","pagination","_reverseSortedDisplayedDataIndices",null,"showTableBorder",true,"selectedCell",["^ ","index",null,"data",null,"columnName",null],"columns",["^:",],"defaultSelectedRow","first","freezeActionButtonColumns",false,"sort",null,"_columns",["^:",],"sortByRawValue",["^3",],"calculatedColumns",["^:",],"selectedRow",["^ ","^F",null,"^G",null],"showPaginationOnTop",false,"_reverseDisplayedDataIndices",null,"nextAfterCursor","","useCompactMode",false]],"^;",["^3",],"^<",["^0",["^ ","n","position2","v",["^ ","^@","form1","rowGroup","header","subcontainer","","row",5.6,"col",0,"height",8,"width",12,"tabNum",0]]],"^=",null,"^>",null,"^?",null,"^@","","^A","~m1716886274042","^B","~m1716889917532","^C","","^D",null]]],"form1",["^0",["^ ","n","pluginTemplate","v",["^ ","id","form1","^4","widget","^5","FormWidget2","^6",null,"^7",null,"^8",null,"^9",["^3",["disableSubmit",false,"heightType","auto","resetAfterSubmit",true,"submitting",false,"hidden",false,"data",["^ "],"showHeader",true,"hoistFetching",true,"initialData",null,"showInEditor",false,"tooltipText","","invalid",false,"showFooter",true,"events",["^3",],"loading",false,"overflowType","scroll","disabled",false,"requireValidation",true,"maintainSpaceWhenHidden",false,"showBody",true]],"^;",["^3",],"^<",["^0",["^ ","n","position2","v",["^ ","^@","","^I","body","^J","","row",11.399999999999999,"col",3,"^K",0.2,"^L",8,"^M",0]]],"^=",null,"^>",null,"^?",null,"^@","","^A","~m1716887377981","^B","~m1716887377981","^C","","^D",null]]],"formTitle1",["^0",["^ ","n","pluginTemplate","v",["^ ","id","formTitle1","^4","widget","^5","TextWidget2","^6",null,"^7",null,"^8",null,"^9",["^3",["heightType","auto","horizontalAlign","left","hidden",false,"imageWidth","fit","showInEditor",false,"verticalAlign","center","tooltipText","","value","#### Form title","disableMarkdown",false,"overflowType","scroll","maintainSpaceWhenHidden",false]],"^;",["^3",],"^<",["^0",["^ ","n","position2","v",["^ ","^@","form1","^I","header","^J","","row",0,"col",0,"^K",0.6,"^L",12,"^M",0]]],"^=",null,"^>",null,"^?",null,"^@","","^A","~m1716887378098","^B","~m1716887378098","^C","","^D",null]]],"formButton1",["^0",["^ ","n","pluginTemplate","v",["^ ","id","formButton1","^4","widget","^5","ButtonWidget2","^6",null,"^7",null,"^8",null,"^9",["^3",["horizontalAlign","stretch","clickable",false,"iconAfter","","submitTargetId","form1","hidden",false,"text","Submit","showInEditor",false,"tooltipText","","submit",true,"iconBefore","","events",["^3",],"loading",false,"loaderPosition","auto","disabled",false,"maintainSpaceWhenHidden",false]],"^;",["^3",],"^<",["^0",["^ ","n","position2","v",["^ ","^@","form1","^I","footer","^J","","row",0,"col",8,"^K",1,"^L",4,"^M",0]]],"^=",null,"^>",null,"^?",null,"^@","","^A","~m1716887378133","^B","~m1716887378133","^C","","^D",null]]],"select1",["^0",["^ ","n","pluginTemplate","v",["^ ","id","select1","^4","widget","^5","SelectWidget2","^6",null,"^7",null,"^8",null,"^9",["^3",["imageByIndex",,"_disabledByIndex",["^:",["","","",false,false]],"showSelectionIndicator",true,"_values",["^:",["1","2","3","4","5"]],"iconByIndex",,"values",,"readOnly",false,"iconAfter","","_iconByIndex",["^:",["","","","",""]],"overlayMinWidth",null,"allowDeselect",false,"inputValue","","hidden",false,"customValidation","","data",,"searchMode","fuzzy","hideValidationMessage",false,"fallbackTextByIndex",,"textBefore","","_fallbackTextByIndex",["^:",["","","","",""]],"selectedItem",null,"validationMessage","","automaticItemColors",false,"itemAdornmentShape","circle","textAfter","","showInEditor",false,"showClear",false,"tooltipText","","labelAlign","left","formDataKey","{{ self.id }}","value",null,"hiddenByIndex",,"labelCaption","","labelWidth","33","deprecatedLabels",,"_hiddenByIndex",["^:",["","","",false,false]],"placeholder","Select an option","_captionByIndex",["^:",["","","","",""]],"itemAdornmentSize","auto","label","Columns","_hasMigratedNestedItems",true,"captionByIndex",,"_validate",false,"itemMode","static","labelWidthUnit","%","allowCustomValue",false,"invalid",false,"selectedIndex",null,"_tooltipByIndex",["^:",["","","","",""]],"_colorByIndex",["^:",["","","","",""]],"tooltipByIndex",,"iconBefore","","colorByIndex",,"selectedLabel","","events",["^3",],"_ids",["^:",["3f00f","dcffc","f678e","d3b62","2004b"]],"emptyMessage","No options","overlayMaxHeight",375,"loading",false,"disabled",false,"labelPosition","left","_labels",["^:",["","","","",""]],"labelWrap",false,"disabledValues",,"disabledByIndex",,"maintainSpaceWhenHidden",false,"_imageByIndex",["^:",["","","","",""]],"required",false,"labels",]],"^;",["^3",],"^<",["^0",["^ ","n","position2","v",["^ ","^@","form1","^I","header","^J","","row",2,"col",6,"^K",1,"^L",5,"^M",0]]],"^=",null,"^>",null,"^?",null,"^@","","^A","~m1716887545306","^B","~m1716889815710","^C","","^D",null]]],"select2",["^0",["^ ","n","pluginTemplate","v",["^ ","id","select2","^4","widget","^5","SelectWidget2","^6",null,"^7",null,"^8",null,"^9",["^3",["imageByIndex",,"_disabledByIndex",["^:",["","","",false,false]],"showSelectionIndicator",true,"_values",["^:",["1","2","3","4","5"]],"iconByIndex",,"values",,"readOnly",false,"iconAfter","","_iconByIndex",["^:",["","","","",""]],"overlayMinWidth",null,"allowDeselect",false,"inputValue","","hidden",false,"customValidation","","data",,"searchMode","fuzzy","hideValidationMessage",false,"fallbackTextByIndex",,"textBefore","","_fallbackTextByIndex",["^:",["","","","",""]],"selectedItem",null,"validationMessage","","automaticItemColors",false,"itemAdornmentShape","circle","textAfter","","showInEditor",false,"showClear",false,"tooltipText","","labelAlign","left","formDataKey","{{ self.id }}","value",null,"hiddenByIndex",,"labelCaption","","labelWidth","33","deprecatedLabels",,"_hiddenByIndex",["^:",["","","",false,false]],"placeholder","Select an option","_captionByIndex",["^:",["","","","",""]],"itemAdornmentSize","auto","label","Rows","_hasMigratedNestedItems",true,"captionByIndex",,"_validate",false,"itemMode","static","labelWidthUnit","%","allowCustomValue",false,"invalid",false,"selectedIndex",null,"_tooltipByIndex",["^:",["","","","",""]],"_colorByIndex",["^:",["","","","",""]],"tooltipByIndex",,"iconBefore","","colorByIndex",,"selectedLabel","","events",["^3",],"_ids",["^:",["3f00f","dcffc","f678e","dcaa3","5d1e6"]],"emptyMessage","No options","overlayMaxHeight",375,"loading",false,"disabled",false,"labelPosition","left","_labels",["^:",["","","","",""]],"labelWrap",false,"disabledValues",,"disabledByIndex",,"maintainSpaceWhenHidden",false,"_imageByIndex",["^:",["","","","",""]],"required",false,"labels",]],"^;",["^3",],"^<",["^0",["^ ","n","position2","v",["^ ","^@","form1","^I","header","^J","","row",2,"col",0,"^K",1,"^L",5,"^M",0]]],"^=",null,"^>",null,"^?",null,"^@","","^A","~m1716887596367","^B","~m1716889804079","^C","","^D",null]]]]],"^A",null,"version","2.106.2","appThemeId",null,"preloadedAppJavaScript",null,"preloadedAppJSLinks",,"testEntities",,"tests",,"appStyles","","responsiveLayoutDisabled",false,"loadingIndicatorsDisabled",false,"urlFragmentDefinitions",["^:",],"pageLoadValueOverrides",["^:",],"customDocumentTitle","","customDocumentTitleEnabled",false,"customShortcuts",,"isGlobalWidget",false,"isMobileApp",false,"multiScreenMobileApp",false,"mobileAppSettings",["^ ","mobileOfflineModeEnabled",false],"folders",["^:",],"queryStatusVisibility",false,"markdownLinkBehavior","auto","inAppRetoolPillAppearance","NO_OVERRIDE","rootScreen",null,"instrumentationEnabled",false,"experimentalPerfFeatures",["^ ","serverDepGraphEnabled",false,"useRuntimeV2",false],"experimentalStabilityFeatures",["^ ","lockModelForUpdates",false],"experimentalDataTabEnabled",false]]]"},"changesRecord":[{"type":"@@redux-undo/UNDO"},{"type":"WIDGET_REPOSITION2","payload":{"moves":[{"move":{},"widgetIds":}],"largeScreen":true},"hideChangelogEntry":false},{"type":"PLUGIN_DELETE","payload":,"hideChangelogEntry":true}],"gitSha":null,"checksum":null,"createdAt":"2024-05-28T09:52:09.224Z","updatedAt":"2024-05-28T09:52:09.224Z","pageId":521,"userId":337,"branchId":null},"modules":{}}

Backofficely · May 28, 2024, 12:37pm

Adding text area in the column headers is not supported as far as I know.
You can create a horizontal listView component with the columns of the table instead, and display that above the table, instead of the header.

Regarding the dynamic table columns and rows, this should be doable, you simply need to use the parameters to generate an array that your table will use as data. You can do this with a js transformer.