Widget help for complete ignoramuses

Hi!
I am trying to create a widget that displays the official data of Covid-19 sufferers in my state.
I don’t understand programming and I would ask someone for help. I would like someone to create the simplest script for me to display a widget with data from the attached page. (json) https://www.koronavirus.hr/json/?action=podaci_zadnji
Thanks in advance. I hope to learn something from that script and try to edit it later and expand my knowledge.

You start with a very simple widget.

const widget = new ListWidget()
const title = widget.addText('Covid-19')

Script.setWidget(widget)
await widget.presentSmall()

then start filling-in some data

const widget = new ListWidget()
const title = widget.addText('Covid-19')


const url = 'https://www.koronavirus.hr/json/?action=podaci_zadnji'
const req= new Request(url)
const data = await req.loadJSON()
// get the desired data. in this case it's the first and only item
const stats = data[0]
// get the number of cases in Croatia
const cases = stats.SlucajeviHrvatska
const casesCroatia = widget.addText(cases.toString())

Script.setWidget(widget)
await widget.presentSmall()

then some formatting and alignment

const widget = new ListWidget()
const title = widget.addText('🇭🇷 Covid-19')
title.centerAlignText()


const url = 'https://www.koronavirus.hr/json/?action=podaci_zadnji'
const req= new Request(url)
const data = await req.loadJSON()
// get the desired data. in this case it's the first and only item
const stats = data[0]
// get the number of cases in Croatia
const cases = stats.SlucajeviHrvatska

const casesStr = 'Slucajevi: ' + (new Intl.NumberFormat().format(cases))

const casesCroatia = widget.addText(casesStr)
casesCroatia.centerAlignText()
casesCroatia.font = Font.systemFont(12)

Script.setWidget(widget)
await widget.presentSmall()

and a few more bells and whistles, you can have this.

7 Likes

I am very grateful to you. Thank you for taking the time for this wonderful widget. I can say that I have understood how widget creation works and that based on this example I will be able to create multiple widgets that will display the data I want to see.
I would like to know if the data from the Data Jar application can be read from the Scriptable application and if so, how can this be done?

Data Jar is by the same developer but does not support direct access via Scriptable. It is a data store for Shortcuts only. You can call a Scriptable script from Shortcuts and you can call Shortcuts from Scriptable. But I don’t think you would be able to use it from a widget as I think they are pretty much a special case and run under different environmental constraints; but maybe someone has figured a way around that?

1 Like

Good job supermamon - very patient explanation…

Just a quick word of thanks here. Very educative and helpful.