Concatenate fields in columns

Ask the community
,
1

Hello there

Following the tutorial on https://support.wix.com/en/article/velo-tutorial-calculating-and-displaying-collection-data I have a table, that I want to fill with data from a collection. It works and populates a column with a field from my collection:

$w.onReady(function () {
  const currentColumns = $w("#table1").columns;
  const calculatedColumns = [
    
    {
      "id": "colFullName",
      "dataPath": "memberlink.customfields_system_firstname",
      "label": "Fullname",
      "type": "string",
    },
  ];
  $w("#table1").columns = calculatedColumns.concat(currentColumns);
 });

However, what I want to do and the reasons I’m doing this is that I want to display a column with a fullname of the persons from the collection, that means firstname and lastname combined.

Is this even possible? The second field key is memberlink.customfields_system_lastname. I tried to concatenate these fields like

"memberlink.customfields_system_firstname" + " " "memberlink.customfields_system_lastname" or
"memberlink.customfields_system_firstname\" + \" \" \"memberlink.customfields_system_lastname" or
['memberlink.customfields_system_firstname'] + [ ]  + ['memberlink.customfields_system_lastname']" etc....

and several other combinations, but it did now work out.

Do I have the wrong syntax, or is it even not possible to concatenate fields in the 'columns" element. And if yes, what would be an option to solve the problem of a ‘FullName’ column?

Many thanks for any help in advance,

Micharius

2

My suggestion would be to forget about tables and instead to use - - → REPEATERS.
Repeaters are more customizable and offer you more flexibility and options.

3

I already use repeaters on this page. Within the repeater, I have a table which shows only the entries related to the actual item in the repeater (1:M connection), it’s basically an overview over projects, the assigned members are shown in the table.

4

Defining TABLE… (columns)…

$w("#table1").columns = [
  {
	"id":"colFirstName",
"dataPath":"firstname",
	"label":"Firstname",
	"type":"string",
    	"width": 100,
    	"visible": true,
   	// "linkPath": "link-field-or-property"
  },
  {
	"id":"colLastName",
"dataPath":"lastname",
	"label":"Lastname",
	"type":"string",
    	"width": 100,
    	"visible": true,
   	// "linkPath": "link-field-or-property"
  },
  {
	"id":"colFullName",
"dataPath":"fullname",
	"label":"Fullname",
	"type":"string",
    	"width": 100,
    	"visible": true,
   	// "linkPath": "link-field-or-property"
  },
];

Adding a new row…

let rows = $w("#table1").rows;
rows.push({field_1: "Value1", field_2: "Value2"});
$w("#table1").rows = rows;

Setting values into the table

let data = [
   {"firstname":"A", "lastname":"A", "fullname":"A"},
   {"firstname":"B", "lastname":"B", "fullname":"B"},
   {"firstname":"C", "lastname":"C", "fullname":"C"},
   {"firstname":"D", "lastname":"D", "fullname":"D"},
   {"firstname":"E", "lastname":"E", "fullname":"E"},
   {"firstname":"F", "lastname":"F", "fullname":"F"}
]
    $w("#table1").rows = data;

Full-example…

$w.onReady(function () {    
    $w("#table1").columns = [
        {
            "id":"colFirstName",
            "dataPath":"firstname",
            "label":"Firstname",
            "type":"string",
            "width": 100,
            "visible": true,
            // "linkPath": "link-field-or-property"
        },
        {
            "id":"colLastName",
            "dataPath":"lastname",
            "label":"Lastname",
            "type":"string",
            "width": 100,
            "visible": true,
            // "linkPath": "link-field-or-property"
        },
        {
            "id":"colFullName",
            "dataPath":"fullname",
            "label":"Fullname",
            "type":"string",
            "width": 100,
            "visible": true,
            // "linkPath": "link-field-or-property"
        }
    ];

    let data = [
        {"firstname":"Velo", "lastname":"Ninja"},
        {"firstname":"Mr-X", "lastname":"Junior"},
        {"firstname":"Mrs-Y", "lastname":"Senior"},
    ]

    $w("#table1").rows = data;
    let xxx = $w('#table1').rows[0]["firstname"]+" / "+$w('#table1').rows[0]["lastname"]; 
    console.log(xxx);    
});

Result of console…

940×67 2.67 KB

Table-View:

743×306 2.22 KB

This example do not have any connected dataset.
All data and column-setting were generated by code.

What is still missing? Continue…

let data2 = $w("#table1").rows;
        console.log(data2[0]);
        data2[0].fullname = "xxxxx";
        console.log(data2);

What has been changed ?

What is still missing? Continue…
…
…
.

In this example you should get all the knowledge you need to solve your issue.

5

Well thanks a lot!!!
Although I thought I made just a simple error in the code, this seems to be a bigger think :hushed:
But still, I d’love to try it out…all I need is a little time…
Kind regards,
Micharius