Widget Examples

[jsloat]

A tip that took me a while to figure out – make sure the script is not set to “always run in app”, or the widget won’t work

[supermamon]

Obligatory xkcd widget - https://gist.github.com/supermamon/c1d5a3a2a5c58af25f731f42eb8e5af2

Options

• Use current or random comic
• Show/Hide alt caption
• Choose between dark/light mode or follow system

[jsloat]

Loving it so far. I made a simple one that displays calendar events in the range of -1 hours -> +2 hours from now. Tapping the widget prompts you to select one of those events to create a templated Bear note for.

Code (without creation of note) is here: https://gist.github.com/jsloat/3f30185daaa6efd7fdd42d26d67b500c

[KevinScottMoran]

Is there a way to do horizontal layouts in the widget? For example, if I wanted image on the left side and text on the right?

[simonbs]

That is not currently supported. Many people have asked to it so I’m thinking of ways to support it.

[simonbs]

It should automatically refresh during the day.

[simonbs]

Really love seeing all the awesome widgets everyone is building! Thanks for sharing! And keep them coming!

[KevinScottMoran]

Sorry for basically asking for swiftUI in JS

[jayelevy]

@jsloat would you mind sharing the script you used for this?

[jsloat]

No problem, just posted it here: https://gist.github.com/jsloat/3f30185daaa6efd7fdd42d26d67b500c

I didn’t include the creating of a new note code in there, but let me know if you’d like to see it.

[jsloat]

Spun up another one tonight – overdue reminders:

Code here: https://gist.github.com/jsloat/ed39375dadfc3496030b53c466d43350

---

Really awesome work @simonbs! So much fun to have this available on launch day and get to play around with it. Looking forward to building some more advanced functionality in the future.

[jsloat]

Is anyone else seeing an issue where 2 different widgets will show the same content? Wondering if it has to do with multiple widgets of the same size or something

[simonbs]

This simple script shows an image located in the Files app.

// Pass the full filename (including file extension) as a parameter when configuring the widget.
// The script assumes that the image is located in the root of Scriptable's folder in iCloud Drive.
let filename = args.widgetParameter
let img = getImage(filename)
let widget = createWidget(img)
if (!config.runsInWidget) {
  widget.presentMedium()
}
Script.setWidget(widget)
Script.complete()
  
function createWidget(img) {
  let w = new ListWidget()
  w.setPadding(0, 0, 0, 0)
  let wimg = w.addImage(img)
  wimg.centerAlignImage()
  return w
}

function getImage(filename) {
  let fm = FileManager.iCloud()
  let dir = fm.documentsDirectory()
  let filePath = fm.joinPath(dir, filename)
  return fm.readImage(filePath)
}

[Jacob]

Today view using Todoist and Toggl.

You can find the code here: https://github.com/jacobpretorius/Scriptable-Scripts/blob/master/Today-View.js
It needs an Azure Function which is also linked in the comments,

Also wrote a blogpost guide about it yesterday if anyone is interested: https://jcpretorius.com/post/2020/custom-javascript-ios-14-widgets-with-scriptable

[lancetx]

I have once noticed that. More often I have noticed a large widget showing it’s first line of text repeated at the bottom over another line. It doesn’t happen when run from the Scriptable app.

[lancetx]

Is there any way to specify a widget refresh frequency or rate?

[yehudab]

Is there a way to use Location from a widget?
When running from the app, I can get the location, but from a widget, I see this error:

I noticed that apps like Maps and Weather now have new permission under privacy: While using the App or Widgets. Maybe Scriptable is missing this permission?

Update: Using non-beta versions of iOS 14.0 and Scriptable 1.5 (161)

Update 2: Here is a minimal script to demonstrate the issue:

let widget = await createWidget()
if (!config.runsInWidget) {
  await widget.presentSmall()
}
Script.setWidget(widget)
Script.complete()

async function createWidget(items) {
  let w = new ListWidget()
  const latLong = await Location.current()
  const loc = `${latLong.latitude}/${latLong.longitude}`
  w.addText(loc)
  return w
}

[ofirl]

will there be a way to define multiple tap targets for the medium and large widgets?
maybe something like WidgetText.url property (for consistency with the ListWidget.url property)?

[marco79]

Unfortunately not. iOS decides the update cycle. It seems to update less frequently if your iPhone is in energy saving mode.