Help splitting widget text into two columns

Hi all,

I’d like to modify this widget to have two columns, thereby doubling the number of stocks listed (i.e. left half has 8 x stock symbols plus % change and right half has the next 8 x stock symbols plus % change). I can’t really get my head around widget placement / stacks so any help is appreciated.

image

GitHub link for code.

We’ve taken the discussion to the r/Scriptable discord and can post the final code here when finished

Some problem here, how can I create a widget like this?

widgetexample

got it

let widget = new ListWidget()
widget.setPadding(10, 10, 10, 10)

let title = widget.addText("title text abc")
title.font = Font.boldSystemFont(16)
widget.addSpacer(10)

let mainStack = widget.addStack()
let leftStack = mainStack.addStack()
leftStack.layoutVertically()
leftStack.addText("55,0")
leftStack.addText("col1")
mainStack.addSpacer(10)
let rightStack = mainStack.addStack()
rightStack.layoutVertically()
rightStack.addText("102,3")
rightStack.addText("col2")
widget.addSpacer(10)

let sub = widget.addText("sub title lorem ipsum")
sub.font = Font.systemFont(10)

if (!config.runsInWidget) widget.presentSmall()

Script.setWidget(widget)
Script.complete()
2 Likes

As an update, we pushed the updated code to the same link in the post