Working with Custom Type in data tables and displaying keys/values from an object in table form

[Nick_AMS]

Hey!

Just getting started with WeWeb after putting a fair bit of time into getting my backend functionality working with XANO.

Couple of issues I ran into whilst playing around this morning.

1) Number formatting (or custom formulas) in Data Tables -
Have been trying to format the output on one of the columns in the data table so that it shows as a % rather than a raw decimal, so set it to type ‘custom’ and put in a formula.
The ‘current value’ in the formula comes up with the right figure, but then nothing appears in the data table itself, listing as ‘empty list’

Any idea what I’m doing wrong here?

2) Displaying all values from an object in a table form
I’m looking to display the full set of contract parameters on a page (view only on this page, but ability to edit in same structure on a separate page). Created a variable containing the object I’m bringing back and was hoping just to display that as a table with the keys in column A and values in column B (and ‘edit value’ button in the future next to each value)

What would be the easiest way of doing this with WeWeb? Realise I can create two text boxes and type in they key for the first, link to the value for the second and repeat this 20 times manually, but guessing there’s an easier way of achieving this

Thanks!

Nick

[kevinwasie]

For question #2…

I would convert the object to an array of objects so that you can use a collection to display the results.

There may be a way to do this in the nocode functions, but a little bit a javascript and its simple.

Convert the object to an array with something like this:

Object.entries(XANO_DATA_TEST[‘data’][‘func_1’][‘contracts_1’]).map(([key, value]) => ({key,value}));;

Then, use that result as a collection list, and display the key/value.

[kevinwasie]

You’ll want to put that javascript right into the area where you select the items for the collection.

Just click on Javascript on the function creator, and then put in in there, after “return”

[Nick_AMS]

@kevinwasie

map(([key, value]) => ({key,value}));;

Thanks Kevin!

Managed to get the Javascript to run after selecting the object via point and click (gives it a collections UUID)- assume that’s ok, see below

Not sure what to do next though in terms of displaying that output (or saving it as a new variable) - couldn’t find a ‘return’ option.

Currently it’s being executed in a multi-step workflow upon selecting a contract from the data table referenced in step 1…

Thanks,

Nick

[kevinwasie]

You need to now use that array (which you converted) as the list of items for the data grid.

If you are going to do the conversion as part of a workflow, then you will want to bind the results of the conversion to a variable, and then use that variable as the collection list.

1. Create a variable called something like array_to_display
2. On that javascript action step, change it to “Change variable Value” and select “array_to_display” as the variable
3. Click on the bind/plug button next to new value
4. Click on Javascript in dropdown top left of new popup window
5. paste your code after the word return

Now, you have taken your object, converted it into an array, and returned that value to the variable called “array_to_display” so, you can use that variable as a collection list:

1. Go to your data table
2. Go to settings
3. click on Data Grid
4. Select your array_to_display variable

This will now display the results of that conversion in the data table.

One note: that javascript has some compatibility issue with earlier versions of IE primarily. IF your users are using IE, we may want to use different javascript to convert object to array.

Convert object to array in Javascript - javatpoint

[Nick_AMS]

Kevin - failed to thank you for this. Worked like a charm.

Anyone else have any ideas on the number formatting piece for Datagrids ?

[dorilama]

@Nick_AMS

Anyone else have any ideas on the number formatting piece for Datagrids ?

In your first picture you are binding the value of the item of the flexbox of the cell. In this way you are trying to create a list inside every cell but the formula is returning a string, so weweb complains that the binding is an empty list.

Try this:

• you have your column in the datagrid set to custom element
• add a text element inside the cell
• bind the value of the text with your formula
  
  

[Nick_AMS]

Thanks Dorilama, but still struggling unfortunately…

When editing the datagrid, what should I choose as the ‘path’ after selecting custom?

Only given the option of selecting fields from the object
![image|399x435](upload://iQ1Sk24Lr9d3Q0aXg2xy1YEnaIu.png

Leaving the path empty and putting in the formula still brings me back empty cells unfortunately

Any ideas?

[dorilama]

every column needs data to iterate on. you need to specify the path of the data to make this work.

the path should be pointing to what you want to display in that column.

[dorilama]

Also in your last picture you are binding the value of the items of the cell again.

You need to add a text element inside the cell and then bind the value of the text inside the cell.

[Nick_AMS]

Ah - hadn’t understand that you drag a text element into the field

Thought it was going to be a way of making it a text element from the right hand menu

All sorted! Much appreciate your help!

N

[dorilama]

@Nick_AMS

All sorted! Much appreciate your help!

Awesome!