Widget Examples

[Ricardo_M]

I just stumbled upon Glimpse, an iOS 14 beta app that can take web content and show it in widgets. I haven’t tested it yet but here is the TestFlight link for those who’d like to give it a go:

Join the Glimpse 2 beta

[fischgeek]

Made one that pulls the content of a randomly chosen Trello card with a specific label on a board.

[MarcMagn1]

I made a widget that takes a random quote from an Airtable base where I store a selection I curate.
Airtable is convenient because it can be enriched from anywhere and it exposes APIs that are super easy to use. Now, I’d be happy to have the possibility to do the same with DataJar @simonbs
Here is the code - Not so neat but it does the job:

let baseURL = "https://api.airtable.com/v0/REPLACEWITHYOURS/Quotes?maxRecords=100&view=Grid%20view"    
let r = new Request(baseURL);
r.headers = { 'Authorization': 'Bearer REPLACEWITHYOURS'};
let json = await r.loadJSON(); 
let quotes = json['records'];
let randomQuote = (quotes[Math.floor(Math.random()*quotes.length)]);
let quoteText = randomQuote['fields']['Quote'];
let quoteAuthor = randomQuote['fields']['Author'];


let widget = createWidget();

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

function createWidget() {
    let w = new ListWidget();
    let widgetText = w.addText(quoteText);
    widgetText.textSize = 15;
    let widgetSubText = w.addText(quoteAuthor);
    widgetText.textSize = 13;    
    return w
}

[Eric_Granata]

Quick question: can the content of a widget only be updated when the script is run? For example, could the example News in Widget script refresh every so often?

[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.