Issue storing component property array value in SQL database, retrieving and restoring as property value

I am testing out the Dashboard seen in the sample quick start project and the dashboard has a property named ‘widgets’ that temporarily stores the users preferences for their dashboard. I am trying to store the value of the ‘widgets’ property to a database table with username, widgetValue columns so that their preferences can be saved beyond the session. The problem is that when I query for the array it is formatting as a string, not an array.

Here is the value being stored in the database and being retrieved as a string. Is there some trick to transforming this string to an actual array?
[ {
“isConfigurable”: false,
“name”: “Gauge”,
“header”: {
“style”: {
“classes”: “”
},
“title”: “Gauge”,
“enabled”: true
},
“minSize”: {
“columnSpan”: 2,
“rowSpan”: 3
},
“style”: {
“classes”: “”
},
“position”: {
“columnEnd”: 3,
“columnStart”: 1,
“rowStart”: 1,
“rowEnd”: 4
},
“viewParams”: {
“tagPath”: “[Sample_Tags]Ramp/Ramp1”
},
“body”: {
“style”: {
“classes”: “”
}
},
“viewPath”: “framework/widgets/gauge”
},
{
“isConfigurable”: false,
“name”: “LED”,
“header”: {
“style”: {
“classes”: “”
},
“title”: “LED”,
“enabled”: true
},
“minSize”: {
“columnSpan”: 1,
“rowSpan”: 1
},
“style”: {
“classes”: “”
},
“position”: {
“columnEnd”: 6,
“columnStart”: 4,
“rowStart”: 1,
“rowEnd”: 3
},
“viewParams”: {
“tagPath”: “[Sample_Tags]Ramp/Ramp2”
},
“body”: {
“style”: {
“classes”: “”
}
},
“viewPath”: “framework/widgets/led”
}]

Here is the component property

Here is the widgets property value stored in a db and queried back as a custom property, notice its a string

Add a transform that calls system.util.jsonDecode?

This worked perfectly! I changed to use a scalar query and json decode transformation.

Tip: shrink the windows to a size that shows the information of interest without acres of whitespace. Then do the screengrab!