Positioning with table cells

Scriptable
1

Hi,

I’ve made a widget to display some information from my app backend systems. Presently the data is stacked on the left hand side like so:

Title

subtitle
data1
data2
data3
data4

I’d like to add another range of data but have spent the day fiddling with horizontal and vertical stacks without much success… What I’m trying to achieve, in a medium sized widget, is:

IMG_3564
IMG_35643024×4032 2.44 MB

The bottom rows should be 50/50 split. I’ve tried to get cells to behave like this but just no luck! What am I doing wrong?

// Variables used by Scriptable.
// These must be at the very top of the file. Do not edit.
// icon-color: cyan; icon-glyph: magic;
 
let items = await loadItems("<my data source>")

// if (config.runsInWidget) {
  let widget = createWidget(items)
  Script.setWidget(widget)
  Script.complete()
// } 

function createWidget(data) {

	let w = new ListWidget()
	w.backgroundColor = new Color("#1e1f21")
	let textColor = new Color("#45a0f8")
	
	let titleStack = w.addStack()	
	let titleCount = data.Total
	let titleText = titleStack.addText('EmergencyLocate - ' + titleCount)
	titleText.font = Font.boldSystemFont(24)
	titleText.textColor = textColor
	
	w.addSpacer()
	let header = w.addStack()
	let row = w.addStack()
	row.backgroundColor = Color.white()
	row.centerAlignContent()

	let dataTable = new UITable()
	let trow = new UITableRow()
	
	dataTable.addRow(trow)
	
	let leftCell = UITableCell.text('LEFt Cell')
	leftCell.font = Font.boldSystemFont(14)
	leftCell.textColor = textColor	
	leftCell.leftAligned()
 	leftCell.widthWeight = 4
	
	trow.addCell(leftCell)
	
	

// 	 left.backgroundColor = Color.red()
// 	 left.addSpacer(4)
//	left.leftAligned()
// 	 left.bottomAlignContent()
// 	 left.layoutVertically()
	 
// 	 let right = trow.addCell()
//	 right.rightAligned()
// 	 right.backgroundColor = Color.blue()
// 	 right.bottomAlignContent()
// 	 right.layoutVertically()

	
	//Subtitle
	let subTitleText = header.addText('Past 24hrs')
	subTitleText.font = Font.boldSystemFont(14)
	subTitleText.textColor = textColor	
	

	let w3wEntry = (data.Xw3wEntry) ? data.Xw3wEntry : '0';
	let SMS999 = (data.X999Find) ? data.X999Find : '0';
	let apiFind = (data.XapiFind) ? data.XapiFind : '0';
	let DirResp = (data.X999Direct) ? data.X999Direct : '0';
	
	let w3wEntryStr = w.addText('Conversion Tool: ' + w3wEntry)
	  w3wEntryStr.font = Font.boldSystemFont(10)
	  w3wEntryStr.textColor = Color.white()
	  
	  let SMS999Str = w.addText('Find By SMS: ' + SMS999)
	  SMS999Str.font = Font.boldSystemFont(10)
	  SMS999Str.textColor = Color.white()
	  
	  let apiFindStr = w.addText('Find By API: ' + apiFind)
	  apiFindStr.font = Font.boldSystemFont(10)
	  apiFindStr.textColor = Color.white()
	  
	  let DirRespStr = w.addText('Deployments: ' + DirResp)
	  DirRespStr.font = Font.boldSystemFont(10)
	  DirRespStr.textColor = Color.white()

  return w
  
}
  
async function loadItems(Theurl) {
  let url = Theurl
  let req = new Request(url)
  let json = await req.loadJSON()
  return (json)
}
2

I don’t think that you’re doing anything wrong. Stacks are under-documented (eg: what units are the numbers in the spacer/spacing supposed to be?) And not yet very practical. In order to achieve what you seem to want, you’d probably need one horizontal stack per line that consists of two more horizontal stacks, one for each column. Put a spacer after the text in the left one and a spacer before the text in the right one.
Personally, I’d love to be able to use HTML in the widgets and CSS positioning with flex boxes. But that’s probably a no go.

3

Yeah, I read the docs and was thinking why can’t width be % rather than just a ‘value’?

I ended up background colouring a lead of stacks, cells etc and updating the widget to try and work out what was happening… Then gave up